# 浏览器跨域 SecurityError 问题排查与修复指南
> **适用场景**：打开 WMS 系统页面后，控制台出现 `SecurityError: Failed to read a named property ‘…’ from ‘Window’: Blocked a frame with origin “https://wms.hlktech.com” from accessing a cross-origin frame.`
-–
## 1. 问题现象
| 表现 | 说明 |
|------|------|
| 控制台报 SecurityError | `Blocked a frame with origin “…” from accessing a cross-origin frame` |
| 弹窗页面功能异常 | 补单、新增、编辑等弹窗表单可能无法正常提交或关闭 |
| 不同电脑表现不一致 | 有些电脑正常，有些异常 |
| 同台电脑无痕模式正常 | Edge 无痕模式下默认禁用扩展，所以正常 |
**典型错误日志：**
```
SecurityError: Failed to read a named property ‘name’ from ‘Window’:
Blocked a frame with origin “https://wms.hlktech.com” from accessing a cross-origin frame.
at HTMLDocument.<anonymous> (layui.js:1:1980)
at Object.themeRender (admin.js:189:15)
SecurityError: Failed to read a named property ‘layui’ from ‘Window’:
Blocked a frame with origin “https://wms.hlktech.com” from accessing a cross-origin frame.
```
-–
## 2. 根因分析
### 2.1 直接原因
某些浏览器扩展（广告拦截器、翻译工具、密码管理器、安全软件等）会向页面注入**隐藏的跨域 iframe**。layui 框架在初始化时会遍历 `window.frames` 来管理多标签页，当遍历到这些注入的跨域 iframe 时，同源策略阻止访问，抛出 `SecurityError`。
### 2.2 为什么同台电脑无痕模式正常
Edge 浏览器的**无痕模式（InPrivate）默认禁用所有扩展**，不会有扩展注入的跨域 iframe，因此不会触发错误。
### 2.3 常见问题扩展
| 类型 | 举例 |
|------|------|
| 广告拦截器 | AdBlock、uBlock Origin、AdGuard |
| 翻译工具 | Google 翻译、有道翻译、沙拉查词 |
| 密码管理器 | LastPass、1Password、Bitwarden |
| 安全软件 | 360 网页防护、腾讯电脑管家 |
| 脚本管理器 | Tampermonkey（油猴） |
| VPN/代理 | 各类 VPN 扩展 |
-–
## 3. 复现方法
如果你自己的电脑没有这个问题，可以按以下方式模拟复现：
在 WMS 系统的任意页面打开浏览器控制台，执行：
```javascript
// 模拟浏览器扩展注入一个跨域 iframe
var fakeIframe = document.createElement(‘iframe’);
fakeIframe.src = ‘https://www.baidu.com’;
fakeIframe.style.display = ‘none’;
fakeIframe.name = ‘fake-extension’;
document.body.appendChild(fakeIframe);
console.log(‘已注入跨域 iframe’);
```
然后刷新页面，即可在控制台看到 SecurityError。
-–
## 4. 解决方案
### 4.1 方案一：用户侧（临时）
**找到并禁用问题扩展：**
1. 打开 Edge，地址栏输入 `edge://extensions/`
2. 逐个禁用扩展，每禁用一个就刷新页面测试
3. 找到问题扩展后，在该网站设置白名单或永久禁用
### 4.2 方案二：代码层防御（已采用）
在 Admin Area 的共享布局文件 `Areas/Admin/Views/Shared/_Layout.cshtml` 的 `` **最顶部**（所有其他脚本之前）添加全局错误拦截：
```html
<!-- ===== 必须放在所有脚本的最前面 ===== -->
<script>
// 抑制浏览器扩展注入的跨域 iframe 导致的 SecurityError
window.addEventListener('error', function(e) {
if (e instanceof SecurityError ||
(e.error && e.error.name === 'SecurityError') ||
(e.message && e.message.indexOf('cross-origin') !== -1) ||
(e.message && e.message.indexOf('cross origin') !== -1)) {
// 这些错误来自浏览器扩展注入的隐藏 iframe，不影响业务功能
e.preventDefault();
e.stopPropagation();
return true;
}
}, true);
</script>
<!-- ===== 以上 ===== -->
<!-- 后续才是正常的 meta、title、css 引用等 -->
<meta charset="utf-8">
...
```
**关键点：**
| 要点 | 说明 |
|------|------|
| 位置 | **必须**是 `` 内**第一个** `` 标签 |
| `addEventListener` 第三个参数 | 必须是 `true`（捕获阶段），在事件冒泡前拦截 |
| 不会隐藏真正的 Bug | 只拦截 `SecurityError`，不影响业务逻辑错误 |
**原理：**
```
正常流程：扩展注入跨域 iframe → layui 遍历 frames → SecurityError 抛出 → 控制台报错
修复之后：扩展注入跨域 iframe → layui 遍历 frames → SecurityError 抛出 → 被全局拦截器吞掉 → 控制台干净
```
-–
## 5. 排查技巧
### 5.1 查看当前页面有多少 frame
在控制台执行：
```javascript
for (var i = 0; i < window.frames.length; i++) {
try {
console.log('Frame ' + i + ':', window.frames\[i\].name, window.frames\[i\].location.href);
} catch (e) {
console.warn('Frame ' + i + ' 跨域，无法访问 ← 这就是扩展注入的');
}
}
```
标记为"跨域，无法访问"的 frame 就是扩展注入的。
### 5.2 确认是否是扩展导致的
- **方法一**：无痕模式打开 → 正常 → 确认是扩展问题
- **方法二**：用 `edge://extensions/` 逐个禁用 → 找到问题扩展
-–
## 6. FAQ
**Q: 加了这段代码会不会隐藏真正的跨域 Bug？**
A: 不会。这段代码只拦截 `SecurityError` 类型的错误，过滤条件是错误消息中包含 `cross-origin` 或 `cross origin`。真正的业务逻辑错误（如 `TypeError`、`ReferenceError` 等）不会被拦截。
**Q: 为什么不直接修改 layui.js？**
A: layui.js 是第三方压缩库，修改维护成本高。在布局页面加一层全局拦截是最小改动、最大覆盖的方案。
**Q: 这个修复需要覆盖哪些页面？**
A: 只要在 Admin Area 的共享布局加上即可，所有使用该布局的管理后台页面都会自动生效。
-–
> **总结一句话**：浏览器扩展偷偷往页面里塞了跨域 iframe，layui 遍历时碰了它导致报错。我们在页面最前面加了一个"安全网"，把这类无害的错误拦截掉，页面恢复正常。