I'm trying to sort out in what situation the sources 'unsafe-inline' and 'unsafe-eval' would be needed on the connect-src directive. They are listed here as sources:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src
It seems clear to me why these sources would be needed on script-src, I just can not piece together why they would be necessary for connect-src - and I'm assuming there must be a reason for MDN to list them as sources on this directive.
Can someone help me understand or give me the use case? Take the example below. Notice that I'm successfully making a GET request to mocky.io from an inline script, and then calling eval() w/in the callback WITHOUT the 'unsafe-inline' or 'unsafe-eval' source for the connect-src directive.
<html lang="en">
<head>
<meta http-equiv="Content-Security-Policy" content="script-src 'unsafe-inline' 'unsafe-eval'; connect-src https://run.mocky.io;">
</head>
<body>
<h1>Testing CSP</h1>
<!-- testing any JS executing from unsafe inline -->
<script type="text/javascript">
console.log("Testing some unsafe inline");
</script>
<!-- testing XHR calls from unsafe inline -->
<script type="text/javascript">
const callMocky = () => {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//eval from the XHR state change
eval("console.log('XHR Sent and Received!')")
console.log(xhttp.responseText);
}
};
xhttp.open("GET", "https://run.mocky.io/v3/7ef12b35-8438-424f-8a5f-b11521d03fe7", true);
xhttp.send();
}
callMocky()
</script>
<!-- testing unsafe eval from unsafe inline -->
<script type="text/javascript">
eval('console.log("this is an unsafe eval!")')
</script>
</body>
</html>