Block cross domain XHR or fetch call at origination/source

Question

Let's consider the following scenario:

• a user loads https://foo.com/index.html in one of the modern browsers which allow CORS.
• index.html loads a javascript from https://bar.com/script.js via the script tag.
• considering a hypothetical situation where this script.js is never cached and the content of script.js has changed.
• script.js makes an XHR request to https://baz.com
• https://baz.com has enabled Access-Control-Allow-Credentials: * thus this XHR made by script.js goes through.
• important user information now can be passed to https://baz.com which is a security risk.

Prior to CORS, XHR calls were strictly followed same-origin policy and thus calls to https://baz.com from https://foo.com would not be permitted by the browsers.

I am wondering if there is a way for https://foo.com/index.html to specify a list of XHR permissible domain names so that the above scenario would not be possible.

Any pointer is highly appreciated.

[UPDATED]

I guess I have found the answer to my question.

Thank you for being considerate 🙏

Best!

Answer 1

I guess I found the answer to my question.

Using connect-src directive of the Content-Security-Policy Header https://foo.com/ can restrict the XHR, fetch calls along with WebSocket, EventSource, <a> ping to desired domains.

Content-Security-Policy: connect-src <source> <source>;

More information at https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src

I once thought of deleting my question but someone else like me can be benefited.

Answer 2

CORS blocking is done on the server side, where the response headers are set to allow requests from certain origins or not.

If bar.com/script.js fetches data from baz.com, then baz.com should have the CORS restriction.