配置ContentSecurityPolicy后data:image类型图片加载失败如何调整配置

问题原因 #

当前配置的内容安全策略（CSP）未允许data: URI 格式的资源加载，因此base64编码的图片会被拦截。
另外你现有中间件的CSP头拼接逻辑存在两处错误：

• 已在$resources数组中定义了指令前缀（如default-src），设置header时额外加的default-src前缀会导致头格式异常
• 多个CSP指令之间没有用分号分隔，会导致规则解析失败

修改方案 #

推荐使用更细粒度的img-src指令控制图片权限，仅给图片类资源放开base64加载权限，安全度更高。
修改后的完整中间件代码如下：

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;

class ContentSecurityPolicy
{
    public $resources = [
        'default-src' => [
            "'self'",
            "'unsafe-inline'",
            'cdnjs.cloudflare.com',
            'fonts.gstatic.com',
            'code.jquery.com',
        ],
        // 新增图片资源专属规则
        'img-src' => [
            "'self'",
            'data:', // 允许base64格式图片加载
        ],
    ];

    public function handle(Request $request, Closure $next)
    {
        $response = $next($request);

        $contentSecurityPolicy = '';
        foreach ($this->resources as $key => $values) {
            // 每个规则末尾加分号分隔
            $contentSecurityPolicy .= $key . ' ' . implode(' ', $values) . '; ';
        }

        // 去掉多余的default-src前缀，直接使用拼接好的规则
        $response->header("Content-Security-Policy", $contentSecurityPolicy);

        return $response;
    }
}

如果你不需要细粒度控制，也可以直接在现有default-src数组中添加'data:'，无需新增img-src规则，但该方式会给所有类型的资源都放开data:协议权限，安全风险更高。

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