Javascript 同时使用沙箱并向iFrame添加JS/HTML

我正在尝试创建一个iframe，其中包含jsfire，但没有访问父文档的权限。目标是有一个简单的实现，不包括任何特殊的库。我发现这是一个可行的解决方案；然而，事实证明，同时对iframe进行沙箱处理并将JS放入其中是相当困难的

我试过：

将JS添加到iframe，然后从父文档对其进行沙箱处理这不起作用，因为iframe中的JS在应用iframe沙盒之前激发

创建iframe并使用

srcdoc

属性设置HTML（例如

）根据

---

创建iframe并使用

src

属性设置HTML（例如

只是想知道为什么要在示例4中的内部脚本中添加
沙盒
属性：

“window.top.document.getElementById（'bryce_iframe'）。沙盒='allow scripts'+

应将沙盒属性添加到父代码中：

<!-- Case #4 ~ Sandbox maybe not applied? -->
<script>
var i   = document.createElement('iframe');
i.src   = "about:blank";
i.id    = "bryce_iframe";
i['sandbox'] = 'allow-scripts';
document.body.appendChild(i);


var i=document.createElement（'iframe'）；
i、 src=“关于：空白”；
i、 id=“bryce_iframe”；
i['sandbox']='allow scripts'；
文件.正文.附件（一）；

这将阻止父访问。
我也面临同样的问题。我也没有一个好的解决方案，但还有两个选项在Edge上不起作用：

选项1：blobURL

var blob = new Blob([html_string], {type: 'text/html'});
var url = URL.createObjectURL(blob);
var i   = document.createElement('iframe');
i.src = url;
i.sandbox = "allow-scripts";

选项2：数据URL

var url = "data:text/html,<html_string>";
var i = document.createElement('iframe');
i.src = url;
i.sandbox = "allow-scripts";

var url=“数据：文本/html，”；
var i=document.createElement（'iframe'）；
i、 src=url；
i、 sandbox=“允许脚本”；
如果查看，它会发出警告：

这些标志仅在对iframe元素的嵌套浏览上下文进行导航时生效

这意味着在iframe加载后动态添加/删除/更新其沙盒属性不会产生任何效果

正确的方法是在加载第三方JS的单独域上托管一个不同的HTML文件。您可以在iframe的
src
属性中引用该HTML文件，并且您可以静态地包含
sandbox
属性，而不是尝试在JavaScript中动态添加它。请确保u包括
allow scripts
作为
sandbox
属性的值，以便子页面能够加载JS

你应该在一个单独的域上托管另一个HTML文件的原因是针对不支持
sandbox
属性的浏览器。浏览器支持是有文档记录的
我这样做是因为我觉得值得一试。从我在前几次尝试中了解到的情况来看，如果我按照你的建议做，我有两个选择：1）在将HTML添加到iframe之前添加沙盒属性-无法工作，因为无法写入沙盒iframe 2）在将HTML添加到iframe之后添加沙盒属性-无法工作，因为iframe中的JS将在添加沙盒属性之前执行。。。附言：谢谢你的帮助，你说得对。也许你可以添加某种浏览器检测（呃！）来在前两种浏览器之间切换？但这两种方法都不能完全适用于Firefox:-/在Firefox中，我的代码中的案例#2起到了一半的作用。它会创建
，但实际上里面没有文本，这让我相信它不可靠。为什么你必须在客户端这样做？除了在没有DOM操作权限的网站上托管第三方脚本，还有什么替代方法？
"<scr"+"ipt>window.top.document.getElementById('bryce_iframe').sandbox = 'allow-scripts';</scr"+"ipt>" +

<!-- Case #4 ~ Sandbox maybe not applied? -->
<script>
var i   = document.createElement('iframe');
i.src   = "about:blank";
i.id    = "bryce_iframe";
i['sandbox'] = 'allow-scripts';
document.body.appendChild(i);

var blob = new Blob([html_string], {type: 'text/html'});
var url = URL.createObjectURL(blob);
var i   = document.createElement('iframe');
i.src = url;
i.sandbox = "allow-scripts";

var url = "data:text/html,<html_string>";
var i = document.createElement('iframe');
i.src = url;
i.sandbox = "allow-scripts";