如何在Angular 2中注入SVG图像？

Question

我从后端收到SVG图像，需要将其注入到容器中：

<div class="svg-container" [innerHTML]="svgData"></div>

但是，似乎所有<svg>元素都已删除，我的容器仍然为空：

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

我用<p></p>这样的简单东西进行了测试，并且可以正常工作。 我应该怎么做？

Answer 1

取自Angular 2文档：

信任安全价值观

有时，应用程序确实需要包括可执行代码，显示某些URL或构造潜在危险的URL。 为了防止在任何情况下进行自动清理，您可以告诉Angular您检查了一个值，检查了它的产生方式，并确保它始终是安全的。 不过要小心。 如果您信任可能是恶意的值，那么您正在向应用程序中引入一个安全漏洞。 如有疑问，请找专业的安全审查员。

要将值标记为受信任，请注入DomSanitizer并调用以下方法之一：

> bypassSecurityTrustHtml 
> bypassSecurityTrustScript
> bypassSecurityTrustStyle 
> bypassSecurityTrustUrl
> bypassSecurityTrustResourceUrl 

请记住，值是否安全取决于上下文，因此请为值的预期用途选择正确的上下文。

在此处查看更多信息： https : //angular.io/docs/ts/latest/guide/security.html