创建新的window隔离沙箱

一起来了解下~
target="_blank的安全隐患
当window下的全局方法被污染了，如何获取到原本的全局方法getComputedStyle

前情提要
1、 target="_blank"的安全/性能隐患
2、window被污染后当前网页找到一个新的window

---

看到一篇文章，讲的是<a/>标签的target="_blank"的安全/性能隐患
众所周知，这个操作会打开一个新窗口

• 有数据表面国外站点倾向于当前页跳转，有连贯性，减少窗口数量
• 而国内站点倾向于打开新窗口，优化搜索结果及返回页

那会有什么安全/性能隐患呢？

window.opener获取到来源页面的window对象，即时跨域也不受影响 excuse me?

// 父 http://xx.xx.xx.xx:8000/父.html
<a href="http://localhost:8000/子.html" target="_blank"></a>
// 子 http://localhost:8000/子.html
window.opener.location = 'https://www.baidu.com'

在ip跨域时，竟然真的触发了父跳转，这被钓鱼可咋办

target="_blank"的窗口和父窗口公用一个进程，so资源占用你懂的

如何保障你的网站外链合规

• 为了防止CSRF攻击
  • 父页面跳转到钓鱼登录页
  • 发送带参get请求

// 父 在a标签上加属性
<a rel="noopener" />
// 或
<a rel="noreferrer"/>
/////////////////////////////
// 或者重写open()
var window_open = window.open();
window_open.opener = null;
window_open.location = 'yourUrl';
window_open.target = "_blank";

这样子窗口就是独立的进程了

hexo的主题已经支持这个方案了，不过插件生态好像并没有，（比如文末的本文链接- -,可以提issue了）

如何找到新的window

回忆起遇到了这么一题，getComputedStyle方法被重写了，要获取css伪元素的content中的文字，当前页面的window被污染了，从哪里得到新的window呢

iframe和open

以getComputedStyle举例，这里就放部分代码

// 父
#t1::before {content: '我是父t1';}
window.getComputedStyle = ""
console.log('通过子获取父style', window.frames['iframe1'].contentWindow.getComputedStyle(document.getElementById('t1'), ':before').content)
console.log('调用子方法',window.frames['iframe1'].contentWindow.funcLeo_c())
// 子
console.log('从子获取父style', window.getComputedStyle(window.parent.document.getElementById('t1'), ':before').content)
console.log('调用父方法',window.parent.funcLeo_p())

当然还有上文提到的open()方法

var win = window.open('');
console.log(win.getComputedStyle(document.getElementById('t1'), ':before').content)