配置Content Security Policy提示无效源及图片加载被拦截如何解决

你的两处报错均由CSP头拼接逻辑错误衍生，次要问题是资源允许列表配置不全：

• 核心错误：不同CSP指令拼接时没有添加分隔符;，导致浏览器将img-src、frame-src指令名全部识别为default-src的源值，完全无法识别你配置的img-src、frame-src独立指令
  你当前生成的CSP头实际为：

  default-src 'self' 'unsafe-inline' cdn.jsdelivr.net *.googletagmanager.com fonts.googleapis.com cdnjs.cloudflare.com fonts.gstatic.com code.jquery.comimg-src data:frame-src youtube.com www.youtube.com
  

  浏览器会把code.jquery.comimg-src、data:frame-src都当成default-src的允许源，所以触发第一处「无效源data:frame-src」的报错；同时浏览器没有识别到独立的img-src指令，触发第二处「img-src未显式设置」的报错
• 次要错误：img-src允许列表缺少报错中提到的图片域名ssl.gstatic.com，也没有配置'self'等站点常用图片源
• 优化点：frame-src配置建议将不同域名拆分为独立的数组元素，符合配置逻辑避免后续维护出错

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;

class ContentSecurityPolicy
{
    public $resources = [
        'default-src' => [
            "'self'",
            "'unsafe-inline'",
            'cdn.jsdelivr.net',
            '*.googletagmanager.com',
            'fonts.googleapis.com',
            'cdnjs.cloudflare.com',
            'fonts.gstatic.com',
            'code.jquery.com',
        ],
        'img-src' => [
            "'self'",
            "data:",
            "ssl.gstatic.com",
        ],
        'frame-src' => [
            'youtube.com',
            'www.youtube.com',
        ],
    ];

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

        $policyParts = [];
        foreach ($this->resources as $directive => $sources) {
            $policyParts[] = $directive . ' ' . implode(' ', $sources);
        }
        // 用分号拼接所有指令，符合CSP头标准格式要求
        $contentSecurityPolicy = implode('; ', $policyParts);

        $response->header("Content-Security-Policy", $contentSecurityPolicy);

        return $response;
    }
}

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