angularjs如何防止内联脚本标签执行？答案

【问题标题】：How does angularjs prevent inline script tags from executing?angularjs如何防止内联脚本标签执行？
【发布时间】：2019-06-27 00:45:18
【问题描述】：

我很想知道当通过ng-include 指令包含内联<script> 标签时，AngularJS 如何阻止它们执行。

在包含模板并检查 DOM 后，脚本标签肯定存在，但尚未执行。他们是如何被解除武装的？

我已经开始查看源代码，但是我自己尝试在 DOM 中包含一个脚本标记（appendChild、~~innerHTML~~、innerText、document.write 等）总是会导致它正在执行中。

谢谢。

【问题讨论】：

可能ng-sanitize 是负责该行为的人github.com/angular/angular.js/blob/…
@charlietfl - 正如我提到的，脚本标签肯定仍在 dom 中 - 它们甚至有一个附加的 ng-scope - 看起来没有任何东西被删除

标签： javascript angularjs script-tag

【解决方案1】：

这是jqLite 实现方式的产物。

要使脚本标签起作用，只需确保在 angular.js 文件之前加载 jQuery 库。

  <head>
    <script src="//unpkg.com/jquery"></script>
    <script src="//unpkg.com/angular/angular.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

DEMO on PLNKR。

如果您进一步解释 innerHTML 足以阻止脚本标签执行，我将选择您的答案为正确

HTML5 指定使用innerHTML should not execute. 插入<script> 标记

但是，有一些方法可以在不使用 <script> 元素的情况下执行 JavaScript，因此当您使用 innerHTML 设置您无法控制的字符串时，仍然存在安全风险。例如：

const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert

因此，建议您在插入纯文本时不要使用innerHTML；相反，请使用Node.textContent。这不会将传递的内容解析为 HTML，而是将其作为原始文本插入。

有关详细信息，请参阅MDN Web API Reference - Element.innerHTML。

【讨论】：

感谢@georgeawg 的回答 - 但我的问题是 jqlite 如何阻止脚本标签执行？不是如何让脚本标签执行。
jqLite.append 的来源是GITHUB jqLite.js Line #972。它附加脚本元素而不执行它们。另一方面，jQuery append 方法识别脚本元素并执行它们。
我看到append函数然后调用appendChild，但它必须做的不止于此，因为当我使用appendChild插入脚本元素时，它总是执行脚本 - angularjs如何能够在不执行的情况下使用appendChild剧本？你能创建一个有效的例子或用普通的 JavaScript 摆弄吗？
如果你解释更多innerHTML足以阻止脚本标签执行，我会选择你的答案是正确的
我看到你编辑了这个问题 - 如果在脚本元素本身上使用 innerHTML 将执行代码 - 如果它用于将脚本标签和代码一起插入，它将不会执行代码 - 我想知道是否应该在某个地方做出这种区分 - 无论哪种方式 - 感谢您的工作

【解决方案2】：

看起来像 ng-include 调用 $element.html(ctrl.template); See source on GitHub

然后jqLite的html函数使用element.innerHTML = value;插入内容。 See source on GitHub

经过测试 - 看起来这足以不执行 <script> 标记。

我创建了一个jsFiddle here. - #3 相当于 AngularJS 正在做的事情，它不执行脚本标签。

【讨论】：