1 min read

Applying custom CSS in Safari when Content Security Policies get in the way

I recently wanted to make some CSS changes to a web app I use frequently, to make it a little more functional for my use-case.

The application applies a strict content security policy which prevented me from easily injecting CSS. Even inline styles were restricted by the policy.

In some browsers, you can simply disable CSP; not so in Safari. And I didn't really want to go that route anyway; content security policies are, broadly, a good thing. Unfortunately, they also conflict with the open and mutable nature of the web.

Fortunately, Safari makes it possible to add your own browser-level stylesheet which is not subject to Content Security Policy restrictions. Simply open Safari preferences and navigate to the Advanced tab:

Setting a browser stylesheet in Safari

This stylesheet gets loaded on every web page you visit, which does mean you need to be careful about the selectors you use; fortunately the selectors I was targeting were very specific to this application and not something I'd likely encounter in other services.

💡
Tip: Safari aggressively caches the style sheet. If you make changes and want to reload your styles, click the Style sheet dropdown, then click your specific file in the list. It will reload instantly.

In the end I was able to make the changes I wanted and didn't have to disable important security restrictions to do it. Thanks, Safari team!