CODEWITHSUNDEEP
iframe
user1545028
user1545028

Reputation: 779

Content Security Policy directive: "frame-ancestors 'self'

I am embedding an iFrame in my web page, something like this:

var iframeProps = {
        'data-type': self.props.type,
        allowTransparency: self.props.allowTransparency,
        className: self.props.className,
        frameBorder: self.props.frameBorder,
        height: self.props.height,
        key: url,
        onLoad: self.props.onLoad.bind(self),
        scrolling: self.props.scrolling,
        src: self.state.isActive ? url : '',
        style: self.props.styles,
        width: self.props.width
    };
<iframe {...iframeProps} />

This is throwing an error in the console

Refused to display 'https://twitter.com/.... in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

Could anyone please tell me how can I make this work?

Upvotes: 77

Views: 415669

Answers (5)

Vivek Kumar
Vivek Kumar

Reputation: 2899

The frame-ancestors directive in a Content Security Policy (CSP) cannot be set using the <meta> or <iframe/> tag. This directive only works when the CSP is delivered via HTTP headers, not via meta or iframe tags in HTML.

Why is this?

The frame-ancestors directive is used to control which sites can embed your content in an iframe. However, it is considered a more sensitive directive, and for security reasons, it is not supported by the tag. This is why it's ignored when set this way.

How to Set CSP Headers Correctly?

Since the frame-ancestors directive needs to be set in the HTTP headers, you will need to set it from the server side or through a configuration if you control the server.

Solution:

Set Content-Security-Policy Headers on the Server: As mentioned earlier, you can set the Content-Security-Policy header on your server. Here's how you can do it for various server environments:

  1. Apache: In your .htaccess file or in the Apache configuration, add:

    Header set Content-Security-Policy "frame-ancestors 'self' https://drive.google.com"

  2. Nginx: In your nginx.conf file, add:

    add_header Content-Security-Policy "frame-ancestors 'self' https://drive.google.com";

  3. Cloudflare (if using a CDN): You can set the Content-Security-Policy header in the Cloudflare Dashboard by creating a custom header rule.

Upvotes: 0

Tristanisginger
Tristanisginger

Reputation: 2683

Amend the CSP to include:

frame-ancestors 'self' *.twitter.com;

Upvotes: 0

Shubham Ware
Shubham Ware

Reputation: 51

You could use a proxy which fetches the requested page on your behalf and then you can host the proxy on your domain and load the web page from this proxy server with the new proxy URL rather then "twitter.com" in this question.

Upvotes: 5

王伟建
王伟建

Reputation: 91

I encountered with this problems recently too and i didn't find any alternative method to solve that.Finally, I came up with idea that the attribute in the iframe,which is "src",can be filled with the origin html content and it works.

// this demo shows the process of getting the html content 
// from the link,and then apply it to the attribute "src" in the iframe
$.get(link, function (response){ 
var html = response;
var html_src = 'data:text/html;charset=utf-8,' + html;
$("#iframeId").attr("src" , html_src);
});

Upvotes: 4

TimmyB
TimmyB

Reputation: 731

The content is prohibited from being displayed within an IFRAME due the Content Security Policy being set. The webserver hosting twitter.com is configured to add a HTTP header to the response object. Specifically they are setting the Content-Security-Policy tag to frame-ancestors 'self'. There is no way you'll be able to embed their pages into a page of your own using IFRAME. There are other techniques that you could use to work around that, but none are as simple as an iframe tag.

W3C Content Security Policy Level 3 - Frame Ancestors

Upvotes: 56

Related Questions