Firefox CSP Issues and FOUC

I think a lot of web developers would agree that cross-browser support is one of the most annoying parts of web development. A website might work fine in Chrome, but be completely borked in Firefox, or god forbid an old version of Internet Explorer. Add on top of that phones, phablets, tablets, desktops, and smart TVs and now you have to deal with a bewildering array of screen resolutions. It's hard to believe that CSS media queries were only added to the W3C standards in 2012. A lot of browsers didn't get even get unprefixed flexbox support until 2014 or 2015.

This website is very bare bones - static content only, all loaded from this server and this server only. No external images, no fonts, nothing like that. No scripting to speak of, just HTML and a CSS stylesheet. It does a little bit of media query magic for small screens and dark/light mode themes, but nothing fancy. Surely static HTML + CSS should work in a modern browser error free... right? Well, unfortunately not, it turns out.

CSP Handling in Firefox

The Content Security Policy, or CSP, is a header that a server sends to tell the client from where and what kinds of resources can be loaded on a page. This can be used to restrict loading images or scripts from external domains, or prevent inline JS from being executed. From a security point of view, this is great, because it makes injecting malicious content into an otherwise benign page that much more difficult.

This server is set up to return a Content-Security-Policy header with every response, with the value: "default-src: 'self'". This allows resources of any type, but only when loaded from the same origin - i.e. akaath.net. I host all of my own content here, and don't load any external content, so that security policy should be totally fine. However, after I added the header, I noticed I started getting an error in my Firefox console when loading the page.

Okay, well the error is straightforward enough: the page's settings blocked an inline script because of the default-src directive. Problem: none of these pages have any inline script, and the debug line number link directs to an empty tab. So where is this error coming from? It turns out... uBlock Origin.

uBlock Origin, like many extensions, injects some Javascript into the page, I would assume to remove tracking/ad content prior to the page fully loading. You would think this wouldn't be a problem, but for some reason - in Firefox, not any other browser I've tested - extensions are not able to override the CSP policy of a page. So if you have a CSP in place that prohibits inline script (like this site does), uBlock Origin in Firefox will cause a CSP violation error on every page.

I've tested Chrome, Brave, Firefox, and Edge, both with and without uBlock installed, and Firefox is the only browser that exhibited this behaviour. The Tampermonkey extension shows the problem even worse - multiple CSP policy violation errors with a standard Tampermonkey install in Firefox. Given that the CSP has a report-to directive, I have to wonder how many false CSP violation reports are being sent in from client-side extensions trying to inject resources into a page.

Ultimately, it's an error I can live with. It doesn't impact the performance of the website and shouldn't be reported anywhere. Seeing the error in the console offends my inner perfectionist, but the alternative is making the security of the website worse by allowing inline scripts. I don't know why Firefox has decided to have the CSP apply to client-side extensions as well, but there's some interesting discussion of it in this 10 year old bug report.

Flash of Unstyled Content

In the course of debugging the previous issue, I then ran into a second issue - Flash of Unstyled Content, or FOUC. It's the unpleasant bright white page you get for a split second before your browser renders the styling properly; just long enough to sear your retinas out in a dark room. I was well and truly stumped at that point - I wasn't loading any external resources, all the file sizes were small, there's no scripts or weird imports. The HTML was valid. All the usual suspects had been ruled out. The debug line number link just points to a seemingly innocuous bit of internal Javascript.

Turns out this issue happens if, and only if, you force-refresh the page without cache (CTRL-F5) while having the inspector window open. A force-refresh with the inspector closed doesn't produce a white flash and doesn't return a forced layout error in the console. I was able to reproduce this behaviour across multiple different websites, but some websites like Google and Wikipedia seem immune. Again, this seems to be a Firefox thing - it doesn't happen in Chrome, extensions make no difference and it happens in private windows as well. Something about the Firefox inspector being open causes the "Layout was forced before the page was fully loaded" error, but I haven't found any discussion of this.

Conclusions

What an unsatisfying end to a bug-fixing session. The CSP error can only be ignored (without compromising security) and the FOUC error turned out to be a likely artifact of Firefox's inspector. I love Firefox (it's my daily driver), but I have to accept that it comes with some quirks that you just don't really find in Chrome. These ones really threw me for a loop - hopefully if you encounter them, they don't cause you to waste as much time as I did.