Add SVG support to HTML sanitizer

[sumigoma]

• I'm submitting a ...

[X] feature request

Current behavior
SVGs are always rejected by HTML sanitizer

Expected/desired behavior
Sanitize SVG markup

• What is the motivation / use case for changing the behavior?
  RC2 introduced HTML sanitization but it currently does not support SVG sanitization and all SVG elements are rejected. Our app makes heavy use of SVG injection.
• Angular version: 2.0.0-rc.2

[vicb]

Could you give an example of what is rejected ?

[sumigoma]

Here is a plunkr with a simple SVG getting rejected by the sanitizer.
http://plnkr.co/edit/qzZEGIzFgvYANIHquuEt?p=preview

A simple also seems to get stripped.
Where can we find the whitelist of allowed tokens?

[vicb]

It is not related to SVG but to setting innerHtml which is the expected behavior.
You have to explicitly indicate that the HTML is safe (ie not injected by a user).

I don't think the security doc is ready yet but it should be in the next few days.

/cc @mprobst

[IgorMinar]

you can use svg within template but you can't inline svg into a template via binding just like you can't inline html into the template in this way except innerHtml. In the case of innerHtml, by default we sanitize the value and not allow any svg because svg is tricky to sanitize.

I suggest that you either convert your strings to Angular templates:

http://plnkr.co/edit/RQDrg6isqnvfjSTwpEqp?p=preview

or sanitize the svg yourself and bypass security via bypassSecurityTrustHtml.

[sumigoma]

Thanks @IgorMinar.

Does this mean there will never be native support for SVG sanitization in the framework? It seems ng1's $sanitize provided some support for SVGs ("The input may also contain SVG markup if this is enabled via $sanitizeProvider.")

Can we expose the ability to override/manage whitelisted tokens through extending the class and something like provide(..,{useValue: }) in bootstrap?

EDIT: converting strings to angular templates is not an option since we need them to be more dynamic. We could sanitize the svg markup ourselves but it would be nice to leverage the machinery already in the framework.

[junjunruan]

Hi @IgorMinar

Instead of using inline html to add svg, I use the following code:

<object type="image/svg+xml" data="kiwi.svg" class="logo">
  Kiwi Logo
</object>

I didn't get warnings any more, does it mean secure to render svg in this way?

And another question is: how can I access so that I can add css style to it?

Thanks,

[mprobst]

@junjunruan yes. In this form, the SVG is rendered in its own browser context (like an <iframe>) and cannot interfere with the page in insecure ways. You should also be able to just use <img src=kiwi.svg alt="Kiwi Logo"> for the same effect with less markup.

[junjunruan]

Thanks @mprobst. It works. However, when I inspect the element, it didn't show the svg tag. Do you know how can I access Dom element and change svg colors?

[skreborn]

@junjunruan You can't. You can only access an SVG's internals if it's embedded as an <svg> element. When using <img>, you are stuck with the SVG as it is.

[junjunruan]

Thanks @skreborn. What do you think of the good way to dynamically change the style of svg in Angular2?

I tried to use svg inside , but there are two issues:

• I can't get the or inside ngAfterViewInit(), I have to query the dom element inside each mouse events, which I think it's overhead.
• I can't use element.cssList.add('classname') or whatever way to dynamically add css class to change style to svg.

Here is the plunker I built: http://plnkr.co/edit/uWkfGxA5kbo9r3NaFJCa?p=preview

[skreborn]

@junjunruan You can use ViewChild to get a hold of an element. See the updated plunker here. There is sadly no way to change the style with CSS when the SVG is not inlined.