Why does my PHP app show a Content Security Policy error on Shopify Charge Confirmation page?

[sebastiandev]

I am creating a new app using PHP (Symfony) and React, taking inspiration from the Laravel APP located at https://github.com/Shopify/shopify-app-template-php. However, I am facing a specific issue and do not have any idea what the problem might be.

When I click on the URL in the console after calling npm run dev, everything works great and I am redirected to the Shopify Charge Confirmation page. However, the problem occurs when I open the app in the Admin panel, and the current installation does not have an active charge. Then I notice a strange behavior:

1. I click on the app name to open it.
2. I see a request to my app in the console: https://xxx.ngrok.io/?embedded=1&hmac=...&host=...&locale=en-US&session=...&shop=...&timestamp=16802...
3. In the response, I can see a redirect 302 to the charge page: https://xxx.com/admin/charges/X/Y/RecurringApplicationCharge/confirm_recurring_application_charge?si......
4. I can see an empty page (my app is not loaded) and an error in the console: "Refused to load https://xyz.myshopify.com/admin/auth/login because it does not appear in the frame-ancestors directive of the Content Security Policy."

I don't have any idea how to fix this issue.

[okur90 · Accepted solution]

The issue you're experiencing is related to Shopify's Content Security Policy (CSP). When you try to load the charge confirmation page within the Shopify admin panel, it's being blocked due to the CSP restrictions.

To fix this issue, you should handle the billing process in a way that it opens in a new window or a full-page redirect, rather than within the embedded app frame.

When the app is loaded and you detect that there's no active charge, send a message from the app frontend (React) to the backend (PHP Symfony) to initiate the billing process.

In your PHP Symfony backend, create a route that handles the billing process. This route should redirect the user to the charge confirmation page with a full-page redirect, instead of returning a 302 redirect.

In your React frontend, listen for the response from the backend and use the `window.top.location.href` property to perform the full-page redirect. This will open the charge confirmation page in the parent window, bypassing the CSP restrictions.

// Receive the response from your backend containing the charge confirmation URL
const chargeConfirmationUrl = response.data.url;

// Perform the full-page redirect
window.top.location.href = chargeConfirmationUrl;

You can avoid the CSP issue with this approach and allow users to see the charge confirmation page without any errors.

[sebastiandev]

thanks for you help.

[MykhailoMonchak]

Hello, @okur90 

Thank you for that but unfortunately, I'm getting an error trying to redirect to a charge confirmation URL from an embedded app.

Do you have any ideas on that?

Unsafe attempt to initiate navigation for frame with origin 'https://admin.shopify.com' from frame with URL 'https://xxx.herokuapp.com/?embedded=1&hmac=123&host=abc&id_token=qwe..-&locale=en-US&session=123&sho...'. The frame attempting navigation is targeting its top-level window, but is neither same-origin with its target nor has it received a user gesture. See https://www.chromestatus.com/feature/5851021045661696.

Uncaught (in promise) DOMException: Failed to set the 'href' property on 'Location': The current window does not have permission to navigate the target frame to 'https://test.myshopify.com/admin/charges/123/123/RecurringApplicationCharge/confirm_recurring_applic...'.