Icons fail to load

[sarahboyce]

Noticed that icons are not loading on djangoproject.com (at least for me: on desktop, firefox, on mobile Chrome, Android).
They work on code.djangoproject.com and docs.djangoproject.com for mobile, they work in incognito mode 👍

Errors:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://static.djangoproject.com/fonts/fontawesome-webfont.d95d6f5d5ab7.woff?v=4.2.0. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘https://docs.djangoproject.com’).

downloadable font: download failed (font-family: "FontAwesome" style:normal weight:400 stretch:100 src index:0): bad URI or cross-site access not allowed source: https://static.djangoproject.com/fonts/fontawesome-webfont.d95d6f5d5ab7.woff?v=4.2.0
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://static.djangoproject.com/fonts/fontawesome-webfont.d95d6f5d5ab7.woff?v=4.2.0. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘https://docs.djangoproject.com’).

downloadable font: download failed (font-family: "FontAwesome" style:normal weight:400 stretch:100 src index:0): bad URI or cross-site access not allowed source: https://static.djangoproject.com/fonts/fontawesome-webfont.d95d6f5d5ab7.woff?v=4.2.0

Screenshots with broken icons

Desktop:

Mobile:

[sarahboyce]

e51e74b is possibly related (@adamzap)

[pauloxnet]

Noticed that icons are not loading on djangoproject.com on mobile (at least for me: Chrome, Android).

I can see icons on mobile 👍

I tested the website with Android 15 on Pixel 7.

Chrome 132

Firefox 134

@sarahboyce what version of Phone/OS/Browser are you experiencing the issue?

[sarahboyce]

Android 14, Chrome 132

[adamzap]

@sarahboyce Is this reproducible for you? I'm not exactly sure how assets work on production, but I'm assuming this is a one-time, cache-related thing.

[sarahboyce]

I still have this with cleared cache, it's been this way for a few days

[nessita]

I still have this with cleared cache, it's been this way for a few days

Is it the same if you try an incognito window or another browser like Firefox? I can't reproduce either 🤔

[sarahboyce]

Works on incognito 👍
This issue also is fine with incognito: #1887
So perhaps resolving those errors will resolve both issues for me

[adamzap]

Ah, given your comment in #1887, it seems like a production configuration issue, right? I wonder why it's not happening for the rest of us though.

[adamzap]

Since the discussion seems to be happening here, this is @sarahboyce's comment from #1887 showing the console errors related to this issue:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://static.djangoproject.com/fonts/fontawesome-webfont.d95d6f5d5ab7.woff?v=4.2.0. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘https://docs.djangoproject.com’).

downloadable font: download failed (font-family: "FontAwesome" style:normal weight:400 stretch:100 src index:0): bad URI or cross-site access not allowed source: https://static.djangoproject.com/fonts/fontawesome-webfont.d95d6f5d5ab7.woff?v=4.2.0

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://static.djangoproject.com/fonts/fontawesome-webfont.d95d6f5d5ab7.woff?v=4.2.0. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘https://docs.djangoproject.com’).

downloadable font: download failed (font-family: "FontAwesome" style:normal weight:400 stretch:100 src index:0): bad URI or cross-site access not allowed source: https://static.djangoproject.com/fonts/fontawesome-webfont.d95d6f5d5ab7.woff?v=4.2.0 

The asset URL works fine for me. It's odd to me that https://docs.djangoproject.com is referenced here. I wonder if there is some host confusion happening?

For what it's worth, this header seems a bit odd to me too, but I should revisit the docs:

Anyway, these are just initial ideas. I hope to have some time later this week to debug this if the solution is not obvious to someone else.

[sarahboyce]

I added a screenshot of the broken link for me and this is cached until Dec 2037. I wonder if @bmispelon can do anything here 🤔

[bmispelon]

This is definitely confusing 🤔

In case that helps, here's the relevant (I think) portion of the nginx configuration for static.djangoproject.com:

map $http_origin $sanitized_origin {
	"~*^https://.+\.djangoproject\.com$"	$http_origin;
	default static.djangoproject.com;
}

server {
	listen [::]:443 ssl;
	server_name static.djangoproject.com;

	location / {
		gzip on;
		gzip_vary on;
		alias /var/www/static/;
		if ($uri ~* ".*\.[a-f0-9]{12,}\.(css|js|png|jpg|jpeg|gif|ico|woff|ttf|otf|svg|scss|map|txt)" ) {
			expires max;
		}
		include /etc/nginx/security_headers;
		# The 'Origin:' header will be set by browsers when requesting
		# fonts, etc. Tell the browser to allow such requests only on
		# HTTPS, from any subdomain of djangoproject.com.
		add_header "Access-Control-Allow-Origin" $sanitized_origin;
		add_header "Vary" "Origin";
	}
}

It seems that the response you're receiving have the wrong Access-Control-Allow-Origin header set on them. Unfortunately, your first screenshot doesn't show the value (you have to scroll a little further up in the response headers). Can you report on the value of the Access-Control-Allow-Origin response header on the response that is blocked by CORS?

[sarahboyce]

Can you report on the value of the Access-Control-Allow-Origin response header on the response that is blocked by CORS?

https://docs.djangoproject.com/