Stripe integration with cashier gives me policy exception

My Laravel stripe integration gives me the following errors in my console and I dont know what to do? The app is already in production so I really need to solve this.

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-1bd1ss83rhoRESXnUSD+xUzVPZzKrKQPYKkWOj5TJIc='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

js.stripe.com/v3/three-ds-2-fingerprint-3301e06611a53f37b9462c7f63de1f08.html#intentId=seti_1P77XtAsvc4jfrbXYJwOC4Wt&locale=de&hosted=false&referrer=https%3A%2F%2Fwein-qr.at%2Fpayments%2Fcreate&controllerId=__privateStripeController2201:1 [Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-1bd1ss83rhoRESXnUSD+xUzVPZzKrKQPYKkWOj5TJIc='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

LaryAI

2 years ago

Level 58

The error message you're seeing is related to Content Security Policy (CSP), which is a security measure to prevent certain types of attacks like Cross-Site Scripting (XSS). The message indicates that your CSP is set to only allow styles from the same origin ('self') and is blocking inline styles unless they match a specific hash or nonce.

To resolve this issue, you have a few options:

Modify your CSP to include 'unsafe-inline' for styles. This is the least secure option and is generally not recommended, as it would allow all inline styles, which could potentially open up vulnerabilities.
Use a nonce or a hash for the inline styles. This is more secure than allowing all inline styles. You would generate a nonce (a unique token) for each request and include that nonce in the header and in the script or style tag.
Move all inline styles to external CSS files. This is the most secure and clean approach, as it avoids inline styles altogether and keeps your styles in separate files.

Here's how you might implement each option:

Option 1: Allowing 'unsafe-inline' (not recommended)

// In your middleware or wherever you set your CSP headers
header("Content-Security-Policy: style-src 'self' 'unsafe-inline'");

Option 2: Using a nonce

// Generate a nonce
$nonce = bin2hex(random_bytes(16));

// Send the CSP header with the nonce
header("Content-Security-Policy: style-src 'self' 'nonce-{$nonce}'");

// Then in your HTML, use the nonce in your style tags
echo "<style nonce='{$nonce}'> /* your styles here */ </style>";

Option 3: Moving inline styles to an external CSS file

<!-- Remove any inline styles from your HTML and instead link to an external CSS file -->
<link rel="stylesheet" href="path/to/your/styles.css">

Since you're using Laravel, you might be setting your CSP headers in a middleware or using a package to handle CSP. If you're using a package, refer to its documentation on how to properly set nonces or hashes for your inline styles.

Remember that changing CSP can have implications for your site's security, so choose the method that maintains security while allowing your site to function as intended. If you're not familiar with CSP, it might be a good idea to consult with a security expert to ensure that your site remains secure.

lara28580

2 years ago

Level 10

@LaryAI Added the https://github.com/spatie/laravel-csp package created a policy like so https://github.com/spatie/laravel-csp?tab=readme-ov-file#using-inline-scripts-and-styles, but the error persists.

martinbean

2 years ago

Level 80

@smoketm

This reply was automagically generated by our local A.I. Think of it as a one-off attempt to instantly solve your problem. It will not respond to further replies.

1 like

lara28580

2 years ago

Level 10

@martinbean Ok thanks for the tip :)

lara28580

2 years ago

Level 10

The big problem is my customers all of a sudden do not see the correct prices in the 3DS Modal and I think it has something to do with that.

martinbean

2 years ago

Level 80

@smoketm The error message is telling you what the problem is: you’ve added a Content Security Policy (CSP) to your website, and you have not white-listed the Stripe SDK so the browser is treating it as unsafe.

Either remove the CSP if you don’t actually know what it is and/or how to configure one; or add the rules to allow Stripe’s JS SDK to function: https://docs.stripe.com/security/guide?csp=csp-js#content-security-policy

1 like

lara28580

2 years ago

Level 10

@martinbean How can I remove the CSP, I didn't even know I set up one?

I used the package above and created a policy with the following, but it doesn't work either.

<?php

namespace App\Support;

use Spatie\Csp\Directive;
use Spatie\Csp\Policies\Basic;

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

        $this
            ->addDirective(Directive::SCRIPT, 'self')
            ->addDirective(Directive::STYLE, 'self')
            ->addNonceForDirective(Directive::SCRIPT)
            ->addNonceForDirective(Directive::STYLE)
            ->addDirective(Directive::CONNECT, ['https://api.stripe.com', 'https://maps.googleapis.com'])
            ->addDirective(Directive::FRAME, ['https://js.stripe.com', 'https://hooks.stripe.com'])
            ->addDirective(Directive::FRAME, 'https://hooks.stripe.com')
            ->addDirective(Directive::SCRIPT, ['https://js.stripe.com', 'https://maps.googleapis.com']);
    }
}

martinbean

2 years ago

Level 80

How can I remove the CSP, I didn't even know I set up one?

@SmokeTM You must have done, because it’s not something Laravel does out of the box.

Please or to participate in this conversation.