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

Retired Boards Appdev Tools
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.

2

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.

1 Like
3

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

4

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

1 Like
5

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

6

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?

7

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.

8

@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 ?

1 Like
9

Hi,

On our server on this redirect on the “/” route:

server.route({
path: ‘/’,
method: ‘GET’,
handler: function (request, reply) {
reply.redirect(‘https://apps.shopify.com/partners/widgetic’)
.header(‘Content-Security-Policy’, frame-ancestors https://${request.query.shop} [https://admin.shopify.com](https://admin.shopify.com))
.header(‘X-Frame-Options’, ‘ALLOW-FROM *’);
},
And even if we add the header, the "

https://admin.shopify.com/" comes with the ‘X-Frame-Options’ set on DENY.

});

Is there another way we could override it?