javascript - 在 <script> block 中转义 JavaScript 字符串文字中的 HTML 实体

Question

一方面，如果我有

<script>
var s = 'Hello </script>';
console.log(s);
</script>

浏览器将终止 <script>提早阻止，基本上我把页面搞砸了。

另一方面，字符串的值可能来自用户(例如，通过先前提交的表单，现在字符串最终作为文字插入到 <script> block 中)，因此您可以期望该字符串中的任何内容，包括恶意形成的标签。现在，如果我在生成页面时使用 htmlentities() 对字符串文字进行转义，则 s 的值将按字面意思包含转义的实体，即 s 将输出

Hello </script>

在这种情况下，这不是我们想要的行为。

在 <script> 中正确转义 JS 字符串的一种方法如果 block 在左尖括号之后，则它正在转义斜线，或者只是总是转义斜线，即

var s = 'Hello <\/script>';

这似乎工作正常。

然后是 HTML 事件处理程序中的 JS 代码问题，它也很容易被破坏，例如

<div onClick="alert('Hello ">')"></div>

一开始看起来有效，但在大多数(或所有？)浏览器中都会中断。这显然需要完整的 HTML 实体编码。

我的问题是:正确涵盖上述所有情况的最佳/标准做法是什么 - 即脚本 block 中的 JS，事件处理程序中的 JS - 如果您的 JS 代码可以部分在服务器端生成并且可能包含恶意数据？

Answer 1

以下字符可能会干扰 HTML 或 Javascript 解析器，应在字符串文字中进行转义:<, >, ", ', \,和 & .

正如您发现的那样，在使用转义字符的脚本 block 中是可行的。串联方法 ( </scr' + 'ipt>' ) 可能难以阅读。

var s = 'Hello <\/script>';

对于 HTML 中的内联 Javascript，您可以使用实体:

<div onClick="alert('Hello &quot;>')">click me</div>

演示:http://jsfiddle.net/ThinkingStiff/67RZH/

同时适用于 <script> 的方法 block 和内联 Javascript 是 \uxxxx , 其中xxxx是十六进制字符编码。

• < - \u003c
• > - \u003e
• " - \u0022
• ' - \u0027
• \ - \u005c
• & - \u0026

演示:http://jsfiddle.net/ThinkingStiff/Vz8n7/

HTML:

<div onClick="alert('Hello \u0022>')">click me</div>

<script>
    var s = 'Hello \u003c/script\u003e';
alert( s );
</script>