Automatically adding theme scripts to CSP

AI-generated summary

The discussion revolves around automatically adding theme scripts to the Content Security Policy (CSP) in Discourse. david proposes a solution to automatically parse theme HTML, extract external script sources, and add them to the CSP, avoiding manual admin intervention. pmusaraj reports console errors and notes redundant entries in production, suggesting filtering for external scripts only. david addresses these issues with improved checks and exclusions for theme-javascript URLs. fzngagan expresses enthusiasm for the feature.

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:

https://github.com/discourse/discourse/pull/9531

I am seeing some console errors locally:

image

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:

https://github.com/discourse/discourse/commit/f95609ae23ce1604b5f53c9d232e66895cfc9ee7

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