React Electron App - React宣传单内容安全策略错误

6psbrbz9 于 2022-12-08 发布在 Electron

关注(0)|答案(1)|浏览(139)

我目前正在创建一个电子应用程序，我想在其中使用React传单的Map功能。这需要使用外部网址的抛出CSP错误，当我试图使用他们。
我在leaftlet中使用的代码如下所示：

<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中i具有 meta标签：

<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“用作回退。
如果有什么我是从我的代码丢失请让我知道，我已经有一段时间的麻烦了。谢谢你的任何帮助！

electron

来源：https://stackoverflow.com/questions/71705751/react-electron-app-react-leaftlet-content-security-policy-errors

1条答案

按热度按时间

ruarlubt1#

我已经找到了我的问题的答案！
事实证明，在Electron中设置了一个默认CSP，这似乎会干扰在index.html meta标记中设置它。
要解决此问题，请改为在package.json中转到plugins部分并添加一个devContentSecurityPolicy字段，CSP将输入到该字段中，如下所示：
"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"
          }]
        }
      }
    ]
  ]

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

赞(0）回复(0）举报 2022-12-08

我来回答

React Electron App - React宣传单内容安全策略错误

1条答案

相关问题

热门标签

最新问答