如何正确地在<script>标签中转义内联Javascript？

Question

我正在为一个框架编写服务器端函数，以便让我内联一个Javascript文件。它以文件名作为输入，并且其输出将像这样：

<script>
   /* contents of Javascript file */
</script>

如何安全地转义Javascript文件的内容？

如果文件包含类似于</script>的内容，我会特别担心。如果输入的Javascript文件有语法错误，我仍然希望它能正确转义。我也意识到XHTML期望某些实体被编码，而HTML则不需要。

有很多类似于如何转义字符串文字或JSON的问题。但我想要能够处理一般情况的东西，以便我可以为一般情况编写工具。

_{（我意识到内联可能不受信任的Javascript并不是最好的想法，所以不需要花时间讨论这个问题。）}

- Flimm

---

您可以随时使用数据URI：<script src="data:application/javascript,..."</script> - polkovnikov.ph

Answer 1

这是一个正在进行中的工作，如果我错过了任何一种情况，请让我知道！

答案取决于您使用的是XHTML还是HTML。

1. 使用Content-Type：application/xhtml+xml头的XHTML

在这种情况下，您可以简单地XML转义任何实体，将此文件转换为：

console.log("Example Javascript file");
console.log(1</script>2/);
console.log("That previous line prints false");

转化为：

<script>
console.log(&quot;Example Javascript file&quot;);
console.log(1&lt;/script&gt;2/);
console.log(&quot;That previous line prints false&quot;);
</script>

请注意，如果您使用的是带有不同Content-Type头的XHTML，则不同的浏览器可能会表现不同，我没有进行研究，因此建议修复Content-Type头。

2. HTML

不幸的是，在这种情况下，我不知道任何适当的转义方法（至少不需要解析Javascript）。将所有/实例替换为\/将导致某些Javascript出现问题，包括前面的示例。

我能推荐的最好方法是，您可以不区分大小写地搜索</script并在找到它时抛出异常。如果您只处理字符串文字或JSON，请使用\/替换所有/实例。

一些Javascript缩小程序可能会以安全的方式处理</script，如果您找到了，请告诉我。

- Flimm

---

只要知道被转义的是脚本元素的主体，那么根据HTML5解析算法，我认为在下一个字符是U+0009 CHARACTER TABULATION（制表符）、U+000A LINE FEED（换行符）、U+000C FORM FEED（换页符）、U+0020 SPACE（空格）、U+002F SOLIDUS（斜杠）或U+003E GREATER-THAN SIGN（大于号）时，用<\/script代替</script（包括所有大写变体）就可以处理HTML情况。 - Alohci

你在XHTML中不需要转义引号；只需要转义&和<就可以了。前提条件是你确定文档具有XML文件类型。 - Mr Lister

@Alohci：但是用<\/script替换它会导致可能之前不存在的Javascript语法错误。我承认Javascript 1</script>/有点牵强，但它是有效的Javascript代码，我想找到一种永远不会破坏Javascript的方法，只是为了满足我的好奇心。 - Flimm

啊，我现在明白你的意思了。谢谢。 - Alohci

HTML使用</script>闭合标签也可以吧？ - polkovnikov.ph

@polkovnikov.ph 我在 Firefox 上尝试了一下，但 Firefox 不解析 </script>。你能找到一个可以解析的浏览器吗？ - Flimm