Content Security Policy livewire

What seems to be the problem:
Hi I have a problem because my project return:

Refused to apply inline style because it violates the following Content Security Policy directive: “style-src ‘self’ ‘nonce-fAf5vbJxiLTXpGSk2W6yN077wkC67Wqo’ fonts.googleapis.com fonts.gstatic.com project1.test”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-4aqJaHTwpHqzV8S/zDr2l+eoK1U1TLOVs9hcwHdr/QM=’), or a nonce (‘nonce-…’) is required to enable inline execution.

I use: https://github.com/spatie/laravel-csp in my project but i don’t know how to use nounce for script inside my project.
Steps to Reproduce:

Are you using the latest version of Livewire:
Yes

Do you have any screenshots or code examples:
No

1 Like

Hey, @tomekn

It’s not a livewire issue, You are implementing a header related policy that’s doesn’t allow inline style in your page, take a look here to know more about security headers.

I think this is a livewire problem because I can’t add nonce to @livewireScripts.
If I test simple js script:

<script type="text/javascript"">
    alert('Hello world');
    </script>

I can’t see the alert because it is blocked.
But if I test:

<script type="text/javascript" nonce="{{ csp_nonce() }}">
    alert('Hello world');
    </script>

I can see this alert.

I can’t add nonce for

@livewireScripts

I tried to add:

@livewireScripts(['nonce' => 'unsafe-inline'])

But this doesn’t work and I just see more bugs.

I already tried these urls:



but no luck… help needed :frowning:

Are you defining the Security policy headers by your own or this issue came by default?

This issue came by default? I am a beginner and I don’t know that I should consciously turn on CSP

If so, you can make a middleware and define CSP for the livewire inline style.

public function handle($request, Closure $nex)
{
   $response = $nex($request);
   $response->header->set('Content-Security-Policy', 'script-src', 'here_define_livewire_script_path');
 return $response;
}

I can’t be sure about that, because I didn’t see this issue before in livewire.

You can see more about CPS here.

You can add the nonce like this:

@livewireScripts(['nonce' => csp_nonce()])

I had some trouble with that also, using the Spatie CSP composer package: Spatie Composer CSP Package.

I had to do something like this to get the script tag to populate:

    <?php $nonce = ["nonce" => csp_nonce()] ?>
    @livewireScripts($nonce)

Not sure why.

Also, I do not think Spatie supports adding a nonce to the LiveWire Styles. I was playing around with that a bit and it looks like you could modify or override the LivewireManager.php:

protected function cssAssets()
{
    $nonce = "";
    if (null !== csp_nonce()) $nonce = 'nonce = "' . csp_nonce() . '"';
    return '<style ' . $nonce  . '>[wire\:loading], . . . . 

Something like that, with a bit better integration with the Spatie module through ENV settings.