Failed to find a valid digest in the 'integrity' attribute

[EvgenyOrekhov]

Steps to reproduce:

1. Go to https://evgenyorekhov.github.io/holiday.css/src/index.html
2. Click on the Drop-in bookmarklet
3. Select a different CSS framework from the Drop-in switcher

Expected result: selected framework's styles should be applied to the page

Actual result: styles are not applied, there is the following error in the browser console

Failed to find a valid digest in the 'integrity' attribute for resource
'https://dohliam.github.io/dropin-minimal-css/min/awsm.min.css'
with computed SHA-256 integrity
'giTWrXju6B1GUPSb1nHYBfCZzd73kLweWPjVOBzNxAA='.
The resource has been blocked.

[dohliam]

@EvgenyOrekhov It looks like this error is caused by the integrity check in the CSS link to normalize.min.css on that page:

<link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/0.6.0/modern-normalize.min.css"
            integrity="sha256-a9JO7L1jGkja9va1xGMWEJspCfU/b9Vn5u/O5MdnKhw="
            crossorigin="anonymous"
        />

As far as I understand, this basically checks that the loaded minified Normalize CSS file has not been changed. However, the bookmarklet does change the CSS (it replaces it), so the integrity test fails.

There are probably a few ways to fix this -- you could of course remove the integrity check or (if that's not possible), move the call to Normalize CSS down in the list of linked stylesheets (the switcher just tries to replace the first linked stylesheet).

Hope that helps!

[EvgenyOrekhov]

If the switcher was inserting a new <link> element instead of replacing an existing one, I think it would solve the issue. What do you think?

It's just more and more websites are starting to use integrity checks.

[dohliam]

Yes, it did do something like that at first, but I quickly discovered that this leads to unexpected results because it effectively layers the new stylesheet on top of the old one (often this results in no effect at all, actually -- particularly if the first stylesheet has lots of !important statements). So this is an imperfect solution but it does work most of the time.

[EvgenyOrekhov]

So what is the switcher trying to emulate? I mean, if it tries to emulate how the page would look if you included one of the themes along with your existing styles, then the switcher should not mess with existing styles at all. If the switcher is supposed to emulate how the page would look if you included only one of the themes, then the switcher should remove all existing styles first. The way it works now, is a mix of both. That is unexpected.

[dohliam]

Yes, it might be a good idea to try recursively removing all styles before adding the switcher. This might break a lot of pages though, so it would probably need a lot of testing on various sites and with all the different stylesheets. On the other hand, it might allow some pages to work with the switcher that currently don't (like Github itself).

[lemmi]

I ran in a similar issue. Removing the integrity attribute with css_link.integrity="" the styles are loaded correctly. I also tried delete css_link.integrity and css_link.integrity=undefined, but those didn't seem to work.