内容安全策略错误：拒绝执行内联脚本

问题描述 投票：0回答：1

我正在开发一个 React 应用程序，我正在尝试集成 keywords.js 以实现视觉效果。虽然一切在我的本地开发环境中都运行良好，但当我部署到生产环境时，我遇到了内容安全策略 (CSP) 问题。

在我的生产环境中，我在 HTML 中使用以下 CSP 元标记：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://cdn.jsdelivr.net 'unsafe-inline'; script-src 'self' https://cdn.jsdelivr.net 'unsafe-inline'; script-src-elem 'self' https://cdn.jsdelivr.net 'unsafe-inline'; style-src 'self' 'unsafe-inline'" >

检查生产环境时，控制台出现如下错误： 

Refused to load the script 'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.

Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-sE1QKI+3nnpP92ZRF6Ro5DLUkDvouqP/XSbFGAbo0ZU='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

在本地，我将内容安全策略 (CSP) 设置为仅允许 self 和 keywords.js 的 CDN。它提示我添加“不安全内联”以允许内联脚本，这解决了问题。

但是，当我部署到生产环境时，相同的设置不起作用。来自 CDN 的外部脚本仍然被阻止，我无法加载 keywords.js。我不确定为什么它在本地有效但在生产中不起作用。任何帮助将不胜感激！

javascript reactjs security cdn content-security-policy
1个回答
0
投票

谢谢大家的建议！我今天早些时候设法解决了该问题，而无需使用 http-equiv 内容安全策略元标记。

解决方案是下载实际的 keywords-min.js 文件并将其存储在与我的 index.html 相同的目录中，这样我就不必依赖来自 cdn.jsdelivr.net 的外部链接。

对于第二个错误，我将内联脚本移动到外部的 keywords-config.js 文件中，并从那里调用它。一切都在生产服务器上完美运行！

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="particles.min.js"></script>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="particles-js"></div>
        <div id="root"></div>
        <script src="particles-config.js"></script>
    </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.