Suddenly stopped working when update to latest version

[Gigoince]

Bug Report

Bug Description

using stylus in firefox (latest addon version 2nd november) suddenly stopped working with Mastodon styles I created.

Screenshots

CSS Code

System Information

Tested : 

• Firefox Dev Edition, nightly and stable

• https://userstyles.world/style/12585

• https://userstyles.world/style/12827/canta-dark-for-mastodon

• Instances : mamot.fr, framapiaf.org, diaspodon.fr

• latest stylus (dated November 2nd 2023) don't know version, I rolled back to 1.5.35 and disabled update

• OS: Linux

• Browser: Firefox Dev Edition, nightly and stable

• Stylus Version: November 2nd 2023

Additional Context

[tophf]

When I open devtools I see Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“style-src”), and this behavior doesn't depend on the version of Stylus.

Normally it should be solved by enabling Patch CSP in Stylus' options, but it doesn't seem to handle this site properly, so I'll look into it. Meanwhile you'll need to use 1) a different styling extension or 2) an extension like ModHeader to disable the Content-Security-Policy header for this site.

[tophf]

The new version (02ead94e) will have an option Circumvent CSP 'style-src' via adoptedStyleSheets.

[mcclure]

Also seeing this, also on Mastodon (mastodon.social), can confirm at least one other Mastodon user besides me and gigoince are seeing this.

Weirdly I do NOT see this in my Chrome browser (Windows 10, Stylus 1.5.37) only my Firefox browser (Ubuntu 23.10 snap version, Stylus 1.5.37) although both browsers are using the same userstyles on the same sites.

[tophf]

It's an inherent problem in Firefox's implementation of content scripts - the CSP of the page is applied to the DOM elements we create. There are two workarounds, one is adoptedStyleSheets that I implemented above, another is via browser API like tabs.insertCSS or contentScripts.register, which I'll probably implement too one day. I suppose there may be some other styling extensions that already use them.

[mininmobile]

using firefox 119, stylus 1.5.37, having the same issue with a mastodon theme with the latest update. this shows up before any csp errors in the console;

Content-Security-Policy: Ignoring “'unsafe-inline'” within style-src: nonce-source or hash-source specified

looking at the header, style-src has a hash/nonce, that is patched by stylus but is subsequently ignored

style-src 'self' https: 'nonce-QFmxwJvKBnnQMXaQJzZdxw==';

using modheader to remove csp on the response, the style does load fine!

[tophf]

The next version will reuse nonce of the page by default in Firefox so that the users won't need to perform extra steps.

[mininmobile]

what does the nonce even do? wouldn't using the exact same hash also trigger some kind of error?

[tophf]

There are articles explaining it, but in short it's a random id that the site can use to mark the stuff like scripts or styles it knowingly creates, and specify that the unmarked and unknown stuff will be blocked.

[SaphireLattice]

Getting issues with this on a mastodon instance that had no problems before. Not sure if this is config change on the instance side, browser update tightening stuff up, or the extension doing something off. The site obviously blocks style tags that are inserted via inspector "edit as html", but not in direct inspection. Cuz, yeah, CSP blocks inline.

The CSP workaround in the settings does NOT work however.

Firefox 120.0b6 and Stylus 1.5.37

CSP of the site in question: base-uri 'none'; default-src 'none'; frame-ancestors 'none'; font-src 'self' https:; img-src 'self' https: data: blob: https:; style-src 'self' https: 'nonce-7RrHeLcL7DZdFeX2eB/b9g=='; media-src 'self' https: data: https:; frame-src 'self' https:; manifest-src 'self' https:; connect-src 'self' data: blob: https: https: wss://dragon.style; script-src 'self' https: 'wasm-unsafe-eval'; child-src 'self' blob: https:; worker-src 'self' blob: https:

So guess it's the same issue with the nonce. Yay waiting for the update.

[tobozo]

bump

The addon still doesn't work on mastodon and several other sites (including the mozilla addons site :facepalm:), this issue should probably be reopened.

Also I just lost three years of user styles by downgrading the addon to the previous version, not sure if this is by design but I believe it is important to share this behaviour so anyone having the same stupid idea has the time to backup their styles before doing it.

[tophf]

The new fixed version is still in the review on AMO.

[tophf]

Also I just lost three years of user styles by downgrading the addon to the previous version

You probably did something wrong like removing the extension. Always backup stuff that's important to you when tinkering with installation/upgrade.

[tobozo]

Always backup stuff that's important

sure, how do I backup important stuff from Stylus addon? I see a sync-to-cloud option but I don't have any of those cloud accounts (and not willing to create one), can it be backed up to filesystem in a trivial format such as json or sqlite?

I recreated some user styles and I can't find any of them when grepping my firefox profile folder, is it even on my system?

[tophf]

There's an export button in the style manager to save the data as a file. Personally, I use an automatic daily backup for the entire system+data partition, it's not that big.