Support CSP for Symbol Loader.

[GCheung55]

🍩 Feature Request

Is your feature request related to a problem? Please describe.

Applications with a content security policy that does not include "unsafe-inline" prevent SVG Jar's inline Symbol loader script from executing.

Describe the solution you'd like

A way to include an SHA hash of SVG Jar's inline Symbol loader in CSP directives, working with ember-cli-content-security-policy.

Describe alternatives you've considered

Include a nonce on the script tag of the inline Symbol loader. This approach wouldn't work because a nonce would need to be unique - generated for each page load.

Manually generating an SHA hash of the inline Symbol loader and pasting it into the CSP directives. The issue is that changes to the inline Symbol loader would invalidate the manually generated SHA hash.

[GCheung55]

Another solution would be to change the inline loader script to a JS file that inserts the SVG.

Below's example demonstrates:

• Loading a deferred JS file, which is similar to the current inline Symbol loader's behavior.
• Setting the SVG into the div and inserting into the body in the JS file.

This would be an alternative to having an SHA hash of the inline Symbol Loader in the CSP directives, which would work with a self or domain rule.

assets/svg-symbols-loader.js

(function() {
    var div = document.createElement('div');
    div.innerHTML = '{{SYMBOLS}}';
    document.body.insertBefore(div, document.body.childNodes[0]);
})();

index.html

<script src="{{rootURL}}/assets/assets/svg-symbols-loader.js" defer></script>

Note: it would be nice to minify the JS.