添加CSP Header导致网站显示异常的技术求助

第一个页面（Euskoróscopo）问题处理 #

核心问题 #

1. 内联样式被拦截：页面body标签的内联style属性（背景图、文字颜色设置）未被CSP授权，当前style-src仅允许'self'和cdn.jsdelivr.net，浏览器直接阻止内联样式生效。
2. HTML标签语法错误：Bootstrap CSS的<link>标签缺失rel="stylesheet"属性且未闭合，Bootstrap JS的<script>标签也未闭合，导致框架资源无法正常加载。
3. CSP配置冗余且不安全：script-src、object-src等设置为*，过度放开权限，存在安全风险。

修复步骤 #

1. 修正HTML标签错误

补全Bootstrap的资源引入标签：

<!-- 修正Bootstrap CSS引入 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<!-- 修正Bootstrap JS引入 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

2. 调整CSP适配内联样式（三选一）

• 方案一：移除内联样式（最推荐）
  将body的内联样式移到css/tabla_inicio.css中：

  body {
    background-image: url('../images/background.webp');
    background-size: cover;
    color: white;
  }
  

  同时删除body标签的style属性，CSP保持原有style-src配置即可。

• 方案二：临时允许内联样式（仅测试用）
  在style-src中添加'unsafe-inline'：

  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' cdn.jsdelivr.net 'unsafe-inline'; script-src 'self' cdn.jsdelivr.net; img-src 'self'; connect-src 'self'; object-src 'none'">
  

• 方案三：使用哈希授权（安全合规）
  计算内联style的SHA-256哈希值，添加到style-src中（哈希可通过浏览器控制台或在线工具生成）：

  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' cdn.jsdelivr.net 'sha256-你的内联样式哈希值'; script-src 'self' cdn.jsdelivr.net; img-src 'self'; connect-src 'self'; object-src 'none'">
  

第二个页面（Web Login）问题处理 #

核心问题 #

default-src *看似宽松，但CSP默认禁止内联样式/脚本、eval等行为，即使全局放开权限，这类内容仍会被拦截；同时全量放开default-src存在极高安全风险。

修复步骤 #

1. 收紧并明确配置CSP
   只授权必要资源，避免过度放开：

   <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' cdn.jsdelivr.net; script-src 'self' cdn.jsdelivr.net; img-src 'self'; connect-src 'self'; object-src 'none'">
   

2. 排查内联内容
   如果页面存在未展示的内联样式/脚本，参考第一个页面的方案处理（移除或添加授权）。
3. 验证资源完整性
   确认Bootstrap资源的integrity和crossorigin属性配置正确，避免因资源校验失败导致样式失效。

通用调试技巧 #

• 打开浏览器开发者工具（F12），查看控制台的CSP错误提示，浏览器会明确标注被拦截的资源类型和原因，这是最快的定位方式。
• 调试阶段可使用Content-Security-Policy-Report-Only模式，仅上报错误而不拦截资源，不影响页面正常展示。

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