我正在尝试开发一个Progressive Web App,其中包括外部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('nonce -...')。
拒绝从'http://localhost:7681/manifest.json'加载清单,因为它违反了以下内容安全策略指令:“default-src'none'”。请注意,'manifest-src'未显式设置,因此'default-src'用作后备。
即使我包含'unsafe-inline'关键字,启用从https加载脚本,我也没有声明“default-src'none'”,所以我想我错过了什么。什么阻止我的脚本加载?
编辑 我明白出了什么问题:服务器在libwebsockets上运行,默认情况下使用非常严格的内容安全策略。更改lws选项,可以从HTML头正确加载CSP指令。
CSP指令的来源是here。
引自上面的来源:
网站的地址可能包含可选的前导通配符(星号字符'*')
但是,这仍然需要有效的站点地址。因此https://*
不是有效的CSP源,因此被忽略。
要允许从所有https站点加载脚本:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https:; manifest-src 'self'">