Electron 应用程序中 定义Web 内容安全策略（CSP）

23 min read

在 Electron 应用程序中定义 Web 内容安全策略（CSP），你可以使用主进程或渲染进程中的相应 API。

在主进程中，你可以在创建 BrowserWindow 对象时指定 webPreferences 属性，并设置它的 webSecurity 和 allowRestrictedElectronFeatures 属性。示例代码如下：

const { app, BrowserWindow } = require('electron');

app.on('ready', () => {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      webSecurity: true, // 启用 Web 安全
      allowRestrictedElectronFeatures: false, // 禁止受限 Electron 功能
      // 在这里定义其他的 webPreferences 属性
    }
  });

  // 其他的窗口和应用程序逻辑代码
});

在渲染进程中，你可以在页面的 <head> 标签中使用 <meta> 元素定义 CSP。示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Security-Policy" content="policy">
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

在 content 属性中，你可以定义你要使用的 CSP 规则。例如，要允许所有来源的资源加载，你可以使用如下的 CSP：

<meta http-equiv="Content-Security-Policy" content="default-src *;">

你还可以使用其他 CSP 指令来限制不同来源的资源加载，例如 script-src 指令用于限制 JavaScript 脚本的使用，img-src 指令用于限制图片的加载等等。详细的 CSP 指令列表和使用方法可以参考 Mozilla 开发者网络（MDN）的文档：Content Security Policy (CSP)

请注意，强制使用 CSP 可能会对应用程序中的某些功能造成影响，因此在定义 CSP 时需要谨慎考虑。