使用模板文字時如何停止HTML注入-有解無憂

我有一個簡單的 CRUD webapp，它建立在基于用戶輸入填充模板文字的基礎上。問題是，如果用戶輸入類似的內容，<b>Hey</b>那么它會在頁面上呈現為粗體：

const element = (name) => {
  const elementHTML= 
            `<div>
              <ul>
                <li>${name}</li>
              </ul>
            </div>`
  const element = document.createElement('div')
  element.innerHTML = elementHTML
  return element.firstChild
}

const userInput = '<b>foo</b>'
document.body.appendChild(element(userInput)) //

我怎樣才能停止這種互動？我的猜測是在周圍使用一些不可見的字符${embedded expression}來阻止里面的內容被解釋為 HTML，比如：

const elementhtml = `<div>|${name}|</div>` |看不見的角色在哪里。

是否有將運算式繪制為文本而不是 HTML 的最佳實踐？我知道這是使用innerHTML 創建元素的產物，但是使用模板文字不是必須的嗎？

uj5u.com熱心網友回復：

不要將用戶的輸入直接插入 HTML 標記。要么轉義物體，以便將它們解釋為純文本而不是 HTML 標記，要么分配給.textContent元素的。

const element = (name) => {
  const elementHTML= 
            `<div>
              <ul>
                <li></li>
              </ul>
            </div>`
  const element = document.createElement('div')
  element.innerHTML = elementHTML
  element.querySelector('li').textContent = name;
  return element.firstChild
}

const userInput = '<b>foo</b>'
document.body.appendChild(element(userInput))

uj5u.com熱心網友回復：

您可以.replace() <分別>使用 unicode HTML 物體<和>。

const element = (name) => {
  const elementHTML =
    `<div>
              <ul>
                <li>${name}</li>
              </ul>
            </div>`;
  const element = document.createElement('div');
  element.innerHTML = elementHTML;
  return element.firstChild;
}

const userInput = (data) => data.replace(/</g, '&lt;').replace(/>/g, '&gt;');
document.body.appendChild(element(userInput(`<b>foo</b>`)));

uj5u.com熱心網友回復：

做同樣的事情，但不要在 li 標簽中直接提及。這樣做： document.getElementById("li").innerText=name

uj5u.com熱心網友回復：

我看到你是name從用戶那里得到的。您可以name先驗證是真實姓名，因此您無需考慮HTML. 這Regular Expression可用于驗證名稱。

/^[a-z ] $/iaz 中的字符不區分大小寫，并且允許使用空格。這意味著用戶不能在其中放置 html 標簽。

即使您已經驗證了用戶輸入，您仍然不應該使用innerHTML它，因為它將采用nameor textas html。您應該改為使用innerTextortextContent來防止這種情況。

您還可以通過您replace()的 replaceAll()方法洗掉部分文本，這可能html是text

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/493164.html

標籤：javascript html

上一篇：如何卸載Eclipse功能補丁？

下一篇：比較javascript中的陣列并創建一個新的元素陣列，該陣列正在被洗掉