I try adding frame-scr since it says that "Note that 'frame-src' was not explicitly set": heres what I have try adding :

frame-src 'self';
frame-src 'self' data:;
frame-src /;
frame-src http://* https://*;

Still error I have change the frame-src many times and don't have any luck fixing the error.

Here is my Content-Security-Policy:

default-src 'self' data: ; object-src 'none'; frame-ancestors 'self'; sandbox allow-forms allow-same-origin allow-scripts; base-uri 'self';"

Here is my HTML :

<div id="main">
     <a href="" id="link">Click me</a><br>
</div>
<div id="popup"><iframe id="popupiframe"></iframe></div>
<div id="popupdarkbg"></div>

Here is my JS :

 document.getElementById("link").onclick = function (e) {
    e.preventDefault();
    document.getElementById("popupdarkbg").style.display = "block";
    document.getElementById("popup").style.display = "block";
    document.getElementById('popupiframe').src = "/";
    document.getElementById('popupdarkbg').onclick = function () {
        document.getElementById("popup").style.display = "none";
        document.getElementById("popupdarkbg").style.display = "none";
    };
    return false;
}

window.onkeydown = function (e) {
    if (e.keyCode == 27) {
        document.getElementById("popup").style.display = "none";
        document.getElementById("popupdarkbg").style.display = "none";
        e.preventDefault();
        return;
    }
}

I encounter this error when I click the button/text the will trigger the iframe that will show another website in iframe.

Refused to frame '/' because it violates the following Content Security Policy directive: "default-src 'self' www.gravatar fonts.googleapis fonts.gstatic". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.

I try adding frame-scr since it says that "Note that 'frame-src' was not explicitly set": heres what I have try adding :

frame-src 'self';
frame-src 'self' data:;
frame-src http://example./;
frame-src http://* https://*;

Still error I have change the frame-src many times and don't have any luck fixing the error.

Here is my Content-Security-Policy:

default-src 'self' data: ; object-src 'none'; frame-ancestors 'self'; sandbox allow-forms allow-same-origin allow-scripts; base-uri 'self';"

Here is my HTML :

<div id="main">
     <a href="" id="link">Click me</a><br>
</div>
<div id="popup"><iframe id="popupiframe"></iframe></div>
<div id="popupdarkbg"></div>

Here is my JS :

 document.getElementById("link").onclick = function (e) {
    e.preventDefault();
    document.getElementById("popupdarkbg").style.display = "block";
    document.getElementById("popup").style.display = "block";
    document.getElementById('popupiframe').src = "http://example./";
    document.getElementById('popupdarkbg').onclick = function () {
        document.getElementById("popup").style.display = "none";
        document.getElementById("popupdarkbg").style.display = "none";
    };
    return false;
}

window.onkeydown = function (e) {
    if (e.keyCode == 27) {
        document.getElementById("popup").style.display = "none";
        document.getElementById("popupdarkbg").style.display = "none";
        e.preventDefault();
        return;
    }
}

I encounter this error when I click the button/text the will trigger the iframe that will show another website in iframe.

Refused to frame 'http://example./' because it violates the following Content Security Policy directive: "default-src 'self' www.gravatar. fonts.googleapis. fonts.gstatic.". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.

• javascript
• html
• iframe
• content-security-policy

1 Answer 1

Yes, you have to add frame-src http://example.; into your CSP.
BUT:

Here is my Content-Security-Policy:

default-src 'self' data: ; object-src ...

You show the CSP which does not match the actual policy from the console error:

I encounter this error ...:

Refused to frame 'http://example./' because it violates the following Content Security Policy directive: "default-src 'self' www.gravatar. fonts.googleapis. fonts.gstatic.".

Looks like you edit the CSP which is not publish or is overridden. This can happen, for example, if CSP is published by some CMS plugin and at the same time in the .htaccess file.

If you have .htaccess or web-config with:

Header set Content Security Policy: "...rules..."

it overrides CSP published by CMS. In case of:

Header ALWAYS set Content Security Policy: "...rules..."

you will have 2 CSPs simultaneously.

Check which CSP is actually being delivered to the browser, the tutorial is here.