xss 是最常见的一种网络安全攻击方式之一,你可以点击此处来详细了解xss。
两种需要转译的情况
一、向 document 插入元素时
当你向页面的 document 对象插入一个元素时,元素的内容里有三种字符需要被转译:
& becomes &
< becomes <
> becomes >
需要注意的点有两个:这种情况需要转译的仅仅是元素的内容,如:
here
...
2.script 和 style 由于其标签的特殊性,其内容不需要被转译:
not-here
not - here;
二、向元素插入属性值时
当你向元素插入一个属性时,有两种字符需要被转译:
" becomes "
' becomes '
需要注意的点有两个:此情况需要转译的仅仅是元素的属性值,如:
...
一些建议在某些情况下,你不对以上字符进行转译可能不会发生问题,但请别这样做,因为你可能会在这些地方栽跟头。
通常,你不应该把空格转译成 ,因为 不是一个正常的空格,它不会被折行,除非你想特地利用 来使你的文本不发生折行,但这是不被推荐的。你应该用pre标签或white-space来控制你的文本的不折行。
的另一个用处是可以插入同等数量的空格同时不会被折叠成一个空格(我们知道 html 里面的连续的空格或换行符会被折叠成一个空格),这不经常用到。
总之,在包含动态插入的开发工作中,你都应该对以上提到的字符进行转译。幸运的是,很多框架已经帮你做了这件事了,比如react-dom 的 escapeTextForBrowser 函数,所有经过 ReactDom 渲染的动态插入,都会经过 escapeTextForBrowser 函数的一次检测+转译。
其他
除了转译html,另一个常用的方法是CSP(Content Security Policy),它的原理是:
A CSP compatible browser will then only execute scripts loaded in source files received from those allowlisted domains, ignoring all other script (including inline scripts and event-handling HTML attributes)
参考
参考:https://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-in-htmlstackoverflow.comContent Security Policy (CSP)developer.mozilla.org