HTML 属性值到底要不要 escape 特殊字符?

MDN 上说 HTML 有个 5 个特殊字符:< > " ' &。属性值用双引号时可以包含单引号,反过来亦然,比如:

<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>

但是其它特殊字符(<, >, &) 就需要 escape 吗?必须还是可选?最佳实践是什么?随便打开一个 MDN 页面,似乎是要 escape 的

<meta property="og:title" content="&lt;meta&gt;: The Document-level Metadata element">

但是我用 https://validator.w3.org/ 测试了下面没 escape 的,也没警告啊?为什么 MDN 还是要 escape < 和 > 呢?

<meta property="og:title" content="<meta>">

虽然escape不是万能的,但能解决很大部分安全问题

       <img src='avatar.png' alt='用户输入数据'/>
       <!-- 用户输入: Feross' onload='alert(document.cookie) -->
       <!-- 结果: -->
       <img src='avatar.png' alt='Feross' onload='alert(document.cookie)'/>

上面例子,如果不做 escape ( ' 转成 &apos;) 处理会有安全问题, 其它特殊字符同理 space,%,*,+,-,/,;,<;=,>,^,|

有兴趣可以看下面的网络安全课,蛮有意思的,上面例子出自 Cross-Site Scripting 一节

2 个赞

噢,估计是这个考虑。可能是钻牛角尖,但是在<meta property="og:title" content="...">这个环境里实际上只有 " 这一个字符必须要转义吧?类似的,在你的例子里,也只有 ' 这一个字符需要转义吧?

转义一般都是能转的都转了的,不会预期到出现 所以只转这个的问题

不转义的话,你甚至可以插入下面类似的结构

/> <script>...</script> <div attribute='

浏览器 HTML parser 首先解析 html tags,然后再生成 DOM 树,

JavaScript 和 CSS parser 运行 <script> <style> 的内容

还有比较不确定一点是,即使 html 语法出错,浏览器依然有可能进行"脑补",容忍一些错误,继续执行。

上面的例子,即使注入的脚本两侧语法出错,浏览器依然有可能把<script>...</script>中的内容执行了