What is the correct way for Safari to permit an inline style for an element inside an embessed SVG file ?
Imagine somewhere inside an XHTML page there happens to live some SVG like:
<svg:svg viewBox="0 0 1200 520">
<svg:linearGradient id="a" x1="34.4659" x2="1157.9744" y1="285.1803" y2="285.1803" gradientUnits="userSpaceOnUse">
<svg:stop offset="0" style="stop-color:#223567"/>
<svg:stop offset=".5627" style="stop-color:#a0daf2"/>
<svg:stop offset="1" style="stop-color:#d3e6a6"/>
</svg:linearGradient>
</svg:svg>
Embedding the SVG vs. using an external file comes with the advantages of customization (i.e. localization) and inheritable CSS styles (such as web fonts) -- all without the need to write an external SVG generator.
However, each inline style-attribute above triggers an error with your Content Security Policy's style-src, unless you expressively allow for 'unsafe-inline' styles - or get rid of the entire policy, of course.
For the matter, there normally exists this tool called "nonces", by which you can authorize particular inline style blocks, such as
<style type="text/css" nonce="asdfghjklqwertzuiopyxcvbnm">
#myCoolStyle...
</style>
where the nonce's value needs to match one communicated via the HTTP CSP header.
But how can I do the same thing von an embeded SVG ?
Using the nonce with the SVG root like
<svg:svg viewBox="0 0 1200 520" nonce="asdfghjklqwertzuiopyxcvbnm">
<svg:linearGradient id="a" x1="34.4659" x2="1157.9744" y1="285.1803" y2="285.1803" gradientUnits="userSpaceOnUse">
<svg:stop offset="0" style="stop-color:#223567"/>
<svg:stop offset=".5627" style="stop-color:#a0daf2"/>
<svg:stop offset="1" style="stop-color:#d3e6a6"/>
</svg:linearGradient>
</svg:svg>
does not appear to work, neither does
<svg:svg viewBox="0 0 1200 520">
<svg:linearGradient id="a" x1="34.4659" x2="1157.9744" y1="285.1803" y2="285.1803" gradientUnits="userSpaceOnUse">
<svg:stop offset="0" nonce="asdfghjklqwertzuiopyxcvbnm" style="stop-color:#223567"/>
<svg:stop offset=".5627" nonce="asdfghjklqwertzuiopyxcvbnm" style="stop-color:#a0daf2"/>
<svg:stop offset="1" nonce="asdfghjklqwertzuiopyxcvbnm" style="stop-color:#d3e6a6"/>
</svg:linearGradient>
</svg:svg>
which produces the same errors.
And while browser vendors appear to agree that any version without nonces is considered illegal, there unfortunately exists no documentation on how to do it correctly.
So, if anybody here has advanced knowledge of this, I shall be more than glad to hear from you !!
Thanks in advance.
Bardo
Alright.
As of now, one obviously can’t do it using one of the described approaches.
The successful workaround, lay in re-creating the SVG image with the styles grouped into a separate <style />-element (manually optimizing the CSS classes generated by the graphics software…), and THEN signing free this single <style />-element with its own nonce.