Refused to apply inline style because it violates the following Content Security Policy directive

[viveksudalai]

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-QflBjTXURnTw3IiyZ6V4FAcW7ROaxQmB' http://127.0.0.1:8002/adminapp/js/app.js https://fonts.gstatic.com https://fonts.googleapis.com/css2 https://fonts.googleapis.com/css https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://static.opentok.com". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.

i have created my own policy and added in the config/csp.php file and added the nonce in the login.blade.php file. But i am getting above error.

My csp.php file
'policy' => App\Http\Policies\CSPExtended::class,

My CSPExtended File

class CSPExtended extends Basic
{
public function configure()
{
parent::configure();

    $this->addDirective(Directive::CONNECT, ['self', env('MIX_API_URL')]);
    $this->addDirective(Directive::SCRIPT,  ['self', 'http://127.0.0.1:8002/adminapp/js/app.js', 'https://fonts.gstatic.com', 'https://fonts.googleapis.com/css2', 'https://fonts.googleapis.com/css',  'https://cdnjs.cloudflare.com', 'https://cdn.jsdelivr.net', 'https://static.opentok.com']);
    $this->addDirective(Directive::STYLE,  ['self', 'http://127.0.0.1:8002/adminapp/js/app.js', 'https://fonts.gstatic.com', 'https://fonts.googleapis.com/css2', 'https://fonts.googleapis.com/css',  'https://cdnjs.cloudflare.com', 'https://cdn.jsdelivr.net', 'https://static.opentok.com']);
    $this->addDirective(Directive::FONT, ['self', 'https://fonts.gstatic.com', 'https://fonts.googleapis.com/css2', 'https://fonts.googleapis.com/css',  'https://cdnjs.cloudflare.com', 'https://cdn.jsdelivr.net', 'https://static.opentok.com']);
   
 

    $this->addNonceForDirective(Directive::CONNECT, ['self', env('MIX_API_URL')]);
    $this->addNonceForDirective(Directive::FONT, ['self', 'https://fonts.gstatic.com', 'https://fonts.googleapis.com/css2', 'https://fonts.googleapis.com/css',  'https://cdnjs.cloudflare.com', 'https://cdn.jsdelivr.net', 'https://static.opentok.com']);
    $this->addNonceForDirective(Directive::SCRIPT, ['self', 'http://127.0.0.1:8002/adminapp/js/app.js', 'https://fonts.gstatic.com', 'https://fonts.googleapis.com/css2', 'https://fonts.googleapis.com/css',  'https://cdnjs.cloudflare.com', 'https://cdn.jsdelivr.net', 'https://static.opentok.com']);
    $this->addNonceForDirective(Directive::STYLE,  ['self', 'https://fonts.gstatic.com', 'https://fonts.googleapis.com/css2', 'https://fonts.googleapis.com/css',  'https://cdnjs.cloudflare.com', 'https://cdn.jsdelivr.net', 'https://static.opentok.com']);
   
  
}

}

Login.php

<style nonce="{{ csp_nonce() }}"> :root { --background: #3e91c4; --background-faded: #E5F4FA; --background-faded-75: #3e91c475; --background-faded-25: #3e91c425; --btn-color: #3e91c4; }

</style>

<script nonce="{{ csp_nonce() }}" src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>

<script nonce="{{ csp_nonce() }}" src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>

<!-- <script src="https://static.opentok.com/webrtc/v2.2/js/opentok.min.js"></script> -->
<script nonce="{{ csp_nonce() }}" src="https://static.opentok.com/v2/js/opentok.min.js"></script>

{{-- Core JS Files --}}
<script nonce="{{ csp_nonce() }}" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- <script src="{{ asset( 'adminapp/js/app.js' ) }}"></script> -->
<script nonce="{{ csp_nonce() }}" src="{{ asset( 'adminapp/js/app.js' ) }}"></script>

[DevAbdoTolba]

Here are a few things you could check:

1. Ensure that the nonce generated in the server-side matches with the one in the CSP policy.

2. Check if there’s a default CSP being applied that all content needs to pass. When you add another policy, it still needs to pass the original one. Adding another can only make it stricter23.

3. If you’re testing in a local environment, some browsers might behave differently with CSP. For example, Safari does not support the ‘strict-dynamic’ token1.

[viveksudalai]

How to ensure that the nonce generated in the server-side matches with the one in the CSP policy?

attached my logs

[DevAbdoTolba]

Try to add 'unsafe-inline'

$this->addDirective(Directive::STYLE,  ['self', 'unsafe-inline', 'http://127.0.0.1:8002/adminapp/js/app.js', 'https://fonts.gstatic.com', 'https://fonts.googleapis.com/css2', 'https://fonts.googleapis.com/css', 'https://cdnjs.cloudflare.com', 'https://cdn.jsdelivr.net', 'https://static.opentok.com']);

[viveksudalai]

I developed project with Laravel and VueJS and i don't want to add 'unsafe-inline' because due to security issue. Is there any other solution is available.

[DevAbdoTolba]

Other than that, I would recommend using an external file for styling