Solved

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

linq-dev
Tourist
11 1 2

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.

Accepted Solution (1)
linq-dev
Tourist
11 1 2

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

View solution in original post

Replies 7 (7)

hassain
Shopify Staff (Retired)
624 104 187

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.

 

To learn more visit the Shopify Help Center or the Community Blog.

linq-dev
Tourist
11 1 2

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

linq-dev
Tourist
11 1 2

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
linq-dev
Tourist
11 1 2

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

elishakay
Tourist
11 1 1

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?

 

KieranR
Shopify Partner
333 27 115

Do you own the domain the iframe is sitting on? Could put it behind CloudFlare and use workers to edit HTTP headers on the fly. 

Full time Shopify SEO guy, based in NZ. Sometimes freelance outside the 9-5.
1080
Shopify Partner
282 8 38

@elishakay  @linq-dev  i AM USING EXPRESS JS WITH NGINX IT WAS WORKING FINE AFTER RESTART SERVICE IT WAS NOT WORKING. CAN YOU PLEAS HELP WHAT WAS ROOT CAUSE ?