javascript - 如何在 Angular 2 中注入(inject) SVG 图像？

Question

我从后端收到一个 SVG 图像，我需要将其注入(inject)容器中:

<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 文档:

Trusting safe values

Sometimes applications genuinely need to include executable code, display an from some URL, or construct potentially dangerous URLs. To prevent automatic sanitization in any of these situations, you can tell Angular that you inspected a value, checked how it was generated, and made sure it will always be secure. But be careful. If you trust a value that might be malicious, you are introducing a security vulnerability into your application. If in doubt, find a professional security reviewer.

To mark a value as trusted, inject DomSanitizer and call one of the following methods:

> bypassSecurityTrustHtml 
> bypassSecurityTrustScript
> bypassSecurityTrustStyle 
> bypassSecurityTrustUrl
> bypassSecurityTrustResourceUrl 

Remember, whether a value is safe depends on context, so choose the right context for your intended use of the value.

在这里查看更多内容: https://angular.io/docs/ts/latest/guide/security.html