Iconify script causes CSP violations

I’m working on a web app that uses the hosted iconify 1.0.4 script. I recently started sending Content Security Policy headers. This causes the iconify script to fail because it’s attempting to apply an inline style dynamically.

To fix this, Chrome recommends either using the 'unsafe-inline' option, but that opens the door for everything and elsewhere they strongly recommend avoiding it. The other option is to us add a hash for the style. But if you look closely at the screenshot, the hash it recommends is already in my CSP.

Yeah, there’s a bug in Chromium.

According to that bug, the real fix for now is to use 'unsafe-hashes' along with the hashes of the iconify scripts. In my case that ends up being script-src-attr 'unsafe-hashes' 'sha256-QlrbM8aOqzBK0DIi4eTKHWBQeoYW8/V+N7qXwMcKmqo='. That worked to address the errors. I’m still concerned about using 'unsafe-hashes' but it’s way better than 'unsafe-inline'.

This might be worth adding to your documentation.

I haven’t dug into the iconify script enough to understand whether the functionality that violates CSP is essential behavior or if there are workarounds that could be employed. So I thought I’d ask here.

Thanks!

[cyberalien]

It isn’t possible because it would break backwards compatibility. Some users might rely on that stylesheet being injected.

If you really want to get rid of that message, the only option is to build custom version of Iconify. Clone this repository, open src/browser/init.js, remove this code:

    /**
     * Add stylesheet
     *
     * @param timed
     * @returns {boolean}
     */
    local.addStylesheet = function(timed) {
        var el;

        if (!document.head || !document.body) {
            if (local.domready) {
                // head or body is missing, but document is ready? weird
                return true;
            }
            if (!timed) {
                local.initTimeout(local.addStylesheet.bind(null, true));
            }
            return false;
        }

        // Add Iconify stylesheet
        try {
            el = document.createElement('style');
            el.type = 'text/css';
            el.innerHTML = 'span.iconify, i.iconify, iconify-icon { display: inline-block; width: 1em; }';
            if (document.head.firstChild !== null) {
                document.head.insertBefore(el, document.head.firstChild);
            } else {
                document.head.appendChild(el);
            }
        } catch (err) {}

        return true;
    };
    local.initQueue.push(local.addStylesheet.bind(null, false));

then rebuild package. To rebuild it run these commands:

npm install
npm run build

Then you can use iconify.min.js from directory dist

[Juneezee]

@cyberalien Hi, in version 1.0.5, I still get one style-src error about unsafe-inline. Is it possible not to set or inject any style to avoid this error?

EDIT: The error comes from this line in iconify.js

Thanks