React Electron App - React Leaflet 内容安全策略错误答案

【问题标题】：React Electron App - React Leaftlet Content Security Policy errorsReact Electron App - React Leaflet 内容安全策略错误
【发布时间】：2022-07-20 03:28:57
【问题描述】：

我目前正在创建一个 Electron 应用程序，我想在其中使用 react 传单的地图功能。这需要使用外部 url，当我尝试使用它们时会引发 CSP 错误。

我用于传单的代码如下：

<MapContainer id="MapViewElement" center={[51.505, -0.09]} zoom={13}>
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={[51.505, -0.09]}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>

在index.js 我有元标记：

<meta
  charset="UTF-8"
  http-equiv="Content-Security-Policy"
  content="default-src *;
  img-src https://*.tile.openstreetmap.org/*.png data: https://*.tile.openstreetmap.org/*.png ; script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
  style-src  * 'unsafe-inline' *; child-src *"
/>

运行它会引发一些问题，主要是不同的版本

拒绝加载图片“https://c.tile.openstreetmap.org/13/4094/2724.png”，因为它违反了以下内容安全策略指令：“default-src 'self' 'unsafe-inline ' 数据：”。请注意，'img-src' 没有显式设置，因此 'default-src' 用作备用。

如果我的代码中缺少某些内容，请务必告诉我，我已经有一段时间遇到这个问题了。感谢您的帮助！

【问题讨论】：

标签： reactjs electron content-security-policy react-leaflet

【解决方案1】：

我找到了问题的答案！

事实证明，在 Electron 中设置了一个默认 CSP，这似乎会干扰在 index.html 元标记中设置它。

要解决此问题，请改为在 package.json 中转到 plugins 部分并添加将输入 CSP 的 devContentSecurityPolicy 字段，例如：

"devContentSecurityPolicy: default-src 'self' https://xxxx 'unsafe-inline' etc.

为了让我使用 react 传单的 MapContainer 为我工作：

"plugins": [
    [
      "@electron-forge/plugin-webpack",
      {
        "mainConfig": "./webpack.main.config.js",
        "devContentSecurityPolicy": "default-src 'self' https://unpkg.com/leaflet@1.8.0/dist/leaflet.js 'unsafe-inline'; style-src-elem 'self' https://unpkg.com/leaflet@1.8.0/dist/leaflet.css 'unsafe-inline';script-src-elem 'self' https://unpkg.com/leaflet@1.8.0/dist/leaflet.js 'unsafe-inline'; img-src 'self' * data:;",
        "renderer": {
          "config": "./webpack.renderer.config.js",
          "entryPoints": [{
            "html": "./src/index.html",
            "js": "./src/renderer.js",
            "name": "main_window"
          }]
        }
      }
    ]
  ]

如果他们偶然发现这个问题，我希望这可以帮助其他人！

【讨论】：

【解决方案2】：

我也遇到了同样的问题，可惜这个方法没用。

【讨论】：