Electron- vue с веб-просмотром не может обойти / получить доступ к веб-сайтам на основе Cloudflare - PullRequest
Новая
       50

Electron- vue с веб-просмотром не может обойти / получить доступ к веб-сайтам на основе Cloudflare

1 голос
/ 18 марта 2020

Я установил шаблон от Electron- vue, и у меня возникла проблема с указанными c веб-сайтами. Эти веб-сайты работают на 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'">

Ожидается: веб-сайт загружается и показывает содержимое.

В настоящее время: Сайт обновляется, потому что сеанс не может быть сохранен.

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"
  }
}

1 Ответ

1 голос
/ 22 марта 2020

Вы используете шаблон по умолчанию electron-vue, который использует очень старый Electron 2.0.1 и это Chrome 61, Node 8.9.3, V8 6.1.534.41, который довольно устарел для правильной поддержки Local Storage и Session Storage. Вам необходимо обновить Electron до более новой версии.

В существующий проект

  1. Обновите electron до 8.1.x, запустив yarn add electron (, это обновит электрон до последней 8.1.1)
  2. Открыть .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 и обновить / добавить BrowserWindow webPreferences опции, подобные этой: 
mainWindow = new BrowserWindow({
  height: 563,
  useContentSize: true,
  width: 1000,
  // Add these webPreferences options
  webPreferences: {
    nodeIntegration: true,
    webviewTag: true
  }
})
Добавьте webview к вашему рендереру. Мне пришлось установить <webview src="..."> insted of binding <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, и вы сможете правильно видеть веб-страницу.

...