Why can the browser display all response headers, but I have a limited set in javascript?

Question

For instance, I can view all the response headers in Chrome, but when I console.log(response), I only get 2, content-language and content-type.

vs

What I can access:

I understand why this is happening, Access-Control-Expose-Headers needs to be set server side in order to expose the rest of those headers. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers

However, I'm not understanding, and haven't been able to find any resources online on why and how the browser has access, but my front end javascript client doesn't. What is the technical explanation for how the browser is receiving and accessing the headers, vs a front end client? Is there a way to access the headers the way the browser is via my client?

Answer 1

It's the same reason as everything else relating to cross-origin requests.

The browser is the agent of the user. The user has complete control over the browser. Anything the server trusts the browser with it is trusting the user with.

JavaScript running on some random webpage answers to the person who wrote that webpage, not to the user. The browser doesn't automatically trust that other person.