Angular 表达式的安全性

Question

我正在研究 PhoneCat tutorial for AngularJS. Everything is explained really well, so i was following along until i hit step 6，其中 link 是从 angular 表达式动态生成的：

http://localhost:8000/app/{{phone.imageUrl}}

虽然教程指出 ngSrc 阻止浏览器向无效位置发出 http 请求（编辑：显然教程意味着浏览器只会在表达式求值后调用 link。请参阅所提供的 link 中的 "Experiments" 部分），我现在想知道 angular 表达式通常有多安全。由于 phone.imageUrl 是从外部加载的，理论上它可能包含恶意内容，我想了解为什么这对我的 webapp 无关紧要。

显然表达式的内容以某种方式被转义，因此在您的代码中包含以下内容只会打印出一些文本：

<img ng-src="{{""><script>alert('UNSAFE!')</script>"}}">

但我想知道您是否需要注意一些 "rules" 以确保您的网络应用程序安全。例如通过

编译上面的代码

var template = "<img ng-src="{{""><script>alert('UNSAFE!')</script>"}}">";
var something = $compile(template);

加载 DOM 时执行脚本的结果？当您无法确保 angular 表达式包含预期内容时，您是否不应该在您的 webapp 中执行 "things"？

Answer 1

据我所知，angular 总是转义任何绑定到元素的数据，除非您告诉它不要这样做。

另一方面，您的示例的工作方式不同——也许您有点不确定 angular 的工作方式：

var template = "<img ng-src="{{userInput}}">";
var something = $compile(template)({userInput: "\"><script>alert('UNSAFE!')</script>\""});

所以您完全控制的模板首先被编译，然后表达式绑定到它完全转义（不允许html）。

我可能不会编译外部代码 ($compile(userinput)) 而不先对其进行清理——但这意味着您可能做错了什么。如果您以正确的方式编码，您将仅在某些边缘情况下使用 $compile。否则你可能会保持冷静，因为 angular 会处理不安全的输入。

如果您需要将 html 绑定到模板，那么您可以包含 ngSanitize. Otherwise angular won't let you bind unsafe html, unless you tell the $sce service 以信任它。

总之，我不会担心将不受信任来源的数据绑定到我的模板。

Angular 表达式的安全性

Security of Angular expressions

html

javascript

security

expression

angularjs