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

Question

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

var iframeProps = {
        \'data-type\': self.props.type,
        allowTransparency: self.pro         


        

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