Verstoß gegen die Richtlinie zur Inhaltssicherheit: Das Inline-Skript entspricht nicht der Spezifikation „script-src ‚self''.
P粉276064178
2023-08-15 14:48:52
<p>Ich verwende <code>react-create-app</code>, um meine Chrome-Erweiterung zu erstellen. Wenn ich <code>npm run build</code> in React-Create-App verwende, erhalte ich die folgende Fehlermeldung: </p>
<blockquote>
<p>Die Ausführung des Inline-Skripts wird verweigert, da es gegen die folgende Richtlinie zur Inhaltssicherheit verstößt: „script-src 'self'“. Um die Inline-Ausführung zu aktivieren, verwenden Sie das Schlüsselwort „unsafe-inline“, einen Hash ('sha256-5=') oder eine einmalige Nonce ('nonce-...'). </p>
</blockquote>
<p>Fehler in<code>index.html</code></p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<Link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
Integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
<!--
Manifest.json stellt Metadaten bereit, die verwendet werden, wenn Ihre Webanwendung auf dem Mobilgerät oder Desktop eines Benutzers installiert wird. Siehe https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Beachten Sie die Verwendung von %PUBLIC_URL% im obigen Tag.
Während des Erstellungsprozesses wird sie durch die URL des „öffentlichen“ Ordners ersetzt.
Nur Dateien im Ordner „public“ können von HTML aus referenziert werden.
Im Gegensatz zu „/favicon.ico“ oder „favicon.ico“ funktioniert „%PUBLIC_URL%/favicon.ico“ ordnungsgemäß auf Client-Routen und öffentlichen Nicht-Root-URLs.
Führen Sie „npm run build“ aus, um zu erfahren, wie Sie öffentliche Nicht-Root-URLs konfigurieren.
-->
<title>React App</title>
</head>
<Körper>
<noscript>Sie müssen JavaScript aktivieren, um diese Anwendung auszuführen. </noscript>
<div id="root"></div>
<!--
Diese HTML-Datei ist eine Vorlage.
Wenn Sie es direkt in Ihrem Browser öffnen, sehen Sie eine leere Seite.
Sie können dieser Datei Webschriftarten, Meta-Tags oder Analysen hinzufügen.
Der Build-Schritt fügt die gebündelten Skripte in „Tags“ ein.
Um mit der Entwicklung zu beginnen, führen Sie „npm start“ oder „yarn start“ aus.
Um ein Produktionspaket zu erstellen, verwenden Sie „npm run build“ oder „yarn build“.
-->
</body>
</html></pre>
<p><strong>manifest.json</strong></p>
<pre class="brush:php;toolbar:false;">{
„manifest_version“: 2,
„name“: „IC Project Chrome-Erweiterung“,
„description“: „Diese Erweiterung ist ein Ausgangspunkt für die Erstellung einer echten Chrome-Erweiterung“,
„Version“: „0.0.1“,
"browser_action": {
„default_popup“: „index.html“,
„default_title“: „Popup öffnen“
},
"Symbole": {
„16“: „assets/icon-128.png“,
„48“: „assets/icon-128.png“,
„128“: „assets/icon-128.png“
},
„content_security_policy“: „script-src ‚self‘ ‚unsafe-eval‘; object-src ‚self‘“
}</pre>
<p><br /></p>
经过几个充满挫败的小时后，我找到了一个有效的解决方案。在Mac和PC之间运行脚本有所不同。我找到的很多答案都有带有“set”和不带有“set”的区别。有的带有“&&”，有的没有...但是对我来说都不起作用。
简而言之：像这样使用“cross-env” npm包：
这在PC上可以工作，可能在Mac上也可以。当然，在此之前你需要先
npm install --save-dev cross-env。