为了防止 xss 攻击，html 中的什么字符需要被转译xss 是最常见的一种网络安全攻击方式之一，你可以点击此处来详细

xss 是最常见的一种网络安全攻击方式之一，你可以点击此处来详细了解xss。

两种需要转译的情况

当你向页面的 document 对象插入一个元素时，元素的内容里有三种字符需要被转译：

& becomes &amp;
< becomes &lt;
> becomes &gt;

需要注意的点有两个：

<!-- here代表需要被转译 -->
<p>here</p>
<not-here>...</not-here>

2.script 和 style 由于其标签的特殊性，其内容不需要被转译：

<style>
  not-here
</style>

<script>
  not - here;
</script>

当你向元素插入一个属性时，有两种字符需要被转译：

" becomes &quot;
' becomes &#39;

需要注意的点有两个：

<!-- here代表需要被转译 -->
<p title="here">...</p>
<p not-here="..."></p>

在某些情况下，你不对以上字符进行转译可能不会发生问题，但请别这样做，因为你可能会在这些地方栽跟头。
通常，你不应该把空格转译成，因为不是一个正常的空格，它不会被折行，除非你想特地利用&nbsp;来使你的文本不发生折行，但这是不被推荐的。你应该用pre标签或white-space来控制你的文本的不折行。的另一个用处是可以插入同等数量的空格同时不会被折叠成一个空格（我们知道 html 里面的连续的空格或换行符会被折叠成一个空格），这不经常用到。
总之，在包含动态插入的开发工作中，你都应该对以上提到的字符进行转译。幸运的是，很多框架已经帮你做了这件事了，比如react-dom 的 escapeTextForBrowser 函数，所有经过 ReactDom 渲染的动态插入，都会经过 escapeTextForBrowser 函数的一次检测+转译。

参考：