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

Question

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?

Answer 1

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

Answer 2

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);
});

Answer 3

This issue was occurring when trying to upload proof of identity documents to Amazon Pay. The solution was to clear the browser cache and cookies.