如果客戶端從客戶端更改某些資料屬性，如何處理？

<?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洗掉按鈕的 a 為 10，我可以將其更改為 1000）。然后，當我data-id從客戶端更改其值后單擊該洗掉按鈕時，它將洗掉其他一些社區而不是更正社區。（如果社區存在具有更改的data-id值）因為按鈕data-id已更改并且JavaScript代碼使用該值來發出AJAX請求。我無法阻止用戶data-id從客戶端更改。因此，如果用戶從客戶端更改了資料屬性，我該如何處理這種情況？

額外的資訊

$communities 是一組社區物件，每個社區專案都有一個名稱和 ID。

uj5u.com熱心網友回復：

您可以data-在頁面加載后閱讀 道具。將它們存盤在一個陣列或其他任何東西中，然后data-從元素中洗掉prop(s)。

請注意，驗證可能應該發生在服務器端而不是客戶端的某個地方

// 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>

標籤：javascript php html 验证 安全

上一篇：如何對輸入資料的io-ts使用型別改進？

下一篇：NestJS是否有可能使用不同的驗證庫？