角度翻译指令中的XSS

Question

在我的项目中,我使用' escape '作为消毒价值策略.我在某些地方使用翻译指令(属性).其他一些地方我正在使用翻译过滤器.

随着指令:

<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)中,他们建议使用'escape'作为清理值策略,说' 目前清理模式存在问题,它将双重编码UTF-8字符或特殊字符.建议:使用'逃避'策略,直到解决 '.

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

Answer 1

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

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

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