I have a situation where ad have a CSP definition inside an iframe. In chrome there are no problems, but in firefox, after ad is loaded CSP affects whole page and I'm unable to load any other resources.
You can see the problem with this example:
<html>
<head>
<script>
function getScript(url) {
let tag = document.createElement('script');
tag.src = url;
tag.onload = () => document.getElementById('console').innerHTML += url + " loaded<br>";
document.body.appendChild(tag);
}
function getFromCdnFirst() {
getScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js');
}
function getFromCdnSecond() {
getScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js');
}
function getIframeWithCSP() {
var doc = document.getElementById('iframe').contentWindow.document;
doc.open();
doc.write('<html><head><meta http-equiv="Content-Security-Policy" content="script-src https://cdn.ampproject.org/;object-src '+"'none';child-src blob:;frame-src 'none'" + '"></head><body>Test</body>');
doc.close();
}
</script>
</head>
<body>
<iframe id="iframe"></iframe><br>
<button onClick="getFromCdnFirst()">Get script</button><br>
<button onClick="getIframeWithCSP()">Get CSP</button><br>
<button onClick="getFromCdnSecond()">Get script</button><br>
<div id="console">
</div>
</body>
It is also available here: https://jsfiddle.net/54Luhjan/1/
After you click the first button, js loads, the second link inserts CSP into iframe and after that scripts can't be loaded - CSP prevents it.
Do you have any idea what can I do to prevent external CSP corrupting my page?
Is it a Firefox bug?