[Bug]: Paddle CSP for production prevents running paddle inside an electron app

[marcolarosa]

What happened?

Creating a new ticket as per https://github.com/PaddleHQ/paddle-js-wrapper/issues/22#issuecomment-2110699448

I'm seeing a CSP issue with padde inside an electron app when built.

I have paddle integrated into an electron app that has the following CSP:

 <meta
            http-equiv="Content-Security-Policy"
            content="default-src 'self' https://describo.github.io https://stamen-tiles-a.a.ssl.fastly.net/ https://api.github.com https://raw.githubusercontent.com https://api.ror.org;
            script-src 'self' https://cdn.paddle.com/paddle/v2/paddle.js https://public.profitwell.com/js/profitwell.js;
            style-src 'self' 'unsafe-inline' https://sandbox-cdn.paddle.com/paddle/v2/assets/css/paddle.css https://cdn.paddle.com/paddle/v2/assets/css/paddle.css;
            connect-src https://www2.profitwell.com;
            img-src * crate-file: data:;
            media-src crate-file:;
            frame-src https://buy.paddle.com https://sandbox-buy.paddle.com;"
        />

In dev, connecting to the paddle sandbox works fine but when the app is built, it refuses to connect to paddle prod.

In the console I see: [Report Only] Refused to frame 'https://buy.paddle.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors ". Note that '' matches only URLs with network schemes ('http', 'https', 'ws', 'wss'), or URLs whose scheme matches self's scheme. The scheme 'https:' must be added explicitly.

[Report Only] Refused to frame 'https://buy.paddle.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors ". Note that '' matches only URLs with network schemes ('http', 'https', 'ws', 'wss'), or URLs whose scheme matches self's scheme. The scheme 'https:' must be added explicitly.

If I add frame-ancestors to the CSP I see: "The Content Security Policy directive 'frame-ancestors' is ignored when delivered via a element.".

If I remove it altogether it happens.

And if I try to rewrite it inside electron as per https://github.com/metabase/metabase/issues/38637#issuecomment-1936852930 it fails as well.

Basically, I think this is something that needs to be sorted out on your side.

Please help as I can't publish my app without being able to run paddle.

Steps to reproduce

Not applicable

What did you expect to happen?

No response

How are you integrating?

Electron app with VueJS

Logs

No response

[vijayasingam-paddle]

Hi @marcolarosa,

I was discussing this issue internally. Unfortunately, we do not support Electron based applications in Paddle billing yet.

Due to security reasons, we allow checkouts to be launched only from approved domains. As Electron apps do not have a domain, the validation rule prevents the user from opening the checkout.

This restriction is enabled only in production. Thus you were able to test in sandbox without running into this issue. I am sorry about this, our documentation should have mentioned this. We will update our documentation about the differences between sandbox and production.

We do have plans to make it work in Electron applications. however, we do not have any concrete timelines on when it will be available.

Alternatively, if you are in a time crunch, please integrate Paddle with your web application.

Please let us know if we can help you with anything else. Thank you

[marcolarosa]

ok - thanks for the detailed response.

This was a show stopper for me so i did integrate it into the main website but from a usability point of view, I would like to be able to run it inside electron.

Another nice to have would be auto setting the email from my app and showing that in the paddle form, but making it readonly, so that my app can ensure that purchases are tied to the correct email (ie stop user's mistyping or typing a different address...)

[vijayasingam-paddle]

Hi @marcolarosa, I agree, able to launch checkout from within Electron is a big user experience improvement. I will update you when it is available.

Another nice to have would be auto setting the email from my app and showing that in the paddle form, but making it readonly, so that my app can ensure that purchases are tied to the correct email (ie stop user's mistyping or typing a different address...)

You can do this now.

1. Set checkout.settings.allowLogout as false when initializing paddle. This will prevent the user from changing their email address.
2. Pass customer.email while calling Paddle.Checkout.open function, it should pre-populate the email address.

Once both steps are done, you should see the email pre-populated in the checkout, the email field will be disabled and the user will not be able to change them

Thank you.

[marcolarosa]

Thanks @vijayasingam-paddle!

Worked a treat.