CodeIgniter4配置CSP：放行同源图片及修复样式失效问题

问题分析 #

启用CSP后出现两个核心问题：

1. 同源图片被拦截：内联样式中的background-image及相对路径图片需要正确配置imageSrc和styleSrc规则
2. 样式失效：缺少字体资源放行规则、内联样式未被允许，且部分外部脚本源未加入CSP白名单

修改app/Config/ContentSecurityPolicy.php配置 #

以下是完整的修正配置：

// 调试阶段保持仅报告模式，确认无问题后改为false强制执行
public $reportOnly = true;

// 放行页面用到的所有外部脚本源
public $scriptSrc = [
    'self',
    'https://kit.fontawesome.com',
    'https://cdn.tailwindcss.com',
    'https://ajax.googleapis.com',
    'https://cdnjs.cloudflare.com/ajax/libs'
];

// 放行样式源并允许内联样式块
public $styleSrc = [
    'self',
    'https://fonts.googleapis.com',
    'https://cdn.tailwindcss.com',
    'unsafe-inline'
];

// 放行所有同源图片（含相对路径资源）
public $imageSrc = [
    'self',
    // 若使用base64格式图片，添加 'data:'
];

// 放行字体资源源（Google字体实际文件托管域名）
public $fontSrc = [
    'self',
    'https://fonts.gstatic.com'
];

配置说明 #

• scriptSrc：覆盖页面中所有外部脚本的来源，确保Font Awesome、Tailwind、jQuery等脚本正常加载，避免因脚本阻塞导致样式异常。
• styleSrc：
  • unsafe-inline允许页面内的<style>标签生效，解决自定义错误样式失效问题
  • 将Google字体的源简化为域名，避免路径限制过严导致CSS加载失败
• imageSrc：self已包含所有同源资源（包括../assets/img/这类相对路径的图片），无需额外添加具体路径
• fontSrc：Google字体的CSS会从fonts.gstatic.com加载实际字体文件，必须添加此规则否则字体无法渲染

调试与验证 #

1. 保持$reportOnly = true，打开浏览器控制台查看CSP报告，确认所有资源均被允许
2. 确认无拦截报告后，将$reportOnly改为false，启用强制执行模式

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