javascript - javascript 字符串中带有 HTML 注释的奇怪行为

Question

我有以下 HTML 代码:

<script>
function x(){
    	test1 = '<script><!--';
    	test2 = '<script>';
    }
    alert(1);
</script>
<script>
alert(2);
</script>

预期的输出是弹出两个警报:alert(1)和 alert(2) , 然而，它似乎是 <!-- comment 导致浏览器实际注释掉结束 </script>没有意义的标签!当我运行 document.getElementsByTagName("script")[0].text在控制台中我得到:

function x(){
        test1 = '<script><!--';
        test2 = '<script>';
    }
    alert(1);
</script>
<script>
alert(2);
</script>

对于这种奇怪的行为有解释吗？

谢谢!

Answer 1

从历史上看(20 多年前)，程序员可以将他们的脚本代码包装在 HTML 注释标记、脚本元素内，以防止不支持脚本标记的浏览器在页面中显示脚本文本 body 。您仍然可以将忽略的 HTML 注释标记放在脚本上下文中的脚本周围:

<script>
    <!--
    alert(" inside HTML comment tags")
    -->
</script>

HTML 解析器还负责查找脚本结束标记 </script> ，因此它可以将 HTML 元素的文本内容传递给 Javascript 引擎进行语言解析。出于这个原因，您不能在不结束脚本 block 的情况下将未转义的“</script>”放入 javascript 内容(在字符串或注释中)——HTML 解析器首先查看文本。

HTML living standard列出一些关于如何避免问题的建议:

The easiest and safest way to avoid the rather strange restrictions described in this section is to always escape an ASCII case-insensitive match for "<!--" as "<\!--", "<script" as "<\script", and "</script" as "<\/script" when these sequences appear in literals in scripts (e.g. in strings, regular expressions, or comments), and to avoid writing code that uses such constructs in expressions. Doing so avoids the pitfalls that the restrictions in this section are prone to triggering: namely, that, for historical reasons, parsing of script blocks in HTML is a strange and exotic practice that acts unintuitively in the face of these sequences.

实际上，我发现开始标记在 JavaScript 中是可以接受的，因为 HTML 解析器正在寻找结束脚本标记，但如果它不能在所有浏览器中工作，我没有理由提示。

因此推荐的解决方案是在 JavaScript 代码中使用反斜杠转义 HTML 注释分隔符。更有趣的是，如果您在评论中关闭 HTML 评论，它也可以工作——代码按照编写的方式工作:

<script>
function x(){
        test1 = '<script><!--'; // --> close HTML comment
        test2 = '<script>';
    }
    alert(1);
</script>

然而，这符合我对陷入困境的定义，我建议按照标准中的建议转义注释分隔符。

---

TLDR；

<script>上个世纪，标签被引入到没有标签的 HTML 环境中(HTML2？)，使用了两种技巧:

1. Web 作者被建议使用 HTML 注释定界符开始和结束脚本元素，也许还有 SGML cdata 部分声明，导致内联脚本标签如下所示:

   <script type="text/javascript">
   <!-- <![CDATA[
       //script content here
   // ]]> -->
   </script>
   

   这导致 HTML 解析器不知道脚本元素处理未知的文本内容 <script>标记为评论而不在页面内容中呈现。

   这也意味着，在跳过寻找注释结束字符 (-->) 的 HTML 注释文本时，HTML 解析器会愉快地跳过结束脚本标记，否则这些标记将结束它知道的开始 SCRIPT 标记。

   随着时间的推移和 HTML 标准的发展，网络作者不再包括 CDATA 内容声明、HTML 评论声明，最终导致今天使用的 HTML5 JavaScript 标签集的类型属性:

   <script>
       // script content here
   </sript>
   

   但是，为了不破坏网络，底层黑客从未消失。

2. 知道 SCRIPT 标签的 HTML 解析器将标签的全部文本内容提供给 JavaScript 引擎 - 但仍会跳过未关闭的 HTML 注释中的结束脚本标签。 JavaScript 引擎也被黑客攻击，以有效地将 HTML 注释打开和分隔空白中的标记视为空白的一部分。 据我所知，这从未在任何地方记录过。您只能通过将脚本包含在外部脚本文件中的 HTML 注释标记内来推断黑客入侵，并注意到 Mozilla Firefox(改编自 Netscape Corporation 的代码库)不受影响。

发布的脚本在行设置 temp1 中启动了 HTML 解析器识别的 HTML 注释.然后 HTML 解析器尝试找到 HTML 注释的结尾(缺少)并认为脚本标记无效，因为它没有可检测的结束标记。如果文档的其余部分不包含 -->它也是 HTML 注释的一部分，脚本后面的任何正文内容也不会呈现。