谷歌浏览器LNA权限开启后的潜在问题

使用者痛点直击

你是否遇到过突然无法连接本地WebSocket或API服务？浏览器控制台只显示模糊的黄色警告？当使用者升级到Chrome 142+后这些问题可能源自新增的本地网络访问权限限制！这不仅影响开发者调试，更直接导致使用者功能中断，带来极差体验。

再看事件背景，LNA权限带来的突发问题

某日发现一个使用WebSocket连接localhost的JS插件突然失效。火狐/Edge正常运行，而Chrome 142+使用者却看到这样的警告：WebSocket connection to 'ws://./' failed: WebSocket is closed before connection is established

关键发现：Chrome在140版本开始逐步推出LNA权限机制。默认阻止fetch/ajax/WebSocket等跨域请求访问本地网络。这代表着即使是开发环境中的localhost请求也会被拦截！

详细说明LNA权限机制

什么是LNA权限？为什么存在，

• 主要定义：谷歌引入的新安全机制，要求网页在访问本地网络资源前必须显式申请使用者授权。没有授权则请求被拦截，
• 官方说法："防止CSRF攻击"和"降低指纹识别风险"——但实际导致的是正常开发流程中断！
• 受影响范围：
• .com→192.168..
• .com→localhost
• .com→fe80::/
• .com→fc00::/
• .com→::ffff:/

注意！未来可能 至所有跨源请求！

哪些场景会被影响？你中枪了吗，

⚠️ fetch new WebSocket

场景类型	Affected		Unaffected
HTTP/HTTPS页面	通过CORS允许	相同协议下

Chrome 140+

混合内容检查例外情况:

• 主机名为纯IP字面值
• 主机名为.local域名
• fetch配置含targetAddressSpace:"local"

仅适用于Chromium-based browsers版本≥

• 检查控制台是否出现黄色警告类似 "Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE.NotAllowedError" "WebSocket connection failed" • 查看浏览器版本: - Chrome ≥ 140?- Edge ≥，说起来，- Brave ≥?
• 获取授权:

function ensureLoopbackPermission {
return navigator.permissions.query
.n(result => {
if{
// 自动触发授权弹窗!return fetch;}
})，}
ensureLoopbackPermission.n(res => {
if{
alert;// 引导图文教程...
}
});

• 手动修改标志位: chrome://flags/#local-network-access-check 选择 → • 永久方法:

// 添加到manifest.json
{
"permissions":,"hosts":
} 

*注意!上述方法仅适用于 程序,普通web页面需引导使用者操作.*