前端进程间通讯的渗透之术

前端渗透的应用场景有很多，比如在《魔改npm私有仓库 》一文中就介绍了如何在框架中植入私有代码，让逻辑线程和主线程激情博弈。这次介绍另外一种进程间渗透内存的玩法，适用于网页和iframe常见的博弈。

进程间的通讯方式

父页面和子页面（iframe）处于2个不同的进程（即使在同一个域），进程之间的通讯必须通过每个进程内【事件监听所在的线程】来完成。最重要的是，通讯时传输的数据格式必须是序列化的格式，序列化格式指【一维】【线性】的数据类型比如字符串、字节流等，在浏览器中有这么几种序列化格式可选：

• 字符串：可以传普通的文本信息
• JSON：最流行的格式，JavaScript原生支持
• 结构化克隆算法：可以打包常见的JS对象，postMessage使用的算法
• 二进制格式：性能很高，比如我的Zipack，但需要引入额外的包

下面介绍2种方法（可能性），可以让父页面以最大的自由度读写iframe的内容，这两种方法的优点是：子页面的开发商只需要一点点的配合就能实现，主动权掌握在父页面手中。缺点是：需要熟悉子页面的结构，本质上属于代码渗透，可能有性能影响。

直接访问同域iframe的内存

有一种特殊情况下，不同的进程可以共享内存空间：如果父页面和iframe同域，问题就简单多了，也不必传输序列化数据了，父页面可以直接访问并修改iframe的全局作用域window对象（因为浏览器认为同域之间相互信任）。

比如想去掉iframe中的导航栏（nav元素），可以通过下面的代码实现：

1. iframe.contentDocument.querySelector('nav').remove();

如果只是想隐藏掉，可以这样：

1. iframe.contentDocument.querySelector('nav').style.display='none';

想点击某个按钮（button元素）：

1. iframe.contentDocument.querySelector('button').click();

同理，iframe中也可以直接访问父页面的全局环境：

1. window.parent.document //document和DOM有关

异域下iframe暴露JS和CSS接口

如果不幸父页面和iframe不同域，那只能通过跨域的方式传序列化数据：父页面向子页面postMessage传值，子页面监听message事件。

比如希望传递一份CSS字符串，覆盖iframe中的样式：

1. iframe.contentWindow.postMessage({
2. type: "css",
3. content: `
4. body {
5. font-size: 25px !important;
6. } `
7. }, "*");

如果希望传一段js代码给iframe执行，可以这样：

1. iframe.contentWindow.postMessage({
2. type: "js",
3. content: `
4. alert('hello world') `
5. }, "*");

以上2种情况，iframe中可以这样监听：

• 动态创建<style>元素覆盖样式
• 利用eval()函数解释执行JS代码

1. window.addEventListener("message", (event) => {
2. if (event.data.type === 'css') {
3. const style = document.createElement('style');
4. style.innerHTML = event.data.content;
5. document.body.appendChild(style);
6. } else if (event.data.type === 'js') {
7. eval(event.data.content);
8. }
9. }, false);

同理，iframe向父页面发送数据：

1. window.parent.postMessage()

<完>