带有 webview 的 electron-vue 不能 bypass/access Cloudflare 支持的网站

Question

我已经从 Electron-vue 安装了模板，但我遇到了特定网站的问题。这些网站在 Chrome 和 Edge 上运行，但无法在 webview 中完全加载。

下面的例子是整个视图的设置。此控制台显示 Local Storage、Session Storage 和 IndexedDB 只有网站 faselhd 的条目，但内部没有数据。 Cookies 有一个具有此类数据的网站条目 fcuid

<webview id="webview_custom" :src="https://www.faselhd.co/" style="height: 100%"></webview>

据我了解，保存网站会话存在问题，它在普通浏览器上工作正常，但无法在 webview 中保存会话。

我曾尝试在 index.ejs 中使用此政策，但没有成功。

<meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-inline' 'unsafe-eval'">

预期：网站加载并显示内容。

目前：由于session无法保存，网站不断刷新

package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "author": "author",
  "description": "description",
  "license": null,
  "main": "./dist/electron/main.js",
  "scripts": {
    "build": "node .electron-vue/build.js && electron-builder",
    "build:dir": "node .electron-vue/build.js && electron-builder --dir",
    "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
    "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
    "dev": "node .electron-vue/dev-runner.js",
    "pack": "npm run pack:main && npm run pack:renderer",
    "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
    "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
    "postinstall": ""
  },
  "build": {
    "productName": "app-electron",
    "appId": "com.username.app_electron",
    "directories": {
      "output": "build"
    },
    "files": [
      "dist/electron/**/*"
    ],
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "build/icons/icon.icns"
    },
    "win": {
      "icon": "build/icons/icon.ico"
    },
    "linux": {
      "icon": "build/icons"
    }
  },
  "dependencies": {
    "axios": "^0.18.0",
    "electron-context-menu": "^0.16.0",
    "vue": "^2.5.16",
    "vue-electron": "^1.0.6",
    "vue-router": "^3.0.1",
    "vue-tabs-chrome": "^0.5.1",
    "vuetify": "^2.2.17",
    "vuetify-loader": "^1.4.3",
    "vuex": "^3.0.1",
    "vuex-electron": "^1.0.0"
  },
  "devDependencies": {
    "ajv": "^6.5.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-minify-webpack-plugin": "^0.3.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.26.0",
    "cfonts": "^2.1.2",
    "chalk": "^2.4.1",
    "copy-webpack-plugin": "^5.1.1",
    "cross-env": "^5.1.6",
    "css-loader": "^0.28.11",
    "deepmerge": "^4.2.2",
    "del": "^3.0.0",
    "devtron": "^1.4.0",
    "electron": "^2.0.4",
    "electron-builder": "^20.19.2",
    "electron-debug": "^1.5.0",
    "electron-devtools-installer": "^2.2.4",
    "fibers": "^4.0.2",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "^3.4.1",
    "lodash": "^4.17.15",
    "mini-css-extract-plugin": "0.4.0",
    "multispinner": "^0.2.1",
    "node-loader": "^0.6.0",
    "node-sass": "^4.9.2",
    "sass": "^1.26.3",
    "sass-loader": "^7.3.1",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^15.2.4",
    "vue-style-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.15.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4",
    "webpack-hot-middleware": "^2.22.2",
    "webpack-merge": "^4.1.3"
  }
}

Answer 1

您正在使用默认模板 electron-vue，它使用非常古老的 Electron 2.0.1，即 Chrome 61, Node 8.9.3, V8 6.1.534.41，它已经过时，无法正确支持 Local Storage 并且Session Storage。您需要将 Electron 更新到更新的版本。

到您现有的项目

通过运行ning yarn add electron 将 electron 更新为 8.1.x （这会将电子更新到最新的 8.1.1)
打开 .electron-vue/webpack.renderer.config.js 并在第 115 行将 HtmlWebpackPlugin 配置对象更改为：

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: path.resolve(__dirname, '../src/index.ejs'),
  templateParameters(compilation, assets, options) {
    return {
      compilation: compilation,
      webpack: compilation.getStats().toJson(),
      webpackConfig: compilation.options,
      htmlWebpackPlugin: {
        files: assets,
        options: options
      },
      process,
    };
  },
  minify: {
    collapseWhitespace: true,
    removeAttributeQuotes: true,
    removeComments: true
  },
  nodeModules: false
}),

打开src/main/index.js和update/addBrowserWindowwebPreferences这样的选项：

mainWindow = new BrowserWindow({
  height: 563,
  useContentSize: true,
  width: 1000,
  // Add these webPreferences options
  webPreferences: {
    nodeIntegration: true,
    webviewTag: true
  }
})

向渲染器添加 webview。我必须像这样设置 <webview src="..."> 而不是绑定 <webview :src="...">：

<template>
  <div id="app">
    <!-- <router-view></router-view> -->
    <webview id="webview_custom" src="https://www.faselhd.co/" style="height: 100%"></webview>
  </div>
</template>

<script>
  export default {
    name: 'vue-electron-webview2'
  }
</script>

<style>
  /* CSS */
  html, body, #app { height: 100% }
</style>

现在运行使用 yarn dev 的应用程序，您将能够正常查看网页。

带有 webview 的 electron-vue 不能 bypass/access Cloudflare 支持的网站

electron-vue with webview cannot bypass/access Cloudflare-powered websites

webview

chromium

electron

electron-vue