Angular translate指令vs filter:XSS可能吗？

Question

我有一个翻译密钥,实际上是一个HTML代码,编码和未编码.

   $scope.translations = {
    "html_code" : "<script>alert('Alert!');</script>",
    "html_code_full" : "<script>alert('Alert!');</script>",
    "greeting" : "Welcome!" 
  }

当我使用这些值来显示视图中的翻译文本时,我使用两种方法:

1. 作为指示 <span translate>{{translations.html_code}}</span>
2. 作为过滤器 {{translations.html_code|translate}}

我尝试相同的translations.html_code_full.这是视图的代码:

translations.html_code = {{translations.html_code|translate}}
translations.html_code = <span translate>{{translations.html_code}}</span>

translations.html_code_full = {{translations.html_code_full|translate}}
translations.html_code_full = <span translate>{{translations.html_code_full}}</span>

这是我得到的输出:

translations.html_code = <script>alert('Alert!');</script> 
translations.html_code = <script>alert('Alert!');</script> 


translations.html_code_full = <script>alert('Alert!');</script> 
translations.html_code_full =

很明显,指令实现是将转换键编码为HTML,但过滤器不是.为什么指令与过滤器实现之间的输出存在差异？如果它呈现HTML,为什么我没有收到警报？

这是我为演示创建的插件.

Answer 1

AngularJS 框架正在保护您的应用程序免受 XSS 攻击。

截至 2007 年，赛门铁克记录的所有安全漏洞中，大约 84% 是由网站上执行的跨站点脚本造成的。

--维基百科 - 跨站脚本

那么你真正想做什么？也许我们可以向您展示如何安全地做到这一点。