Sometimes, I wonder if this question is silly because it goes against the purpose of the Content Security Policy.
There's a webpage located at foo.baz.com that requires data from bar.baz.com to function locally. Below is the code snippet for the function responsible for fetching and storing the data in a cookie:
function() {
let request = new XMLHttpRequest();
request.open("GET", "https://bar.baz.com/endpoint");
request.onload = () => {...store the results in a cookie...};
request.send();
}
However, the foo.baz.com page enforces a CSP directive of default-src: 'none', and since the page is managed by another team, I am unable to modify it. (This function is executed within the browser console.)
The use of XMLHttpRequest, jQuery, and fetch methods all result in a CSP error:
Refused to connect to 'https://bar.baz.com/endpoint' as it violates the Content Security Policy directive: "default-src 'none'". It's worth noting that 'connect-src' was not explicitly defined, so 'default-src' is being used as a fallback.
Is there any way to make an API call from one subdomain of baz.com to another when the CSP directive cannot be altered from default-src: 'none'?
(Perhaps by dynamically configuring the connect-src directive, adding an access control header, or utilizing a library capable of making requests despite the CSP constraints?)