Automatically adding theme scripts to CSP

We often see support topics from people trying to add external javascript references to their themes. By default, the content security policy will block this, and the admin has to manually add the script to the CSP site setting (or a theme setting/modifier).

However, @Johani made an excellent suggestion on how we can improve it.

Rather than asking theme developers to copy/paste things around the admin UI, we can do this automatically. We can parse all of the HTML in a theme, extract the src of any external scripts, and add it to the CSP.

After all, computers are a lot better at repetitive copy/paste than humans!

I opened a PR which implements that:


I am seeing some console errors locally:

In production environments, I also see sources added in the format https://CDN_SERVER/theme-javascripts/31657759d037d8c06397e9965a1113169100846e.js... which is redundant, because the policy already whitelists https://CDN_SERVER/theme-javascripts. Probably limit the auto-extension to to external script sources only?


Thanks @pmusaraj, I added some more checks to make sure we don’t serve invalid urls in the CSP, and also made sure theme-javascript URLs are excluded:


This is awesome. @merefield isn’t this super cool?

1 Like