search

Kocal / vue-web-extension

🛠️ A Vue CLI 3+ preset (previously a Vue CLI 2 boilerplate) for quickly starting a web extension with Vue, Babel, ESLint and more!
https://vue-web-extension.netlify.app/
MIT License
1.58k stars 167 forks source link

Production output contains Function constructor #658

Closed t-miller closed 3 years ago

t-miller commented 3 years ago

Describe the bug After running yarn build, the generated files still contain the Function() constructor. Upon trying to upload an extension to the Firefox store, the linter states The Function constructor is eval. in both content-script.js and background.js. I have kept the OOTB vue.config.js and babel.config.js.

To Reproduce Steps to reproduce the behavior:

  1. Fix background.js to point to js/content-script.js
  2. Run yarn build

Expected behavior The output files to be free of eval() and Function() to comply with Mozilla's CSP.

Desktop (please complete the following information):

Kocal commented 3 years ago

Hi,

This is maybe due to the usage of the Vue runtime compiler, see https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only, but the option runtimecompiler is disabled by default.

However, this time it looks like it's not coming from Vue but from Webpack itself: Capture d’écran de 2021-01-23 22-22-46

I remember that I fixed the same issue previously in version 1.x, see #398. In our case with version 2.x, we must configure Vue-CLI/Webpack like this: 


// vue.config.js

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        global: 'window',
      }),
    ],
  },
  // ...
}
t-miller commented 3 years ago

Yeah, I tried setting Vue to evaluating to the runtime.esm version to no avail. I'll give your webpack config a shot, and let you know, thanks!

Kocal commented 3 years ago

I've opened a PR to fix the issue https://github.com/adambullmer/vue-cli-plugin-browser-extension/pull/110

If this get merged, you will have to update vue-cli-plugin-browser-extension and it should be okay.

t-miller commented 3 years ago

Hey @Kocal - that didn't appear to fix the issue for me. I've created a test repo and attached the build output after adding the webpack config. I still get the following The Function constructor is eval. warnings when I upload to the Firefox Developer Hub.

image

Kocal commented 3 years ago

Hey, and thanks for your repository!

I've analyzed the generated js/background.js and its sourcemap with source-map-visualization (sorry for the Gist, but the link is sooooo long to be used in a comment or with git.io :smile:) and this is what I found:

I suppose the other issues for js/content-script.js and js/chunk-vendors.[hash].js are the same.

Since it's coming from core-js itself (see related issue https://github.com/zloirock/core-js/issues/86), I don't think I can do something about that... Maybe use a Webpack hook to replace || new Function('return this')() by something else while/after transpiling files... :shrug:

t-miller commented 3 years ago

I appreciate the analysis! I'll see what I can do, thanks!

markon1 commented 3 years ago

@t-miller Hey man, did you find a way around this?

jsonwu5 commented 3 years ago

This problem still exists. Is there a solution?

t-miller commented 3 years ago

I never found a solution sadly

Kocal commented 3 years ago

What about:

Maybe use a Webpack hook to replace || new Function('return this')() by something else while/after transpiling files... 🤷

from https://github.com/Kocal/vue-web-extension/issues/658#issuecomment-767101336?