注入外部JS成自创建的iframe(injecting external js into self

2019-08-31 08:27发布

因此,我试图注入和外部CSS和JS为自创建iframe来提供额外的安全层,从而导致无任何跨域的问题。

这里是代码

<!doctype html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>

<script>
$(function(){

var contents = $('iframe').contents();

styleTag = $('<link href="http://mylink.com/styles.css" media="all" rel="stylesheet" type="text/css" />').appendTo(contents.find('head'));

insertScript('https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');
insertScript('https://myserver.com/myfile.js');

});

var insertScript = function(src){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
$('iframe').contents().find('head').append(script);
console.log("add script");
}

</script>

<div class="output">
<iframe></iframe>
</div>

CSS文件被输入但无论是JS文件的,任何人都可以看到,为什么? 所述的console.log被输出。

谢谢

Answer 1:

我认为你必须创建iframe的文档对象的脚本元素。 它应该是可以作为contents[0]它可以传递给insertScript。

它的工作原理,如果你使用appendChild直接头节点(不是jQuery的包装)上:

$('iframe').contents().find('head')[0].appendChild(script);

http://jsbin.com/enidiv/1/edit



Answer 2:

只要iframe中域,协议和端口匹配你可以添加脚本。 否则,将被视为不安全试图访问一个不同的URL。



文章来源: injecting external js into self created iframe