如何angularjs防止内嵌脚本标签从执行?

问题描述 投票:4回答:2

我想知道如何AngularJS防止直列<script>标签从当他们通过ng-include指令包括执行。

模板包括和DOM进行检查后,脚本标记肯定存在,但他们并没有被执行。他们是如何被缴械?

我已经开始审查源代码,但任何企图我已经包括脚本标签到DOM自己(的appendChild, 的innerHTML ,的innerText,文件撰写等)总是导致它正在执行。

谢谢。

javascript angularjs script-tag
2个回答
2
投票

这是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


如果你解释更多的innerHTML的是足以防止脚本标签从执行我会选择你的答案是正确的

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


0
投票

它看起来像NG-包括电话$element.html(ctrl.template); See source on GitHub

jqLit​​e的HTML功能,然后使用element.innerHTML = value;插入内容。 See source on GitHub

而经过测试 - 这看起来是够不执行<script>标签。

我创建了一个jsFiddle here. - #3是什么AngularJS是做等同,并没有执行该脚本标签。

© www.soinside.com 2019 - 2024. All rights reserved.