如果客户端从客户端更改了某些数据属性，如何处理？

Question

<?php foreach ($communities as $community) { ?>
    <div class="community-container">
        <p><?php echo $community->Title ?></p>
        <button class="del-btn" data-id="<?php echo $community->ID ?>">Delete</button>
    </div>
<?php } ?>




<Script>
    const deleteBtns = document.getElementsByClassName('del-btn');
    var deleteBtnsArray = Array.from(deleteBtns);

    deleteBtnsArray.map(deleteBtn => {
        deleteBtn.addEventListener('click', () => {
            const delRequest = new XMLHttpRequest();
            let params = [];
            params = `deleteCommunity=true&communityID=${deleteBtn.dataset.id}`;
            delRequest.open('POST', '/ajax/delete-community');
            delRequest.onreadystatechange = function() {
                if (delRequest.responseText === 'success') {
                    deleteBtn.parentElement.remove();
                }
            }
            delRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            delRequest.send(params);
        })
    })
</Script>

我的页面上有社区列表，每个社区项目都有一个删除按钮。现在，当我点击删除按钮时，我想删除相关的社区项目。

但是...

我可以从浏览器中检查这些删除按钮并将其 data-id 值更改为其他值（如果删除按钮的 data-id 为 10，我可以将其更改为 1000）。然后，当我在客户端更改其 data-id 值后单击该删除按钮时，它将删除其他一些社区而不是更正一个。（如果存在具有更改的 data-id 值的社区）因为按钮 data-id 已更改并且 JavaScript 代码采用该值来发出 AJAX 请求。我无法阻止用户从客户端更改 data-id。因此，如果用户从客户端更改数据属性，我该如何处理这种情况？

额外信息

$communities 是一组社区对象，每个社区项目都有一个名称和 ID。

Answer 1

您可以在页面加载后阅读 data- 道具。将它们存储在数组或其他内容中，然后从元素中删除 data- 道具。

请注意，验证可能应该发生在服务器端而不是客户端的某个地方

// Wrap everything in an IIFE so we don't create global variables
(() => {
  const ID_MAP = new WeakMap();

  const onClickAction = ({ currentTarget }) => {
    // Exit if there is no ID stored
    if(!ID_MAP.has(currentTarget)) return;
    
    // Retrieve and log ID
    const id = ID_MAP.get(currentTarget);
    console.log(id);
  }
  
  const btns = document.querySelectorAll('button');
  for(const btn of btns) {
    // Skip if it doesn't have an ID
    if(!btn.dataset.id) continue;

    // Store and hide `data-id` attribute
    ID_MAP.set(btn, btn.dataset.id);
    btn.removeAttribute('data-id');

    // Add event listener
    btn.addEventListener('click', onClickAction, false);
  }
})();

<button data-id="001">id: 001</button>
<button data-id="002">id: 002</button>
<button data-id="003">id: 003</button>
<button data-id="004">id: 004</button>
<button data-id="005">id: 005</button>

编辑：使用评论中的建议 （事件委托）

// Wrap everything in an IIFE so we don't create global variables
(() => {
  const ID_MAP = new WeakMap();

  const onClickAction = ({ target }) => {
    // Exit if it's not a button
    if(target.nodeName !== 'BUTTON') return;
  
    // Exit if there is no ID stored
    if(!ID_MAP.has(target)) return;
    
    // Retrieve and log ID
    const id = ID_MAP.get(target);
    console.log(id);
  }
  
  const btns = document.querySelectorAll('button');
  for(const btn of btns) {
    // Skip if it doesn't have an ID
    if(!btn.dataset.id) continue;

    // Store and hide `data-id` attribute
    ID_MAP.set(btn, btn.dataset.id);
    btn.removeAttribute('data-id');
  }
  
  // Add event listener, instead of `document` you can also use a common parent container
  document.addEventListener('click', onClickAction, false);
})();

<button data-id="001">id: 001</button>
<button data-id="002">id: 002</button>
<button data-id="003">id: 003</button>
<button data-id="004">id: 004</button>
<button data-id="005">id: 005</button>

如果客户端从客户端更改了某些数据属性，如何处理？

How to handle if a client change some data attributes from the client side?

html

javascript

php

security

validation