iframe实现与父页面跨域隔离的JavaScript 代码沙箱

正文

假如让你实现一个在线的 JavaScript 代码运行环境，要求用户代码不能对页面进行修改，以避免潜在的安全问题，你会怎么做？

使用 with？使用 proxy？OK ，都可以，但是这两种方法都需要关注很多细节，否则用户依旧有可乘之机，这样一来你的实现里面就会有一个很长长长长长长长的操作黑名单。

除此之外，我们还可以专门部署一个页面，将代码提到服务端渲染成页面，再通过 iframe 去访问，如果 iframe 与父页面之间是跨域的话可以达到很高的安全性——那么能不能不看后端的脸色，完全使用浏览器来实现类似的沙箱呢？

当然可以——

1. iframe

对前端页面而言，跨域是页面与页面之间的鸿沟，但这并不意味着我们必须重新打开一个页面来运行新的代码，因为我们可以使用 <iframe> 标签：

<iframe src="www.xxxx.xxx"></iframe>

对于同域的 iframe ，我们可以直接通过 .contentWindow 访问并操作它的全局对象，然后直接往里面执行 JavaScript：

document.querySelector('iframe')
  .contentWindow
  .eval('alert("hello world!");');

但是同域页面的子页面是可以与父页面进行互操作的，

2. data URL

你可能在一些页面里见过小图片不使用网络链接，而