Electron 16因安全策略无法加载jQuery该如何解决？

1. 先修正Content-Security-Policy（CSP）配置 #

你当前的CSP规则script-src 'self'只允许加载同源本地脚本，所以加载外部CDN的jQuery会直接被拦截，需要根据你的加载方式调整规则：

• 如果继续使用CDN加载jQuery，需要把CDN域名加入CSP白名单，同时可保留完整性校验对应的哈希值提升安全性：

<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://code.jquery.com 'sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=';">

• 如果只用本地加载jQuery，保留原script-src 'self'配置即可，无需新增外部域名。

2. 调整Electron主进程的BrowserWindow配置 #

Electron 16默认开启上下文隔离、关闭Node.js集成，所以渲染进程默认无法使用require方法，也无法直接将模块挂载到全局window对象上，可根据使用场景选择对应配置方案：

方案A：需要在渲染进程使用Node.js能力（适配你现有的require加载逻辑） #

创建BrowserWindow时修改webPreferences配置：

const mainWindow = new BrowserWindow({
  // 其他原有配置保留
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false,
  }
})

配置生效后，你原来的本地加载代码即可正常运行：

<script>window.$ = window.jQuery = require('./libraries/jQuery/jquery.min.js');</script>

方案B：不开启Node.js集成（安全性更高，推荐） #

无需修改webPreferences默认配置，直接用常规script标签引入本地/CDN的jQuery即可：

• 本地引入示例：

<script src="./libraries/jQuery/jquery.min.js"></script>

• CDN引入直接使用你之前的代码，搭配第一步调整后的CSP即可正常生效。

3. 额外排查点 #

如果调整配置后仍然报错，检查本地jQuery文件的相对路径是否正确，相对路径是相对于当前HTML文件的存放位置，而非项目根目录。

内容的提问来源于stack exchange，提问作者notexactly