angularjs 如何阻止内联脚本标签的执行？

Question

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

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

我已经开始审查源代码，但我自己尝试将脚本标记包含到 DOM 中（appendChild、~~innerHTML~~、innerText、document.write, 等) 总是导致它被执行。

谢谢。

Answer 1

这是 jqLite 实施方式的产物。

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

  <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.

if you explain more that innerHTML is enough to prevent the script tags from executing I will select your answer as correct

HTML5 指定 <script> 标签插入 innerHTML should not execute.

但是，有一些方法可以在不使用 <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。

Answer 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 正在做的事情，它不执行脚本标签。

angularjs 如何阻止内联脚本标签的执行？

How does angularjs prevent inline script tags from executing?

javascript

script-tag

angularjs