ContentSecurityPolicy 阻止 Electron 中的获取请求

Posted 2023-03-22

【中文标题】ContentSecurityPolicy 阻止 Electron 中的获取请求

【英文标题】：ContentSecurityPolicy Preventing fetch request in Electron

【发布时间】：2021-12-15 19:32:03

【问题描述】：

我正在尝试构建一个发出 api 请求的电子应用程序，但是当我进行 api 调用时，我收到以下错误：

拒绝连接到“”，因为它违反了以下内容安全策略指令：“default-src 'self' 'unsafe-inline' data:”。请注意，'connect-src' 没有显式设置，因此 'default-src' 用作备用。

拒绝连接到“”，因为它违反了文档的内容安全政策。

我用来发出请求的代码是

const getContent = async (url) => await fetch(url)

我尝试添加一个元标记以允许 unsafe-eval 并在 BrowserWindow 中将 webSecurity 设置为 false，但似乎都没有任何效果。我还尝试使用 axios 发出请求并得到相同的响应。尽管看到了几个人们从 Electron 内部发出 api 请求的例子，但我无法在互联网上找到任何其他有关此问题的实例。

【问题讨论】：

由于在添加 <meta> 之前遇到了 CSP 问题，因此您已经通过元标记或 HTTP 标头发布了一些 CSP（here 是如何检查的手册）。因此添加<meta CSP> 将无济于事，它只是添加了第二个 CSP，而第一个 CSP 仍会继续阻塞。您必须找到第一个 CSP 的发布位置，并将被阻止的 Url 中的域添加到其中。

【参考方案1】：

如果您使用电子锻造，此资源将很有帮助。 https://githubmemory.com/repo/electron-userland/electron-forge/issues/2331

转到package.json，查找配置，然后插入插件

"devContentSecurityPolicy":"default-src * self blob: data: gap:; style-src * self 'unsafe-inline' blob: data: gap:; script-src * 'self' 'unsafe-eval' 'unsafe-inline' blob: data: gap:; object-src * 'self' blob: data: gap:; img-src * self 'unsafe-inline' blob: data: gap:; connect-src self * 'unsafe-inline' blob: data: gap:; frame-src * self blob: data: gap:;"

如果您仍然感到困惑，这是我的 package.json 代码

 
  "name": "x",
  "productName": "x",
  "version": "1.0.0",
  "description": "My Electron application description",
  "main": ".webpack/main",
  "scripts": 
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish",
    "lint": "echo \"No linting configured\"",
  ,
  "keywords": [],
  "license": "MIT",
  "config": 
    "forge": 
      "packagerConfig": ,
      "makers": [
        
          "name": "@electron-forge/maker-squirrel",
          "config": 
            "name": "x"
          
        ,
        
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin"
          ]
        ,
        
          "name": "@electron-forge/maker-deb",
          "config": 
        ,
        
          "name": "@electron-forge/maker-rpm",
          "config": 
        
      ],
      "plugins": [
        [
          "@electron-forge/plugin-webpack",
          
            "devContentSecurityPolicy":"default-src * self blob: data: gap:; style-src * self 'unsafe-inline' blob: data: gap:; script-src * 'self' 'unsafe-eval' 'unsafe-inline' blob: data: gap:; object-src * 'self' blob: data: gap:; img-src * self 'unsafe-inline' blob: data: gap:; connect-src self * 'unsafe-inline' blob: data: gap:; frame-src * self blob: data: gap:;",
            "mainConfig": "./webpack.main.config.js",
            "renderer": 
              "config": "./webpack.renderer.config.js",
              "entryPoints": [
                
                  "html": "./public/index.html",
                  "js": "./public/renderer.js",
                  "name": "main_window"
                
              ]
            
          
        ]
      ]
    
  ,
  "devDependencies": 
    "@babel/core": "^7.15.5",
    "@babel/preset-react": "^7.14.5",
    "@electron-forge/cli": "^6.0.0-beta.60",
    "@electron-forge/maker-deb": "^6.0.0-beta.60",
    "@electron-forge/maker-rpm": "^6.0.0-beta.60",
    "@electron-forge/maker-squirrel": "^6.0.0-beta.60",
    "@electron-forge/maker-zip": "^6.0.0-beta.60",
    "@electron-forge/plugin-webpack": "6.0.0-beta.60",
    "@vercel/webpack-asset-relocator-loader": "1.7.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.0.0",
    "electron": "^15.3.1",
    "install": "^0.13.0",
    "node-loader": "^2.0.0",
    "npm": "^7.22.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "style-loader": "^3.0.0"
  ,
  "dependencies": 
    "@date-io/date-fns": "^1.3.13",
    "@date-io/moment": "^2.10.11",
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/pickers": "^4.0.0-alpha.12",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@wojtekmaj/react-daterange-picker": "^3.2.0",
    "@y0c/react-datepicker": "^1.0.4",
    "aes-js": "^3.1.2",
    "ag-grid-community": "^25.3.0",
    "ag-grid-react": "^25.3.0",
    "axios": "^0.21.1",
    "base-64": "^1.0.0",
    "bootstrap": "^4.6.0",
    "bootstrap-daterangepicker": "^3.1.0",
    "crypto-js": "^4.1.1",
    "date-fns": "^2.22.1",
    "electron-splashscreen": "^1.0.0",
    "electron-squirrel-startup": "^1.0.0",
    "hex64": "^0.4.0",
    "jquery": "^3.6.0",
    "lottie-react": "^2.1.0",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.32",
    "node-jsencrypt": "^1.0.0",
    "prop-types": "^15.7.2",
    "qrcode": "^1.4.4",
    "react-bootstrap-daterangepicker": "^7.0.0",
    "react-custom-scrollbars-2": "^4.4.0",
    "react-date-range": "^1.2.0",
    "react-dropdown-input": "^0.1.11",
    "react-geolocated": "^3.2.0",
    "react-live-clock": "^5.2.0",
    "react-lottie": "^1.2.3",
    "react-moment": "^1.1.1",
    "react-native-qrcode-svg": "^6.1.1",
    "react-native-svg": "^12.1.1",
    "react-otp-input": "^2.3.1",
    "react-qr-code": "^2.0.2",
    "react-responsive": "^8.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-scroll": "^1.8.3",
    "react-table": "^7.7.0",
    "react-to-print": "^2.13.0",
    "react-virtualized": "^9.22.3",
    "react-virtualized-auto-sizer": "^1.0.5",
    "react-window": "^1.8.6",
    "reactstrap": "^8.9.0",
    "rsuite": "^4.10.2",
    "systeminformation": "^5.8.7",
    "text-to-binary-converter": "^1.0.2",
    "web-vitals": "^1.0.1",
    "zustand": "^3.5.7"