web-fundamentals | Google Web Fundamentals

Summary:

Site at https://localhost:3000 , with Content-Security-Policy value of default-src 'self' 'unsafe-inline' https://localhost:3001/https_index.html contains iframe pointing at https://localhost:3001/index.html. The contents of :3001/index.html contain an . Clicking that link fails: Refused to frame '' because it violates the following Content Security Policy directive.... How can I change my CSP value to prevent this error; to open an new email in user's preferred email client (normal behavior of mailto)? I am using Chrome¹

Detail:

Similar but different than this question "mailto link not working within a frame chrome (over https) "

I think mine is not a duplicate because:

1. I cannot reproduce that bug, I see a console warning about mixed-content when I try to reproduce their steps:

   Mixed Content: The page at 'https://localhost:3001/https_index.html' was loaded over HTTPS, but requested an insecure resource 'mailto:...'. This content should also be served over HTTPS.

2. My steps are specific; both my page & its iframe src are https, but the page itself is served with a specific and restrictive Content-Security-Policy (CSP):

   app.use(csp({ directives: { defaultSrc: ["'self' 'unsafe-inline' https://localhost:3001/https_index.html"] } }));

3. Also the resulting error I can reproduce is different:

   Refused to frame '' because it violates the following Content Security Policy directive: "default-src 'self' https://localhost:3001/https_index.html". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.

With an image like:

1. The accepted answers for the original questions will help me work around my CSP-specific issue, that is, if I add a target="_top" to the link, the email client opens without error: email A similar fix works for another similar but different issue. However, this may¹ sometimes open a new tab

So my question is specifically about the Content-Security-Policy error (see above):

...Refused to frame '' because it violates the following Content Security Policy directive: ...

Notice it says frame ''. The frame is identified as an empty string!

Normally if some resource violates CSP, the URL of the resource is identified; i.e.

Refused to laod the script 'http://evil.com/evil.js'...

And if the CSP-violating URL is identified + provided I can use it; add it to my CSP value for default-src:

Hi I am trying to create a layout shifter pattern using Bootstrap 4.

I have managed to get 2 colored boxes in the right position maintaining the responsiveness but i am not able to get that 3rd box in the right position.

Please let me know how can i do this. Here is my html code :