Angular 翻译指令中的 XSS答案

【问题标题】：XSS in Angular Translate DirectiveAngular 翻译指令中的 XSS
【发布时间】：2017-01-07 13:56:03
【问题描述】：

在我的项目中，我使用“escape”作为清理价值策略。我在某个地方使用了翻译指令（属性）。我正在使用翻译过滤器的其他一些地方。

有指令：

<span translate="{{vm.text}}"><span>

这很容易受到 XSS 攻击。如果 vm.text 的值为 &lt;script&gt;alert()&lt;/script&gt; ，则执行脚本并显示弹出窗口。

带过滤器：

<span>{{vm.text | translate}}<span>

vm.text的值被转义，html显示为&lt;script&gt;alert()&lt;/script&gt;

在角度翻译文档 (https://angular-translate.github.io/docs/#/guide/19_security) 中，他们建议使用“转义”作为清理值策略，说“当前清理模式存在问题，它将双重编码 UTF-8 字符或特殊字符。建议：使用“逃避”策略，直到解决此问题'。

是否有正确的方法将 html 显示为 &lt;script&gt;alert()&lt;/script&gt; 而无需执行它？

【问题讨论】：

我发现在使用过滤器时它会正确转义但不会逃脱这种攻击：#/{{{}.")));alert(1)//";}} 使用该指令将正确逃避这种攻击，但随后它在您说明的脚本攻击中失败。所以对我来说，这是翻译库中的一个大漏洞。

标签： javascript angularjs xss angular-translate

【解决方案1】：

使用过滤器（管道），您始终可以像这样绑定到元素 textContent 属性：

<span [textContent]="vm.text | translate"></span>

不需要手动转义或过滤，因为 textContent 中的任何内容都不会被解析。

【讨论】：

这是什么版本的角度？