部署HTML网站到Heroku遇Content Security Policy报错求助

问题根源 #

你的应用的**内容安全策略（CSP）**仅允许从自身域名（'self'）加载脚本，但页面里引入了cdnjs.cloudflare.com的外部Materialize脚本和样式，触发了CSP拦截。另外head.hbs里存在无效的<meta http-equiv="con">标签，还有末尾多余的代码片段标记和</div>，这些也需要修正。

解决方案 #

修改head.hbs文件，添加正确的CSP meta标签，允许从指定外部源加载资源：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- 配置Content Security Policy，允许指定外部源 -->
  <meta http-equiv="Content-Security-Policy" content="
    script-src 'self' https://cdnjs.cloudflare.com;
    style-src 'self' https://cdnjs.cloudflare.com;
  ">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link rel="stylesheet" href="/index.css">
  <title>{{title}}</title>
</head>

说明 #

• script-src 'self' https://cdnjs.cloudflare.com：允许从自身域名和cdnjs加载脚本
• style-src 'self' https://cdnjs.cloudflare.com：允许从自身域名和cdnjs加载样式
• 移除了原文件中无效的<meta http-equiv="con">，以及末尾错误的代码标记和</div>

如果应用还加载其他外部资源（如字体、图片），需要在CSP规则里对应添加font-src、img-src等配置项。

内容的提问来源于stack exchange，提问作者Sardor Sirojov