有没有办法逃脱HTML字符串然后在Angular中应用html标记？

Question

我在Angular中有一个搜索表单，它从包含字符串数组的数据库中接收一个对象。我使用管道将<mark></mark>的查询包围到结果字符串，这将突出显示结果中的搜索查询，非常方便。到现在为止还挺好。

我现在正在尝试返回并突出显示包含html标记的html-type字符串的结果。困难来了。

简单地显示结果数组将失败，因为Angular会自动清理HTML。

WARNING: sanitizing HTML stripped some content, see 
http://g.co/ng/security#xss

所以我在这里使用Angular安全管道实施来绕过卫生设施：https://medium.com/@swarnakishore/angular-safe-pipe-implementation-to-bypass-domsanitizer-stripping-out-content-c1bf0f1cc36b

return this.sanitizer.bypassSecurityTrustHtml(value);

此时，HTML标记将在结果中呈现，这是不好的。所以我构建了一个Escape HTML管道将html转换为char代码......

return value.toString().replace(new RegExp('/</g'), '&lt;').replace(new 
RegExp('/>/g'), '&gt;');

绑定到component.html

{{result.value | safe: 'html' | escapehtml | highlight: 
this.search.get('query').value }}

现在我的转义html将显示在结果中，但突出显示管道将被转义，同时显示<mark>query</mark>而不是突出显示查询的文本。

这里是否有任何方法在Angular中获取我正在寻找的东西（带有html标记的转义HTML字符串），或者我是否必须放弃我的高亮管道并在escapedHTML之后显示sanitization？

Answer 1

您提出的几乎所有内容都将引入允许xxs注入的安全漏洞。最好的办法是将你的字符串分成3个部分，开始，突出显示并结束并渲染它

{{start}}<mark>{{highlight}}</mark>{{end}}