Question

我正在尝试开发一个渐进式Web应用程序，其中包括一个外部JavaScript，一个外部CSS，JQuery库以及清单和服务工作者。

我设置了内容安全策略来加载这些内容，并在localhost和Google Chrome上运行它。

这是我的HTML头：

<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://*; manifest-src 'self'">
    <script src="example.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 
    <!-- <script src="jquery.min.js"></script> -->
    <link rel="stylesheet" type="text/css" href="example.css">
    <link rel="manifest" href="manifest.json">
    <script>
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('sw.js').then(function(registration) {
                console.log('Service worker successfully installed. Scope:', registration.scope);
            }).catch(function(error) {
                console.log('Service worker installation failed:', error);
            });
        }
    </script>
    <link rel="icon" href="../images/favicon.ico" type="image/x-icon" />
    <title>xxx</title>
</head>

我希望一切都能正常运行，但是相反，我得到了与我的声明背道而驰的这些错误：

拒绝加载脚本“ https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js”，因为它违反了以下内容安全策略指令：“ script-src'self'”。请注意，未明确设置“ script-src-elem”，因此将“ script-src”用作备用。

拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“ script-src'self'”。要启用内联执行，需要使用'unsafe-inline'关键字，哈希（'xxx'）或随机数（'nonce -...'）。

拒绝从“ http://localhost:7681/manifest.json”加载清单，因为它违反了以下内容安全策略指令：“ default-src'none'”。请注意，未明确设置“ manifest-src”，因此将“ default-src”用作后备。

即使我加入了'unsafe-inline'关键字，也启用了从https加载脚本的功能，并且没有声明“ default-src'none'”，所以我认为我缺少了一些东西。是什么阻止了我的脚本加载？

编辑
我了解出了什么问题：服务器在libwebsockets上运行，默认情况下，该服务器使用非常严格的内容安全策略。更改lws选项，即可从HTML头正确加载CSP指令。

Answer 1

CSP指令的来源指定为here。

从以上来源引用：

该网站的地址可能包含可选的前导通配符（星号“ *”）

但是，这仍然需要一个有效的站点地址。因此https://*不是有效的CSP源，因此将被忽略。

要允许从所有https网站加载脚本，请执行以下操作：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https:; manifest-src 'self'">

加载脚本和清单违反了“内容安全策略”指令

1 个答案: