I am working on a browser extension. In a script running on the popup page, I am making an ajax request. On the first line of my handler for the xhr.onload event, I have console.log(xhr.getAllResponseHeaders()). However, some headers from the response are missing. I know that this could be a problem with my manifest.json file, so here it is, with some extra details removed:
{
"manifest_version": 2,
"name": "...",
"version": "1.0",
"description": "...",
"options_ui": { "page": "options.html" },
"icons": {
"16": "icons/favicon-16x16.png",
"32": "icons/favicon-32x32.png"
},
"browser_action": {
"default_popup": "popup.html",
"default_icon": "./icons/favicon-32x32.png"
},
"key": "...",
"permissions": ["identity"],
"content_security_policy": "script-src 'self' https://unpkg.com https://apis.google.com https://www.gstatic.com https://www.googleapis.com https://securetoken.googleapis.com; object-src 'self'",
"content_scripts": ["..."]
}
These are the actual response headers, according to the network debugging tab:
HTTP/1.1 200 OK
Date: Wed, 27 Oct 2021 18:09:36 GMT
Server: WSGIServer/0.2 CPython/3.9.6
Content-Type: text/html; charset=utf-8
Hx-Trigger: setupLogin
X-Frame-Options: DENY
Content-Length: 220
Vary: Cookie, Origin
X-Content-Type-Options: nosniff
Referrer-Policy: same-origin
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: chrome-extension://kcegdmcjklppcfbmfjgkkomecpaofoec
However, this is the output of console.log(xhr.getAllResponseHeaders()) on the first line of the xhr.onloaded event handler:
content-length: 220
content-type: text/html; charset=utf-8
I should note that I have no obvious CORS errors. I am using Django with the django-cors-headers library, and I have all these headers, including the critical Hx-Trigger header that I am trying to debug in particular explicitly listed as allowed headers (although I'm pretty sure that list is only supposed to be for incoming request headers, but whatever).
Do you know why getAllResponseHeaders() is missing so many of the actual headers?
I figured it out. You need to set the Access-Control-Expose-Headers header in a CORS context for headers to be visible to scripts executing on the client.
Relevant MDN: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers