User change a plan getting "refuse to display in a frame because it set 'X-Frame-Options' to 'deny'"

chenster · ‎08-14-2020

Hello, I'm working on a Shopify marketing widget app. I got almost everything done except some weird issues when users changing the plan.

Currently, users have no problem installing the app after approve the free plan during install to use the app.

The problem comes when users later attempt to change the plan. It gets " "refuse to display in a frame ...<URL>... because it set 'X-Frame-Options' to 'deny'".

On the pricing table each has a link that goes to a my app URL in this form

https:// <myawesomeapp>.com/shopify/add_plan/standard

..then app crashes with the error message in the browser console with

Refused to display 'https://<sampleshpify-store>.myshopify.com/admin/charges/17838866591/request_recurring_application_charge?signatu...' in a frame because it set 'X-Frame-Options' to 'deny'.

I've tried to add X-Frame-Options "samesite" to Apache security.conf. No help.

I understand the browser stopped the webpage from displaying due to the X-Frame-Options settings as a security measure. But I have no idea how to get around this because the changing plan had come from the pricing table in the app website (e.g. myapp.com), then redirect to Shopify, all inside an iframe.

I felt it has probably some fundamental architectural issues with my approach as I'm still new to Shopify app development (1 month into it).

Thanks!

Cartoo

chenster · ‎08-17-2020

Base on an older discussion, I got around the X-Frame-Option limitation by using the client-side redirect that forces the top parent window to go to the confirmation url.

$confirmation_client_load = <<< CONFIRMATION_CLIENT_LOAD
<html>
<head>
</head>
<body onload="onLoadDocument()">
<script type="text/javascript">
function onLoadDocument() {
console.log("here");
console.log('{$plan['confirmation_url']}');
window.top.location.href = '{$plan['confirmation_url']}';
}
</script>
</body>
</html>
CONFIRMATION_CLIENT_LOAD;
echo $confirmation_client_load;

Not sure if there's a more elegant solution, but it works for me for now.

Cartoo

View solution in original post

chenster · ‎08-17-2020

Base on an older discussion, I got around the X-Frame-Option limitation by using the client-side redirect that forces the top parent window to go to the confirmation url.

$confirmation_client_load = <<< CONFIRMATION_CLIENT_LOAD
<html>
<head>
</head>
<body onload="onLoadDocument()">
<script type="text/javascript">
function onLoadDocument() {
console.log("here");
console.log('{$plan['confirmation_url']}');
window.top.location.href = '{$plan['confirmation_url']}';
}
</script>
</body>
</html>
CONFIRMATION_CLIENT_LOAD;
echo $confirmation_client_load;

Not sure if there's a more elegant solution, but it works for me for now.

Cartoo