Question 347985 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel's CSP third-party package JavaScript files are blocked or prevented from applying inline styles

I am implementing CSP in my Laravel-based project using a package, but I encountered an error in my console: Content-Security-Policy: The page’s settings blocked the loading of a resource at inline ("style-src").

The console has https://js.hubspot.com/web-interactives-embed.js link.

My CSP is as below

base-uri 'self';
connect-src 'self' www.google-analytics.com t.clarity.ms cta-service-cms2.hubspot.com forms.hubspot.com forms.hscollectedforms.net api.hubapi.com api.hubspot.com;
default-src 'self';
form-action 'self';
img-src 'self' staging.bizgift.com www.facebook.com track.hubspot.com perf-na1.hsforms.com forms.hsforms.com bg-staging-card-data-image.s3.us-east-2.amazonaws.com;
media-src 'self';
object-src 'none';
script-src 'self' 'nonce-xGOAfkOT7dzkL1Lm9iaCYQSUFKaUl9mB' www.clarity.ms www.googletagmanager.com js.hs-scripts.com connect.facebook.net js.usemessages.com js.hscollectedforms.net js.hsleadflows.net js.hs-analytics.net js.hsadspixel.net js.hs-banner.com js.hubspot.com https://www.google.com/recaptcha/api.js https://www.gstatic.com/recaptcha/releases/ 'sha256-t4h5VBmDF1HalHj1RIc5rlbzUOVz49wxo+GLAmeWMck=' 'sha256-T916iAHsYCoazOC03cjMMYogCMNmmLm8w2bnMJcVCpI=' 'sha256-DOhucvj5bwyKXX02OUWhVzdUmy+vwezf/yB6BagJdXY=' 'sha256-3g/2E0Wxcw3seFILyZ99YcO9qd7UTSq6biYU+Ax6FRA=' 'sha256-FrEDD233IMeaBOJDMuhTCXG5WkM29jFccD81Q39RsG0=' 'sha256-uRfQyDYxE8FsDbNhR0BF1yVYE9W02Z/xa+uG4/sDaII=' 'sha256-L6v7VHQvrD+uZgEcNVg+dqEMhEjDx6GLydm1hc3sTyk=' 'sha256-gaoCjDPzeBGz9m4DY/gux3C7hM8DaZhy4nLGoTX/dUY=';
style-src 'self' 'nonce-xGOAfkOT7dzkL1Lm9iaCYQSUFKaUl9mB' 'unsafe-inline' fonts.googleapis.com;
child-src 'self';
font-src 'self' staging.bizgift.com fonts.gstatic.com;
frame-src js.usemessages.com;
block-all-mixed-content;

enter image description here

Can anyone help me with fixing such errors?

Tags:

2

Answers


  1. 0

    There are likely at least 2 problems:

    1. Eval. The first error indicates that you are using an eval function. You’ll need to rewrite this code as explained in https://web.dev/articles/csp#eval_too. If that is not possible and you can not find any other solution you might have to add ‘unsafe-eval’ to script-src.
    2. The other errors mention inline style, but ‘unsafe-inline’ is allowed according to the style-src you have provided. Most likely there is another CSP present which blocks inline style. Check response headers and meta tags for the document for other CSPs that need to be modified/removed. Another reason could be that your CSP is not built/parsed correctly.
    Login or Signup to reply.
  2. 0

    You can try instead of putting styles directly in the HTML, you can put them in separate files. Or, if you really need to put styles in the HTML, you can use a special code to make it safer.

    In your case, since you’re using Laravel, you can make a small change to your code to allow these styles safely. This change involves creating a unique code for each page visit, adding it to the styles in your HTML, and updating your security settings to allow these specific styles.

    1)Generate nonce in your laravel controller:

    $nonce = base64_encode(random_bytes(8)); // try to generate nonce

    1. add nonce style tag in your html:

    <style nonce="<?php echo $nonce; ?>"> /* Your style here */ </style>

    1. Update your CSP to allow styles with the nonce:

    style-src 'self' 'nonce-xGOAfkOT7dzkL1Lm9iaCYQSUFKaUl9mB' 'nonce-<?php echo $nonce; ?>' fonts.googleapis.com;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search