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

Question

I have installed the template from Electron-vue and I'm experiencing an issue with specific websites. These websites work on Chrome and Edge, yet, fail to completely load in webview.

The following example is the whole setup of the view. The console of this show that Local Storage, Session Storage and IndexedDB only have an entry for the website faselhd but have no data inside. The Cookies has an entry for the website with this type of data fcuid

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

As far as I understand, there is an issue saving the session of the website and it's working correctly on the normal browsers but cannot save the session in the webview.

I have tried using this policy in my index.ejs, but had no luck.

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

Expected: The website loads and shows the content.

Currently: The website keeps refreshing because the session cannot be saved.

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

You're using the default template electron-vue which it uses a very old Electron 2.0.1 and that is Chrome 61, Node 8.9.3, V8 6.1.534.41 which is quite outdated to properly support Local Storage and Session Storage. You need to update Electron to a newer version.

To your existing project

1. Update electron to 8.1.x by running yarn add electron (this will update electron to latest 8.1.1)
2. Open .electron-vue/webpack.renderer.config.js and at line 115 change HtmlWebpackPlugin configuration object to this:

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
}),

3. Open src/main/index.js and update/add BrowserWindow webPreferences options like this:

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

4. Add a webview to your renderer. I had to set <webview src="..."> insted of binding <webview :src="..."> like this:

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

Now run the app using yarn dev and you'll be able to see the the web page properly.