JavaScript iframe 通信与用户信息管理脚本解析

摘要：这段 JavaScript 是一个运行在支付宝域名下的 iframe 中的通信桥接脚本，用于接收父页面指令、管理用户 ID 的 Cookie 存储、提供 localStorage 代理访问，并通过 postMessage 实现跨域数据交互。

一、整体结构解析

!function(e){
    function t(o){...}
    var n={};
    return t.m=e, t.c=n, t.p="", t(0)
}(...);

      这是一个典型的立即执行函数（IIFE），模拟了模块加载系统：

• e 是传入的所有模块对象（键为模块 ID，值为模块函数）
• t(o) 是模块加载器，用于按需加载模块
• n 是缓存已加载模块的对象
• 最后执行 t(0)，即运行模块 0（主逻辑）

二、关键模块分析

1. 模块 0（主逻辑）：`0:function(e,t,n)`

      这是主入口，功能如下：

1.1 引入依赖模块：

var a = n(18), i = o(a); // Cookies 操作库
var c = n(8), u = o(c); // 日志工具
var s = n(17), d = o(s); // localStorage 操作

1.2 定义对外接口：

window.__saveUserId = function(e) {
    i.default.set("userId", e);
};

      提供给外部调用，设置用户的 userId 到 Cookie。

window.iframeStartup = function() { ... };

      启动 iframe 的通信机制。

1.3 核心逻辑：监听父页面消息

      通过 window.addEventListener("message", ...) 接收来自 parent 的消息：

消息类型	动作
"setBucUserId"	设置 userId 到 Cookie，并带上 .alipay.com 域名、samesite: none、secure: true（跨域 cookie 要求） 然后回复确认
"getBucUserId"	从 Cookie 获取 userId 并返回给父页面
"storage"	调用模块 17 处理 localStorage 操作（get/set）

1.4 页面加载完成时通知父页面：

window.onload = function(){
    var e = i.default.get("userId", {domain:".alipay.com"});
    r("iframOnload"); // 通知父页面已加载
    r("getBucUserId", e || null); // 返回当前 userId
}

      使用 r(type, content) 发送消息给父窗口：postMessage(JSON.stringify({type, content}), "*")

2. 模块 8（日志工具）：`8:function(e,t)`

      提供安全的日志输出封装，避免 console 不存在时报错。

t.default = {
    log:   console.log.bind(console),
    info:  console.info.bind(console),
    warn:  console.warn.bind(console),
    error: console.error.bind(console)
};

      防止直接访问 console 导致错误。

3. 模块 17（localStorage 桥接）：`17:function(e,t,n)`

      处理父页面对 localStorage 的读写请求。

t.default = function(e){
    var {action, key, value} = e;
    if ("set" === action) localStorage.setItem(key, value);
    if ("get" === action) localStorage.getItem(key);
}

      通过 postMessage 回传结果，实现跨域安全访问 localStorage。

      注意：由于 iframe 中的 localStorage 是隔离的，必须通过这种桥接方式由子帧代为操作。

4. 模块 18（Cookie 操作）：`18:function(e,t,n)`

      引入了一个轻量级的 Cookie 库（类似 js-cookie），支持：

• Cookies.set(key, value, { domain: '.alipay.com', secure: true, samesite: 'none' })
• Cookies.get(key)
• 支持 JSON 自动序列化/反序列化

      用于在 .alipay.com 域下持久化保存 userId。

三、通信机制总结

      子页面（iframe）与父页面通过 postMessage 实现跨域通信：

消息方向	类型	内容说明
Parent → Child	setBucUserId	设置用户 ID
Parent → Child	getBucUserId	请求获取用户 ID
Parent → Child	storage	请求读写 localStorage
Child → Parent	getBucUserId	返回用户 ID
Child → Parent	iframOnload	通知 iframe 已加载
Child → Parent	getStorage / setStorage	localStorage 操作结果

四、安全与限制

• 只有当 window.parent !== window（即运行在 iframe 中）或 __testMode__ 存在时才启用功能
• 否则打印警告："DO NOT OPEN ME DIRECTLY!"
• 所有 postMessage 发送的数据都 JSON.stringify
• 接收消息时有 try/catch 防止解析失败崩溃
• Cookie 设置要求 secure: true 和 samesite: none，符合现代浏览器跨站 Cookie 规范

五、用途场景（推测）

      这个脚本很可能是 **支付宝（Alipay）体系中的某个嵌入式 iframe 组件**，比如：

• 登录态同步组件
• 用户身份桥接（SSO）
• 跨域数据共享中间层
• 嵌入在第三方页面中的支付宝服务 iframe

      作用是：

      让父页面（可能是合作方网站）能安全地与支付宝域名下的 iframe 通信，获取用户登录状态（bucUserId），同时遵守浏览器的同源策略和 Cookie 安全策略。

六、总结：这段 JS 是做什么的？

      这是一个运行在 alipay.com 域名下 iframe 中的通信桥接脚本，用于：

1. 接收父页面发送的指令（通过 postMessage）
2. 管理用户 ID（userId）的 Cookie 存储（跨域兼容）
3. 提供 localStorage 的代理访问
4. 向父页面回传用户信息或操作结果
5. 防止被直接打开，确保只在 iframe 中运行

      目标：实现跨域身份传递与安全数据交互，服务于支付宝生态的嵌入式集成。

七、补充建议

      如果你在调试这类代码，注意：

• 开启 window.__testMode__ = true; 可以绕过“不能直接打开”的限制
• 需要在 HTTPS 环境下才能设置 secure: true 的 Cookie
• 现代浏览器对 samesite=none + secure 有严格要求