3

My understanding is that:

  • SVGs offer far greater functionality if they are directly embedded in a site's HTML code via the <svg> tag than if they are linked to via the <img> tag
    • For example, if the <svg> tag is used, it is possible to dynamically change colors of certain parts of an SVG or even move parts around from JavaScript. Consider this SVG as a possible use case: https://freesvg.org/old-round-clock A site's JS code could rotate the clock's hands to make them show the current time, but only if the clock is embedded with the <svg> tag
  • However, SVGs very frequently have inlined styles. For example, the above clock includes this piece of code:
      <rect
         transform="matrix(0.87719078,0.480142,-0.480142,0.87719078,0,0)"
         ry="1.75"
         y="269.82101"
         x="564.13495"
         height="9.75"
         width="9.75"
         id="rect3049"
         style="fill:url(#radialGradient3051);fill-opacity:1;stroke:none" />

This is precisely what CSP strives to forbid. Therefore, including the above SVG on a CSP protected site breaks this SVG, at least if the SVG is included via the <svg> tag.

There are at least two ways to remedy the problem, unfortunately both are unsatisfactory:

  • Inline styles in SVGs can be exempted from protection in the CSP policy. However, this seems to defeat the point of using CSP. Note that exempting hashes cannot be employed in this case.
    • This would be even more the case if JavaScript in SVGs would have to be exempted as well. And if the above approach was pushed to its logical end then it would make perfect sense to include JS in the clock SVG, for example to let the user manually set time by dragging hands with the mouse pointer.
  • Inline styles can be removed from the SVG and placed in an external stylesheet. Then a the full range of protections offered by CSP could remain enabled.
    • This would be very tedious and would arguably result in code that would be difficult to maintain and follow, since an image would have to be split into multiple files included separately in the website.

Is there any possibility I'm missing? Is it possible to, in a practical way, include SVGs on a webpage with the <svg> tag while still having CSP fully enabled?

1
  • I assume, if you want to have inline styles on your page, then don't block them with CSP? Feb 24, 2023 at 19:37

2 Answers 2

0

With the CSP you have the freedom to allow inline styles or not. The purpose of not allowing inline styles is so that the user can not override the styling in their browser.

But you can use a nonce to protect the inline style from being tampered with. On the other hand, it is only a style, not code. I don't sweat over it much.

You can use a nonce-source to only allow specific inline style blocks:

Content-Security-Policy: style-src 'nonce-2726c7f26c'

You will have to set the same nonce on the element:

<style nonce="2726c7f26c">
 #inline-style {
   background: red;
 }
</style>

You can also use a hash.

Reference developer.mozilla

-1

Inline SVG's (or any other inline resource, in this regard) do not break a Content Security Policy (CSP) in my understanding.

The CSP is about allowing/disallowing loading additional resources coming from either the local host, from a sub/other domain, or from an arbitrary source.

By inlining a resource in your HTML, you assign them your full trust (otherwise you would not inline them).

2
  • 2
    My understanding is that CSP forbids inline resources because it cannot distinguish between trusted resources I have inlined and malicious resources a cracker exploiting a CSP vulnerability has inlined. For this reason CSP breaks all inlined style="..." attributes.
    – gaazkam
    May 30, 2022 at 16:41
  • 1
    @Marcel CSP has the ability to block inline styles Feb 24, 2023 at 19:37

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .