浏览器如何准确解析脚本标签？

Question

我刚刚遇到了一个关于 HTML 解析的病态案例。我一直认为<script> 标签会一直运行到第一个关闭</script> 标签。但事实证明，并非总是如此。

这是有效的：

<script><!--
alert('<script></script>');
--></script>

即使这是有效的：

<script><!--
alert('<script></script>');
</script>

但这不是：

<script><!--
alert('</script>');
--></script>

这也不是：

<script>
alert('<script></script>');
</script>

这种行为在 Firefox 和 Chrome 中是一致的。因此，令人难以置信的是，浏览器似乎接受脚本标签内的 html 注释内的打开+关闭脚本标签。那么问题来了，浏览器really是如何解析脚本标签的呢？ 这很重要，因为我使用的 HTML 解析库 Nokogiri 假定了明显的（但不正确的）直到第一个关闭标记规则并且没有处理这种边缘情况。我想大多数其他库也不会处理它。

Answer 1

在仔细研究了given by Timand Jukka的链接后，我得到了以下答案：

• 在打开<script>标签之后，解析器进入data1状态
• 如果在 data1 状态下遇到<!--，则切换到 data2 状态
• 如果在任何状态下遇到-->，则切换到data1状态
• 如果在 data2 状态下遇到<script[\s/>]，则切换到 data3 状态
• 如果在 data3 状态下遇到</script[\s/>]，则切换到 data2 状态
• 如果在任何其他状态下遇到</script[\s/>]，则停止解析

Answer 2

根据 HTML 4.01 规范，所有示例都是无效的：script 的内容声明为CDATA，CDATA 的description 表示：

“尽管 STYLE 和 SCRIPT 元素使用 CDATA 作为其数据模型，但对于这些元素，用户代理必须以不同方式处理 CDATA。标记和实体必须被视为原始文本并按原样传递给应用程序。字符序列“</”（结束标记打开分隔符）的第一次出现被视为终止元素内容的结尾。在有效文档中，这将是元素的结束标记。”

正如您所观察到的，在某些情况下，浏览器可能不会强制执行此规则，而是识别成对的开始和结束标记。从规范的角度来看，这是对无效文档的处理，即错误处理。目前尚不清楚他们到底在做什么以及为什么。这似乎取决于<!-- 的存在，这对HTML 4.01 解析应该没有任何影响（它不是CDATA 内容中的评论开启器）。

在 XHTML 中，应用部分不同的规则，因为在 XHTML 中，<!-- 在 script 元素的内容中打开注释。

顺便说一句，由于script 中缺少type 属性，所有示例都是无效的HTML 4.01 和无效的XHTML。该属性不是必需的（浏览器默认将内容视为 JavaScript），但这些规范要求它。

在 HTML5 中，其他规则适用。它们相当复杂，它们应该描述浏览器的行为。除了强加restrictions on content（禁止例如<!--而不匹配-->），HTML5还指定parsing rules。

Answer 3

标签的内容仍然是 HTML，除非您将其标记为不是 HTML。在 HTML 中，<word> 被认为是一个标签，< 需要写成< 以避免这种行为。或者，您想让<script> 的内容成为文本节点；使用这个公式：

<script type="text/javascript">
//<![CDATA[
  // your code, with < and & and "", woohoo!
//]]>
</script>

<![CDATA[ ... ]]> 将文档的一部分描述为纯文本，没有标记。斜线是为了让 JavaScript 不会混淆；第一组斜线在 CDATA 之外，但它们是 HTML 安全的，所以没有问题。

编辑：刚刚意识到问题是关于解析，而不是编写 HTML。哎呀。

Answer 4

假设，如果先解析标签，然后再解析 cmets，则 HTML 解析器会为您提供这些结果。

^{（我并不是说一定是这样，只是一种可能的解释。）}

第一种情况

<script><!--
alert('<script></script>');
--></script>

在另一个<script></script> 中有一组<script></script>。解析器可能会首先忽略标签的名称，只检查这些标签的正确打开和关闭。然后解析 cmets。

<script><!--
--></script>

所以这是有效的。

第二种情况

<script><!--
alert('<script></script>');
</script>

在另一个<script></script> 中有一组<script></script>。然后解析 cmets。

<script><!--

注释一直延伸到文档的末尾。这不是严格有效的，但浏览器会正确处理它。

第三种情况

<script><!--
alert('</script>');
--></script>

<script></script> 集合中有一个结束标记。在将 </script> 解析为 cmets 之前，它已失效。

第四种情况

<script>
alert('<script></script>');
</script>

在另一个<script></script> 中有一组<script></script>，并且没有cmets。第一遍是有效的，但它会真正查看标签以查看它们是什么。它可能不接受另一个标签中的一对<script>标签，因此它会使案例无效。