Refused to display 'url' in a frame because it set 'X-Frame-Options' to 'deny'

Solved
Highlighted
Tourist
11 1 1

Hi, I've been developing my app locally using ngrok without errors but when trying to run it on my linux server this issue occurs.

Refused to display '{URL}' in a frame because it set 'X-Frame-Options' to 'deny'.

I am assuming it has something with the redirect with during OAuth but I followed the React tutorials and assumed that is how it should be setup. Do I need to add in the redirect functionality described here https://help.shopify.com/en/api/embedded-apps/app-bridge/oauth or should the react tutorial with koa be correct for this?

 

Haven't been able to find a solution anywhere for this currently. Any help is appreciated.

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
624 103 124

Hey @linq-dev ,

 

If you are following the tutorial of "Build a Shopify app with Node and React", then through the tutorial you will be asked to utilize the 'koa-shopify-auth' package which will handle all of the authentication and OAuth process for you. So you would not need to worry about adding in functionality yourself for handling the authentication + redirection yourself if you are using this package.

 

For the error you are experiencing, web servers have the option of setting a response header of `X-Frame-Options: DENY`, which causes the web browser to refuse to render that page if the content window is inside some kind of frame.  Since all embedded applications are rendered inside an iframe, this option must be turned off on your web server. Could you verify that this option is turned off on the Linux Web Server you are using to host your application?  Get more information about the X-Frame-Option headers here:https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options.

 

Hassain | Developer Support Specialist @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

1 Like
Highlighted
Tourist
11 1 1

So we need to only unset the "X-frame-Options" on the linux server itself to allow this to go through?

0 Likes
Highlighted
Tourist
11 1 1

This is an accepted solution.

Thank you for your guidance. I focused on removing X-Frame-Options from multiple places like so to get it resolved.

 

server.js using koa I added the following -

 
const lusca = require('koa-lusca');



app.prepare().then(() => {
  const server = new Koa();
  server.use(lusca.xframe({value: ''}));
 
Then in the nginx.conf apply the following -
add_header X-Frame-Options "";
 
As well as here if you are using snippets from https://cipherli.st/
./snippets/ssl-params.conf
remove
add_header X-Frame-Options DENY;
reload nginx and start application and then it will be resolved. 
 
My main issue is that I forgot about the cipherlist configuration I extend from the nginx.conf was overwriting the headers with DENY.
 
Also to verify you removed the header correctly, use this command to check while application and nginx is up.
 
wget -q --server-response https://${your.url}.com
0 Likes
Highlighted
Tourist
11 1 1

Correction, the lusca addition to add an empty x-frame-options header is not needed for this to work.

0 Likes
Highlighted
Tourist
8 1 0

Still happening. I've added the lusca snippet, plus edited my nginx configuration on my server: at "/etc/nginx/sites-available/default"

 

added:

add_header X-Frame-Options "";

and 

proxy_hide_header X-Frame-Options;

on all my running processes. Has anyone figured out how to get rid of this error once and for all?

 

0 Likes