Electron 渲染进程默认拦截远程资源加载，因 webSecurity 和 CSP 双重限制；安全方案是顶部 meta 声明 style-src 'self' https: 或用 preload.js 动态 fetch 注入 CSS。
Electron 渲染进程默认禁用远程资源加载，直接写 会失败——不是路径问题，是 Chromium 主动拦截，除非你显式放开限制。
为什么
Electron 默认启用 webSecurity: true（等价于 Chromium 的 --unsafely-treat-insecure-origin-as-secure 未开启），对所有非同源的 file:// 页面发起的跨域请求（包括 CSS、JS、字体）一律拦截。控制台只报 “Blocked loading resource from…”，不显示 404，也不触发 network 面板请求。
- 即使你在
BrowserWindow配置里设了webPreferences: { webSecurity: false }，也只是解除协议级拦截，仍受Content-Security-Policy约束 -
loadFile()加载的本地 HTML 天然属于file://上下文，它和https://完全不同源，CSP 默认禁止style-src包含https: - 开发时偶尔“能用”，往往是因为 DevTools 手动刷新或缓存残留，不是策略生效
安全引入在线 CSS 的唯一可靠方式：改 Content-Security-Policy
必须在 HTML 的 中声明允许远程样式源，且不能依赖 meta 标签（Electron 忽略它），只能靠响应头或 ——但后者仅在 loadURL() 场景下部分生效，最稳的是在 index.html 顶部用 显式写死：
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' https:; font-src 'self' https:;">
-
style-src 'self' https:允许本地文件 + 任意 HTTPS 样式，不推荐写style-src *（太宽泛，有 XSS 风险） - 如果只用某一个 CDN，写死域名更安全：
style-src 'self' https://cdn.jsdelivr.net; - 若同时加载 Google Fonts，需额外加
font-src，否则 @font-face 失败 - 该
必须在所有之前，且不能放在或动态插入
替代方案：用 preload.js 动态注入远程 CSS 字符串
绕过 CSP 和协议限制，适合需要运行时切换主题、或只加载少量远程样式（如图标库）的场景：
- 确保
BrowserWindow启用了preload脚本，并保持contextIsolation: true - 在 preload.js 中用
fetch()拉取 CSS 内容，再创建标签注入：
document.addEventListener('DOMContentLoaded', async () => {
try {
const res = await fetch('https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css');
const css = await res.text();
const style = document.createElement('style');
style.textContent = css;
document.head.appendChild(style);
} catch (e) {
console.warn('Failed to load remote CSS:', e);
}
});
- 注意：
fetch()仍受 CORS 限制，确保目标服务返回Access-Control-Allow-Origin: *（CDN 通常支持） - 大体积 CSS 建议加
.trim()去 BOM，避免解析异常 - 不要在 preload.js 顶层执行，必须等
DOMContentLoaded，否则document.head不存在
绝对要避开的坑
别碰 webSecurity: false + nodeIntegration: true 组合——这等于把渲染进程变成远程代码执行温床；也别用 @import url(https://...) 写在本地 CSS 里，它由浏览器解析，不受 preload 控制，且同样受 CSP 和 CORS 双重拦截。
真正难的不是“怎么加一行 link”，而是理解 Electron 渲染进程的安全边界在哪——一旦跨出 file://，就必须主动协商权限，而不是指望它自动放行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
