我很想知道AngularJS如何通过ng-include指令防止内联<script>标签执行。
模板被包含后，DOM被检查，脚本标签确实存在，但它们没有被执行。它们是如何被解除武装的呢？
我已经开始审查源代码，但我尝试将脚本标签自己添加到DOM中（appendChild，innerHTML，innerText，document.write等），结果总是被执行。
谢谢。
AngularJS如何防止内联脚本标签执行？
4
- Jon Freynik
2
2个回答
2
这是 jqLite实现方式的产物。
为了使脚本标签工作，只需确保在加载
如果您能进一步解释，说明 innerHTML 足以防止脚本标记执行，我将选择您的答案作为正确答案。
HTML5 规定使用 innerHTML 插入的
为了使脚本标签工作，只需确保在加载
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>
如果您能进一步解释，说明 innerHTML 足以防止脚本标记执行，我将选择您的答案作为正确答案。
HTML5 规定使用 innerHTML 插入的
- georgeawg
5
感谢@georgeawg的回答 - 但我的问题是jqlite如何防止脚本标签执行？而不是如何让脚本标签执行。 - Jon Freynik
1
jqLite.append 的源代码在 GITHUB jqLite.js Line #972。它附加脚本元素而不执行它们。另一方面，jQuery append 方法识别脚本元素并执行它们。 - georgeawg我看到append函数然后调用appendChild，但它一定不止这样做，因为当我使用它来插入一个脚本元素时，appendChild总是执行该脚本 - AngularJS如何能够使用appendChild而不执行脚本？您能否创建一个在纯JavaScript中工作的示例或fiddle？ - Jon Freynik
如果您解释更多关于innerHTML足以防止脚本标签执行的内容，我将选择您的答案作为正确答案。 - Jon Freynik
我看到您编辑了问题 - 如果在脚本元素本身上使用innerHTML，则会执行代码 - 如果将其用于插入脚本标记和代码，则不会执行代码 - 我想知道是否应该在某个地方明确这种区别 - 无论如何 - 感谢您的工作。 - Jon Freynik
0
看起来ng-include调用了$element.html(ctrl.template); 请参见GitHub上的源代码
然后，jqLite的html函数使用element.innerHTML = value;插入内容。 请参见GitHub上的源代码
经过测试，似乎这就足以不执行<script>标记。
我在这里创建了一个jsFiddle。 - #3相当于AngularJS正在执行的操作，并且不会执行脚本标签。
- Jon Freynik
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
ng-sanitize负责这种行为。https://github.com/angular/angular.js/blob/26a5779cddf70944b7548e3a6410d35237a516e5/src/ngSanitize/sanitize.js - felixmosh