google-chrome-extension - 由于安全问题，无法使用 list v3 在 Chrome 扩展中运行 Create-React-App

Question

我正在制作一个 chrome 扩展，它将创建一个 iframe，将它注入(inject)页面，然后在该 iframe 中运行一个 react 应用程序。我正在使用 Create React App 和 <script/> 之一制作 react 应用程序s 在 build/index.html由于安全问题不会执行。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 havethe 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 应用程序注入(inject)其中，以防万一:

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 的违规部分时，它会被放入一个文件中。