由于安全问题，无法运行在具有清单 v3 的 chrome 扩展中创建 React-App

Question

我正在制作一个 chrome 扩展，它将创建一个 iframe，将其注入页面，然后运行在该 iframe 中创建一个 React 应用程序。我正在使用 Create React App 制作 React 应用程序，由于安全问题，build/index.html 中的 <script/>s 之一将不会执行。

index.html里面有三个<script/>：

<script>!function(e){function r...<LONG CHUNK OF BUNDLED CODE></script>
<script src="/static/js/2.f6218dca.chunk.js"></script>
<script src="/static/js/main.c335a43f.chunk.js"></script>

上面列出的第一个脚本是一个大的捆绑脚本，我在这里主要剪切出来。后两个似乎加载运行正常，但第一个出现以下错误消息。

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-ssRao1c5f8Pf3VvQXjkNHGmrQ6+tZ7Fuaxxxxxxxxxx='), or a nonce ('nonce-...') is required to enable inline execution.

我之前在使用 manifest v2 时遇到过这个错误，并且知道有很多答案显示如何解决它，但它们似乎不适用于 manifest v3。正如 here 关于新的 v3 安全策略所述：

"The script-src, object-src, and worker-src directives may only have the following values:

self

none

Any localhost source, (http://localhost, http://127.0.0.1, or any port on those domains)"

因此上面的错误信息似乎已经过时了。如果我将 'unsafe-inline' 或 'sha256-ssRao1c5f8Pf3VvQXjkNHGmrQ6+tZ7Fuaxxxxxxxxxx=' 添加到我的内容安全策略中，我无法将扩展加载到 Chrome - 它被拒绝并显示 "'content_security_policy.extension_pages': Insecure CSP value "'unsafe-inline'" in directive 'script-src'."

之类的消息

我似乎还为其他两个脚本设置了正确的 v3 安全策略 - 我可以通过更改它并获取上述三个错误消息来验证这一点，每个脚本一个。

"content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
},

有没有加载捆绑js代码的第一个脚本？或者我必须把它放在另一个文件中并用 <script src="/path/to/new_file.js"...?

加载它

这里还有我的内容脚本中的代码，它创建了 iframe 并将 React 应用程序注入其中，以防相关：

const modal = document.createElement('dialog');
modal.setAttribute("style", "height:40%");
modal.innerHTML =
       `<iframe id="headlineFetcher" style="height:100%"></iframe>
        <div style="position:absolute; top:0px; left:5px;">  
            <button>x</button>
        </div>`;
document.body.appendChild(modal);
const dialog = document.querySelector("dialog");
dialog.showModal();

const iframe = document.getElementById("headlineFetcher");  
iframe.src = chrome.runtime.getURL("index.html");
iframe.frameBorder = 0;

Answer 1

您需要设置一个环境变量来告诉它不要使用内联脚本：

INLINE_RUNTIME_CHUNK=假

将其添加到您的 .env 文件中，当您重建 React 的违规位时，它会被放入一个文件中。

由于安全问题，无法运行在具有清单 v3 的 chrome 扩展中创建 React-App

Cannot run Create-React-App in chrome extension with manifest v3 due to security issues

google-chrome-extension

content-security-policy

create-react-app

由于安全问题，无法 运行 在具有清单 v3 的 chrome 扩展中创建 React-App

Cannot run Create-React-App in chrome extension with manifest v3 due to security issues

google-chrome-extension

content-security-policy

create-react-app

由于安全问题，无法运行在具有清单 v3 的 chrome 扩展中创建 React-App