安全的使用 innerHTML 插入 DOM

前端项目一般应该尽量避免直接插入 html 字符串，因为这样很容易造成 xss 攻击。

但是有时候是无法避免的，应该怎么保证我们要插入的 html 字符串是安全的呢？

使用 innerText

如果是单纯的字符串，最好是使用 innerText 赋值。

拼接 html 时，进行 Escape 处理

var say = 'a bird in hand > two in the bush'
var html = htmlEscape`<div>I would just like to say : ${say}</div>`

function htmlEscape(literals, ...placeholders) {
  let result = ''
  for (let i = 0; i < placeholders.length; i += 1) {
    result += literals[i]
    result += placeholders[i]
      .replace(/&/g, '&amp;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/javascript/gi, '$&&rlm;')
  }

  result += literals[literals.length - 1]
  return result
}

其中 javascript 替换为 javascript‏

html 不占位不显示的转义符

• ‏
• ‎
• ‍
• ‌

拼接好的 html 字符串，使用 DOMPurify 库处理

对于已经拼接好的 html 字符串，不知道是否安全的情况下，在插入 DOM 之前，可以使用 DOMPurify 处理下。