Question

我想知道如何AngularJS防止内嵌<script>的标签从当它们经由ng-include指令包括执行。

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

我已经开始检查源代码，但是我尝试在DOM中自己添加脚本标签（appendChild， ~~innerHTML~~ ，innerText，document.write等）的任何尝试都会导致该问题。被执行。

谢谢。

Answer 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指定插入<script> should not execute.

的innerHTML标签

但是，有一些方法可以在不使用<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如何阻止内联脚本标签执行？

2 个答案: