How to allow a single script in Laravel app, blade page when CSP (Content Security Policy) is enabled?

Question

I run an app developed in Laravel. I need add a script on a page.blade.php page. Every script I insert in this page is blocked with the developer console error: "The script loading a resource to inline was blocked by page settings (“script-src”)"

I discovered that in other app.php file located in the main-install-folder/config/app there are the following rows:

/*
|--------------------------------------------------------------------------
| By default X-Frame-Options header is enabled and set to SAMEORIGIN.
| Via this option you can disable it (APP_X_FRAME_OPTIONS=false) or set custom value:
| - DENY
| - ALLOW-FROM example.org
|-------------------------------------------------------------------------
*/
'x_frame_options'    => env('APP_X_FRAME_OPTIONS', true),

/*
|--------------------------------------------------------------------------
| Enable Content-Security-Policy meta tag to prevent possible XSS attacks.
|-------------------------------------------------------------------------
*/
'csp_enabled'    => env('APP_CSP_ENABLED', true),
'csp_script_src' => env('APP_CSP_SCRIPT_SRC', ''),

Now if I change the csp_enabled from true to false and I clean app cache the script I put in the page.blade.php works but I suppose I create a XSS weakness.

How can I allow my single script keeping the csp_enabled set to true?

What I tried:

I tried add to a blade.php page the following meta tag:

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">

But this never help and also I don't know if is secure to use. With this meta tag in the page and csp_enabled set to true in the other app.php file the error still be the same: script doesn't work and the developer console say the same error i told before.

I read about run script Nonce and I tried to add the Nonce to the script but I don't know how to do. What I tried did not work.

I read this guide https://laravel-news.com/laravel-content-security-policies

I tried to change my script from:

<script>

//* script code

</script>

To

<script nonce="{{ csp_nonce() }}">

//* script code

</script>

But this code create a 500 error. Also if I try to put a random string.

The following article seems talk about the settings I found on the Laravel app but I don't find and understand how to resolve https://hummingbirduk.com/managing-a-content-security-policy-with-laravel

I tried also to insert the script like this:

<script nonce="1234"></script>

but still not work.

The only way I'm able to have the script working is set csp_enabled to false

I tried also to move the script code to a file then call in the balde page but the error and result is the same if csp_enabled is set to true

What I expect:

Keep security first so keep csp_enabled to true and allow my single script adding. How can I do?

Answer 1

Showing the error messages would likely be helpful for understanding the root cause of your problem. Based on what you have provided I would assume that this is the general situation:

When CSP is enabled, it is added as a meta tag according to the comment on the first code section. The last line there seems to indicated that script-src is empty, which would disallow all kinds of scripts.

Then you try to add another CSP policy in meta tag. Now you have two policies and your content needs to pass both of them. Nothing changes as it still needs to pass the initial policy when it is enabled.

Your next step should be to remove the meta tag you added and use its content to modify the script-src configuration like this:

'csp_script_src' => env('APP_CSP_SCRIPT_SRC', "'self' 'unsafe-inline'"),

If this works you now have control over your policy and can keep tuning it.