javascript - Angular 翻译指令中的 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>

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

是否有适当的方式将 html 显示为 <script>alert()</script>不执行它？

Answer 1

使用过滤器(管道)，您始终可以绑定(bind)到元素 textContent像这样的属性:

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

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