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

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