CODEWITHSUNDEEP
javascriptangularsvg
user2061057
user2061057

Reputation: 1022

How do I inject an SVG image in Angular 2?

I receive an SVG image from my back-end and I need to inject it into a container:

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

However, it seems that all <svg> elements are removed and my container remains empty:

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

I tested with something simple like <p></p> and it worked. How should I do this?

Upvotes: 0

Views: 1086

Answers (1)

Тодор Иванов
Тодор Иванов

Reputation: 367

Taken from Angular 2 documentation:

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.

Check out more here: https://angular.io/docs/ts/latest/guide/security.html

Upvotes: 1

Related Questions