Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).

[urfusion]

I am continually getting below error

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).

Below is my file

<?php

return [
    /*
     * Server
     *
     * Reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Server
     *
     * Note: when server is empty string, it will not add to response header
     */

    'server' => 'Unknown',
    /*
     * X-Content-Type-Options
     *
     * Reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options
     *
     * Available Value: 'nosniff'
     */
    'x-content-type-options' => 'nosniff',
    /*
     * X-Download-Options
     *
     * Reference: https://msdn.microsoft.com/en-us/library/jj542450(v=vs.85).aspx
     *
     * Available Value: 'noopen'
     */
    'x-download-options' => 'noopen',
    /*
     * X-Frame-Options
     *
     * Reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
     *
     * Available Value: 'deny', 'sameorigin', 'allow-from <uri>'
     */
    'x-frame-options' => 'sameorigin',
    /*
     * X-Permitted-Cross-Domain-Policies
     *
     * Reference: https://www.adobe.com/devnet/adobe-media-server/articles/cross-domain-xml-for-streaming.html
     *
     * Available Value: 'all', 'none', 'master-only', 'by-content-type', 'by-ftp-filename'
     */
    'x-permitted-cross-domain-policies' => 'none',
    /*
     * X-Power-By
     *
     * Note: it will not add to response header if the value is empty string.
     */
    'x-power-by' => '',
    /*
     * X-XSS-Protection
     *
     * Reference: https://blogs.msdn.microsoft.com/ieinternals/2011/01/31/controlling-the-xss-filter
     *
     * Available Value: '1', '0', '1; mode=block'
     */
    'x-xss-protection' => '1; mode=block',
    /*
     * Referrer-Policy
     *
     * Reference: https://w3c.github.io/webappsec-referrer-policy
     *
     * Available Value: 'no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin',
     *                  'same-origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url'
     */
    'referrer-policy' => 'no-referrer',
    /*
     * Clear-Site-Data
     *
     * Reference: https://w3c.github.io/webappsec-clear-site-data/
     */
    'clear-site-data' => [
        'enable' => false,
        'all' => false,
        'cache' => true,
        'cookies' => true,
        'storage' => true,
        'executionContexts' => true,
    ],
    /*
     * HTTP Strict Transport Security
     *
     * Reference: https://developer.mozilla.org/en-US/docs/Web/Security/HTTP_strict_transport_security
     *
     * Please ensure your website had set up ssl/tls before enable hsts.
     */
    'hsts' => [
        'enable' => true,
        'max-age' => 15552000,
        'include-sub-domains' => true,
        'preload' => false,
    ],
    /*
     * Expect-CT
     *
     * Reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expect-CT
     */
    'expect-ct' => [
        'enable' => false,
        'max-age' => 2147483648,
        'enforce' => false,
        'report-uri' => null,
    ],
    /*
     * Public Key Pinning
     *
     * Reference: https://developer.mozilla.org/en-US/docs/Web/Security/Public_Key_Pinning
     *
     * hpkp will be ignored if hashes is empty.
     */
    'hpkp' => [
        'hashes' => [
        // 'sha256-hash-value',
        ],
        'include-sub-domains' => false,
        'max-age' => 15552000,
        'report-only' => false,
        'report-uri' => null,
    ],
    /*
     * Feature Policy
     *
     * Reference: https://wicg.github.io/feature-policy/
     */
    'feature-policy' => [
        'enable' => true,
        /*
         * Each directive details can be found on:
         *
         * https://github.com/WICG/feature-policy/blob/master/features.md
         *
         * 'none', '*' and 'self allow' are mutually exclusive,
         * the priority is 'none' > '*' > 'self allow'.
         */
        'accelerometer' => [
            'none' => false,
            '*' => false,
            'self' => true,
            'src' => false,
            'allow' => [
            // 'url',
            ],
        ],
        'ambient-light-sensor' => [
            'none' => false,
            '*' => false,
            'self' => true,
            'src' => false,
            'allow' => [
            // 'url',
            ],
        ],
        'autoplay' => [
            'none' => false,
            '*' => false,
            'self' => true,
            'src' => false,
            'allow' => [
            // 'url',
            ],
        ],
        'camera' => [
            'none' => false,
            '*' => false,
            'self' => true,
            'src' => false,
            'allow' => [
            // 'url',
            ],
        ],
        'display-capture' => [
            'none' => false,
            '*' => false,
            'self' => true,
            'src' => false,
            'allow' => [
            // 'url',
            ],
        ],
        'document-domain' => [
            'none' => false,
            '*' => true,
            'self' => false,
            'src' => false,
            'allow' => [
            // 'url',
            ],
        ],
        'encrypted-media' => [
            'none' => false,
            '*' => false,
            'self' => true,
            'src' => false,
            'allow' => [
            // 'url',
            ],
        ],
        'fullscreen' => [
            'none' => false,
            '*' => false,
            'self' => true,
            'src' => false,
            'allow' => [
            // 'url',
            ],
        ],
        'geolocation' => [
            'none' => false,
            '*' => false,
            'self' => true,
            'src' => false,
            'allow' => [
            // 'url',
            ],
        ],
        'gyroscope' => [
            'none' => false,
            '*' => false,
            'self' => true,
            'src' => false,
            'allow' => [
            // 'url',
            ],
        ],
        'magnetometer' => [
            'none' => false,
            '*' => false,
            'self' => true,
            'src' => false,
            'allow' => [
            // 'url',
            ],
        ],
        'microphone' => [
            'none' => false,
            '*' => false,
            'self' => true,
            'src' => false,
            'allow' => [
            // 'url',
            ],
        ],
        'midi' => [
            'none' => false,
            '*' => false,
            'self' => true,
            'src' => false,
            'allow' => [
            // 'url',
            ],
        ],
        'payment' => [
            'none' => false,
            '*' => false,
            'self' => true,
            'src' => false,
            'allow' => [
            // 'url',
            ],
        ],
        'picture-in-picture' => [
            'none' => false,
            '*' => true,
            'self' => false,
            'src' => false,
            'allow' => [
            // 'url',
            ],
        ],
        'speaker' => [
            'none' => false,
            '*' => false,
            'self' => true,
            'src' => false,
            'allow' => [
            // 'url',
            ],
        ],
        'sync-xhr' => [
            'none' => false,
            '*' => true,
            'self' => false,
            'src' => false,
            'allow' => [
            // 'url',
            ],
        ],
        'usb' => [
            'none' => false,
            '*' => false,
            'self' => true,
            'src' => false,
            'allow' => [
            // 'url',
            ],
        ],
        'vr' => [
            'none' => false,
            '*' => false,
            'self' => true,
            'src' => false,
            'allow' => [
            // 'url',
            ],
        ],
    ],
    /*
     * Content Security Policy
     *
     * Reference: https://developer.mozilla.org/en-US/docs/Web/Security/CSP
     *
     * csp will be ignored if custom-csp is not null. To disable csp, set custom-csp to empty string.
     *
     * Note: custom-csp does not support report-only.
     */
    'custom-csp' => null,
    'csp' => [
        'report-only' => false,
        'report-uri' => null,
        'block-all-mixed-content' => false,
        'upgrade-insecure-requests' => true,
        /*
         * Please references script-src directive for available values, only `script-src` and `style-src`
         * supports `add-generated-nonce`.
         *
         * Note: when directive value is empty, it will use `none` for that directive.
         */
        'script-src' => [
            'allow' => [

                'https://www.google.com/recaptcha/api.js',
                'https://cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js',
                'https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js',
                'https://maps.googleapis.com/maps-api-v3/api/js/39/10/common.js',
                'https://maps.googleapis.com/maps-api-v3/api/js/39/10/util.js',
                'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js',
                'https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.js',
                'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js',
                'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js',
                'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js',

                'https://connect.facebook.net/en_US/fbevents.js',
            ],
            'hashes' => [
            // 'sha256' => [
            //     'hash-value',
            // ],
            ],
            'nonces' => [
            // 'base64-encoded',
            ],
            'schemes' => [
             'https:',
            ],
            'self' => true,
            'unsafe-inline' => true,
            'unsafe-eval' => true,
            'strict-dynamic' => false,
            'unsafe-hashed-attributes' => false,
            // https://www.chromestatus.com/feature/5792234276388864
            // 'report-sample' => true,
            'add-generated-nonce' => true,
        ],
        'style-src' => [
            'allow' => [
                'https://fonts.googleapis.com/',
                'https://fonts.googleapis.com/css?family=Biryani:200,300,400,500,600,700',
                'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/css/bootstrap-datetimepicker.min.css',
            ],
            'hashes' => [
            // 'sha256' => [
            //     'hash-value',
            // ],
            ],
            'nonces' => [
            //
            ],
            'schemes' => [
            // 'https:',
            ],
            'self' => true,
            'unsafe-inline' => true,
            // https://www.chromestatus.com/feature/5792234276388864
            // 'report-sample' => true,
            'add-generated-nonce' => false,
        ],
        'img-src' => [
            'allow' => [
            //
            ],
            'schemes' => [
                'data:',
                'https:',
            ],
            'self' => true,
            'data' => true,
        ],
        'default-src' => [
            'none',
        ],
        'base-uri' => [
        //
        ],
        'connect-src' => [
            'allow' => [
                'https://' . parse_url(env('APP_URL'), PHP_URL_HOST) . ':8443/socket.io/',
                'wss://' . parse_url(env('APP_URL'), PHP_URL_HOST) . ':8443/socket.io/',
            ],
            'self' => true,
        ],
        'font-src' => [
            'schemes' => [
                'data:',
                'https:',
            ],
            'self' => true,
            'data' => true,
        ],
        'form-action' => [
            'self' => true,
        ],
        'frame-ancestors' => [
        //
        ],
        'frame-src' => [
            'schemes' => [
                'https:',
            ],
            'self' => true,
        ],
        'media-src' => [
            'allow' => [
               //
            ],
            'self' => true,
        ],
        'object-src' => [
        //
        ],
        'worker-src' => [
        //
        ],
        'plugin-types' => [
        // 'application/x-shockwave-flash',
        ],
        'require-sri-for' => '',
        'sandbox' => '',
    ],
];

[bepsvpt]

Hi @urfusion,

Could you provide which script was blocked by CSP and which browser are you using?

[urfusion]

Hi @bepsvpt ,

There are multiple errors

<!-- Facebook Pixel Code -->
        <script>
            !function (f, b, e, v, n, t, s)
            {
                if (f.fbq)
                    return;
                n = f.fbq = function () {
                    n.callMethod ?
                            n.callMethod.apply(n, arguments) : n.queue.push(arguments)
                };
                if (!f._fbq)
                    f._fbq = n;
                n.push = n;
                n.loaded = !0;
                n.version = '2.0';
                n.queue = [];
                t = b.createElement(e);
                t.async = !0;
                t.src = v;
                s = b.getElementsByTagName(e)[0];
                s.parentNode.insertBefore(t, s)
            }(window, document, 'script',
                    'https://connect.facebook.net/en_US/fbevents.js');
            fbq('init', '1585');
            fbq('track', 'PageView');
        </script>

and

              <script>
                    function book_clickHandler(event) {
                        document.getElementById('action').value = 'book';
                        document.getElementById('theForm').submit();
                    }
                </script>

and

<script>
    $(window).on('load',function() {
        var vid = document.getElementById("Homevideo");
        vid.pause();
        vid.play();
    });
</script>

All the inline scripts getting this error.

[bepsvpt]

Could you use browser developer tool to check the actual CSP header that browse received?

[urfusion]

I am getting errors like this in mozila console.

[bepsvpt]

Sorry for confusing. Could you provide the CSP header value like the following screenshot?

[urfusion]

the main url CSP is

default-src; base-uri 'none'; connect-src 'self' https://staging.domain.com:8443/socket.io/ wss://staging.domain.com:8443/socket.io/; font-src 'self' data: https:; form-action 'self'; frame-ancestors 'none'; frame-src 'self' https:; img-src 'self' https://www.facebook.com/tr?id=15252&ev=PageView&noscript=1 data: https:; media-src 'self' https://player.vimeo.com/external/236428774.hd.mp4?s=645fbf379b8ee6c4312e1b3aae5a85fa8cc3ddf0&profile_id=174 https://vod-progressive.akamaized.net/exp=1581614269~acl=%2A%2F841967436.mp4%2A~hmac=5bff94ff9fe1a8b2c86b3de3597db625596924afef0a5e47ec6851a1030e9e30/vimeo-prod-skyfire-std-us/01/2285/9/236428774/841967436.mp4; object-src 'none'; plugin-types application/x-shockwave-flash; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://maps.googleapis.com/maps/api/js?key=AIzaSyB9tsdaqE0M-sjdRS4a2sBTwkbUsMqahnkaIs https://www.google.com/recaptcha/api.js https://cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js https://maps.googleapis.com/maps-api-v3/api/js/39/10/common.js https://maps.googleapis.com/maps-api-v3/api/js/39/10/util.js https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.js https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js https://www.gstatic.com/recaptcha/releases/vJuUWXolyYJx1oqUVmpPuryQ/recaptcha__en.js https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1shttps%3A%2F%2Fstaging.domain.com%2F&4sAIzaSyB9tqE0M-sjdRS4a2sBTwkbUsMqahnkaIs&callback=_xdc_._wl020o&key=AIzaSyB9tqE0M-sjdRS4a2sBTwkbUsMqahnkaIs&token=85722 https://connect.facebook.net/en_US/fbevents.js 'nonce-b447920613e8f5668d835282ab2ffee4' https:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com/ https://fonts.googleapis.com/css?family=Biryani:200,300,400,500,600,700 https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/css/bootstrap-datetimepicker.min.css https:; worker-src 'none'; upgrade-insecure-requests

[bepsvpt]

According to https://csp-evaluator.withgoogle.com

unsafe-inline is ignored if a nonce or a hash is present. (CSP2 and above)

Please set add-generated-nonce to false and try again.

[urfusion]

Cool. Working now. Thanks.

[bepsvpt]

Thanks for reporting this issue, I will add related information to document.