时间戳

首页 > 解决方案 > angularjs如何防止内联脚本标签执行？

javascript - angularjs如何防止内联脚本标签执行？

问题描述

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

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

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

谢谢你。

标签： javascriptangularjsscript-tag

解决方案

这是jqLit​​e实现方式的产物。

要使脚本标签起作用，只需确保在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>

PLNKR 上的演示。

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

HTML5 指定不应执行<script>插入的标记。innerHTML

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

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

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

有关更多信息，请参阅MDN Web API 参考 - Element.innerHTML。

推荐阅读