Die von Webpack kompilierte Chrome-Erweiterung löst den Fehler „unsafe-eval“ aus

Ich erhalte diesen Fehler, wenn ich meine Chrome-Erweiterung nach dem Kompilieren mit Webpack neu lade:

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".
    
    
at new Function (<anonymous>)
at evalExpression (compiler.js:33919)
at jitStatements (compiler.js:33937)
at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._interpretOrJit (compiler.js:34520)
at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileTemplate (compiler.js:34448)
at compiler.js:34347
at Set.forEach (<anonymous>)
at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileComponents (compiler.js:34347)
at compiler.js:34217
at Object.then (compiler.js:474)

Mein CSP gewährt die unsafe-eval Erlaubnis.

 "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

Wie kann ich die Verwendung von zulassen? eval() in meinem Code (weil Webpack dies verwendet, um Quellkarten zu generieren)?

Ich habe ein paar Stunden gebraucht, aber was Sie wahrscheinlich tun möchten, ist, den Stil der Source-Mapping-Webpack-Verwendung zu ändern. Standardmäßig wird eval verwendet.

https://webpack.js.org/configuration/devtool/

Ich habe dies zu meiner webpack.config.js hinzugefügt:

devtool: 'cheap-module-source-map'


Der Trick dabei war, herauszufinden, warum webpack --mode development hat den Fehler u webpack --mode production nicht.

Ich verwende auch React, nicht Polymer, aber ich bin mir ziemlich sicher, dass dies immer noch gilt.

Interessante Lektüre, die über Manifest zu überwinden ist

https://developer.chrome.com/extensions/contentSecurityPolicy

Evaluiertes JavaScript

Die Richtlinie gegen eval() und ihre Verwandten wie setTimeout(String), setInterval(String) und new Function(String) kann gelockert werden, indem Sie ‘unsafe-eval’ zu Ihrer Richtlinie hinzufügen:

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'" 

Wir raten jedoch dringend davon ab. Diese Funktionen sind berüchtigte XSS-Angriffsvektoren.

Danke für die Antwort von @Randy. Für das von der Vue-CLI generierte Vue-Projekt gibt es jedoch keine webpack.config.jsalso fügt die Lösung die folgende Konfiguration hinzu vue.config.js:

  configureWebpack: {
    devtool: 'cheap-module-source-map'
  }

Eine Chrome-Erweiterung darf nicht verwendet werden unsafe-evaloder eval eigentlich überhaupt.

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_Security_Policy

Wenn Sie eine Chrome-Erweiterung erstellen, machen Sie sich bewusst, dass sie durch Inhaltssicherheitsrichtlinien stark eingeschränkt ist. Stellen Sie sicher, dass Sie die Inhaltssicherheitsrichtlinie von WebExtensions gelesen und verstanden haben. Wenn Sie ein Inline-Skript haben möchten wie:

<script>
    alert('hello')
</script>

Sie müssen den Inhalt des Skript-Tags in seinen SHA256-Wert umrechnen und diesen zu Ihrem Manifest hinzufügen, damit es ausgeführt werden kann.

Webpaket V5

Verwenden --no-devtool um schnell aus der Patsche zu kommen.

Kein Evaluierungscode, nein .map Datei.

npx webpack watch --no-devtool

webpack CLI
https://webpack.js.org/api/cli#negated-flags

FYI, ich treffe dieses Problem, weil ich hinzufüge istanbul Plugin in babel.config.js.

Und das Build-Ergebnis enthält new Function('return this')

Für Manifest 3 können Sie verwenden

"content_security_policy": {
    "extension_page":"script-src 'self' 'wasm-unsafe-eval'; object-src 'self'" 
}