Electron渲染进程默认阻止远程CSS加载，因webSecurity:true拦截非同源样式请求；推荐通过session.webRequest.onBeforeSendHeaders配合CSP的style-src显式放行指定域名，次选为特定窗口关闭webSecurity但须启用contextIsolation和sandbox；更安全方案是预下载CSS本地托管。
Electron 渲染进程默认阻止远程 CSS 加载
Electron 默认启用 webSecurity: true，会拦截所有非同源的 请求（包括 HTTPS CDN），控制台报错类似：Failed to load resource: net::ERR_BLOCKED_BY_CLIENT 或更常见的是 net::ERR_FAILED（实际由 CSP 或 webSecurity 触发）。这不是网络问题，而是 Electron 主动拦截。
绕过拦截的两种可行路径及其风险差异
不能简单关掉 webSecurity（主进程创建 BrowserWindow 时设为 false），那会让整个渲染进程失去 XSS 防护、不校验证书、允许任意跨域请求——对桌面应用是高危操作，尤其当页面加载用户可控内容时。
- ✅ 推荐：在主进程中显式声明允许的远程样式域名，通过
session.webRequest.onBeforeSendHeaders+Content-Security-Policy双重放行 - ⚠️ 次选：仅对特定
BrowserWindow关闭webSecurity，但必须同时设置contextIsolation: true和sandbox: true，并确保 HTML 中无内联样式/脚本、不拼接用户输入到 DOM
例如只允许 cdn.jsdelivr.net 的 CSS：
const { session } = require('electron')
session.defaultSession.webRequest.onBeforeSendHeaders((details, callback) => {
if (details.url.startsWith('https://cdn.jsdelivr.net/')) {
details.requestHeaders['User-Agent'] = 'ElectronApp/1.0'
}
callback({ cancel: false, requestHeaders: details.requestHeaders })
})
CSP 必须显式声明 style-src 才能生效
即使开了 webSecurity，若没配 CSP，远程 CSS 仍被拒绝。需在 HTML 的 中写死策略（不能靠 HTTP Header，因为本地文件协议 file:// 不走网络栈）：
<meta http-equiv="Content-Security-Policy" content="default-src 'self';
style-src 'self' https://cdn.jsdelivr.net https://unpkg.com;
font-src 'self' https:;">
注意点：
-
style-src必须包含'self'（否则本地也会失效） - 不允许通配符
https://*，必须写明具体域名（cdn.jsdelivr.net≠jsdelivr.net） - 如果用了
unsafe-inline，等于放弃大部分样式防护，不推荐
更安全的替代方案：预下载 + 本地托管
对稳定性、安全性和离线支持要求高的场景，应避免运行时加载远程 CSS。可用构建脚本提前拉取：
npx curl -s "https://cdn.jsdelivr.net/npm/tailwindcss@3.4/dist/tailwind.min.css" -o src/assets/tailwind.css
然后在 HTML 中引用：
<link rel="stylesheet" href="./assets/tailwind.css">
这样既规避了 CSP/webSecurity 纠缠，又防止 CDN 下线或篡改（比如 unpkg 被投毒事件曾真实发生过）。Electron 应用本质是打包分发的，远程资源不该是运行时依赖。
真正难处理的是那些带版本号且频繁更新的 UI 库——这时建议用 preload.js 动态注入 hash 校验逻辑，而不是盲目信任 CDN 响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
