Angular插值中脚本疑问：为何未被清理且未执行？

问题1：为何插值语法的值未被Angular清理？ #

首先得明确Angular里插值语法和[innerHtml]绑定的本质区别：

• 插值{{ this.test }}属于文本绑定，它的核心逻辑是把变量值作为纯文本插入DOM，只会做HTML转义（把特殊字符转成实体，比如<转成<），不会对内容做“清理”（比如移除script标签这类操作）。你定义的test变量本身就是已经转义后的字符串<script>alert()</script>，插值时Angular直接把它当成文本输出，浏览器最终把实体解析成<script>alert()</script>的纯文本显示，自然不会触发清理行为。
• 而[innerHtml]是HTML内容绑定，Angular会把它当成要插入的HTML结构处理，所以会启动安全清理机制，自动移除script、style这类具有潜在风险的标签，避免XSS攻击。

问题2：为何脚本没有运行？ #

原因很简单：插值插入的内容是DOM文本节点，不是HTML元素节点。浏览器只会解析执行作为DOM元素存在的<script>标签，对于文本节点里的<script>字符串，只会当成普通文本渲染，根本不会去解析执行其中的脚本逻辑。哪怕你手动把文本转成HTML元素，Angular的安全机制也会在[innerHtml]绑定阶段就把script标签干掉，更别说插值这种纯文本场景了。

内容的提问来源于stack exchange，提问作者Carl