角度翻译指令中的XSS

Question

在我的项目中，我使用＆＃39; 逃避＆＃39;作为消毒价值战略。我在某个地方使用了translate指令（属性）。我使用翻译过滤器的其他一些地方。

使用指令：

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

这对XSS来说是可以理解的。如果vm.text的值为<script>alert()</script>，则执行脚本并显示弹出窗口。

使用过滤器：

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

vm.text的值已转义且html显示为<script>alert()</script>

在角度翻译文档（https://angular-translate.github.io/docs/#/guide/19_security）中，他们建议使用＆＃39; escape＆＃39;作为消毒价值策略说＆＃39; 目前，消毒模式存在问题，它将对UTF-8字符或特殊字符进行双重编码。建议：使用＆＃39; escape＆＃39;策略，直到解决此问题 ＆＃39;。

有没有正确的方法将html显示为<script>alert()</script>而不执行它？

Answer 1

使用过滤器（管道），您始终可以绑定到元素textContent属性，如下所示：

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

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