Electron：Google 字体违反了内容安全政策

Question

我在 Electron 开发者控制台中收到一堆内容安全策略错误以添加 google 字体：

Refused to load the stylesheet 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.

我正在使用 electron-forge 的 React with TypeScript 样板。

Answer 1

最简单的方法可能是在模板的 header 中设置一个 Content-Security-Policy 元标记，如下所示：

<head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta 
        http-equiv="Content-Security-Policy" 
        content="default-src 'self'; 
          script-src 'self'; 
          font-src 'self' https://fonts.gstatic.com;
          style-src 'self' https://fonts.googleapis.com">
    <!-- ...other stuff... -->
</head>

此处提供有关如何使用这些工具的指南： https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#multiple_content_security_policies

我目前正处于电子的第一个小时，暂时没有反应，这就是我解决它的方式，我认为这就是你应该做的。

Electron：Google 字体违反了内容安全政策

Electron: Google Fonts violates Content Security Policy

electron

electron-forge