Code highlighting failed because bunny.net CDN

Support
,

AI-generated summary

Code Highlighting Issue with Bunny.net CDN

A user reported an issue with code highlighting not working on their site due to a CORS policy block. pfaffman replicated the issue and found that the problem was caused by the lack of an ‘Access-Control-Allow-Origin’ header on the requested resource from the CDN.

pfaffman fixed the issue by adding js to the “add cors header” setting on the CORS page, which allowed bunny.net to automatically add CORS headers to all requests to files with the js extension.

itbhanusharma mentioned that there might be a setting in bunny.net that adds js to CORS, but pfaffman was unsure if this was a recent change.

david explained that the issue was likely caused by a recent change in Discourse that switched highlightjs to load via native import(), which requires CORS headers when fetching from a CDN. He also mentioned that Discourse should be adding the CORS header to CDN responses, but if it’s not, adding the headers via the CDN config can achieve the same result.

1

Someone compained that code highlighting isn’t working on their site. I’ve replicated the issue on mine. The issue seems to be that the CDN is blocked by CORS policy:

image

I fixed the problem by adding js to the “add cors header” setting on the cors page:

image
image347×405 19.3 KB

If enabled, bunny.net will automatically add CORS headers (Cross-Origin Resource Sharing) to all requests to files with extensions from the list.

This post is to document it in case someone else has an issue with a bunny.net CDN and to make sure that I understand this.

2

I believe there is (or used to be) a setting in bunny which added js to cors? I (for some reason) have js added to cors for all my bunny.net resources but I don’t recall adding them myself. Is it a fairly new site?

3

The site where they first noticed it has been around a long time (don’t remember when they started using bunny).

I’m not sure if bunny changed or something about the included script did.

4

The change which made this noticeable was most likely DEV: Modernise highlightjs loading (#24197) · discourse/discourse@0878dde · GitHub, which switched highlightjs to load via native import(), which requires CORS headers when fetching from a CDN.

But even before that change, you likely would have had some issues with things like custom Fonts (which also require CORS headers for cross-origin requests).

In theory, Discourse itself should be adding the CORS header to CDN responses. If it’s not, that probably means your CDN is not setting the CDN hostname (i.e. not the forum hostname) in the Host header or the X-Forwarded-Host header.

That said, adding the headers via the CDN config likely achieves the same thing :ok_hand: