Content Security Policy contains an invalid source-CodePudding

I'm trying to use Content Security Policy on my site, I've already done everything right, and everything works, but this error still appears in the console

The source list for the Content Security Policy directive 'default-src' contains an invalid source: 'data:frame-src'. It will be ignored.

Where did I go wrong? What's wrong here?

<?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' => [
            "data:",
        ],
        'frame-src' => [
            'youtube.com www.youtube.com',
        ],
    ];

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

        $contentSecurityPolicy = '';
        foreach ($this->resources as $key => $values) {
            $contentSecurityPolicy .= $key . ' ' . implode(' ', $values);
        }

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

        return $response;
    }
}

There is also another error

Refused to load the image 'https://ssl.gstatic.com/ui/v1/icons/mail/images/2/openhand.cur' because it violates the following Content Security Policy directive: "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". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

CodePudding user response：

Have a look to the CSP you generated:

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

but normally it should be:

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

You miss a semicolon ; between directives. Change the line:

$contentSecurityPolicy .= $key . ' ' . implode(' ', $values);

to the:

$contentSecurityPolicy .= $key . ' ' . implode(' ', $values) .';';

'img-src' => [ "data:", ], means you do not load images from own site. this is an extremely rare case, so 'img-src' => [ "'self'", "data:", ], is much better.
Using default-src as souce for implicitly init other directives is a bad practice. This can be used in simple cases, but not in yours - later you will want to get rid of the 'unsafe-inline' in the script-src directive, since its use does not protect against XSS.
So you'll have to use 'unsafe-inline' for style-src and use 'nonce-value' for script-src but you failed to mix these tokens in the default-src.
Also using 'nonce-value' in the default-src lead to vulnerability in Firefox.

Distribute sources according to directives, this will save you from headaches in the future.