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

Automatically adding theme scripts to CSP

Development

fzngagan (Faizaan Gagan) October 23, 2020, 1:02pm 5

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

Topic		Replies	Views
CSP error: Couldn't parse invalid host /theme-javascripts/ Product Support	4	1703	April 28, 2020
Adding JavaScript to a theme in /head not working (UserWay) Product Support	2	1512	April 29, 2020
Add CSP nonce-source support Development	11	4280	November 2, 2018
Can't get script tag to work in landing pages plugin due to content-security-policy Product Support	4	301	July 1, 2025
Content-Security-Policy now uses 'strict-dynamic' Announcements	12	2126	August 20, 2024

Automatically adding theme scripts to CSP

Related topics