Trellis inside iFrame

trellis
1

Is there a setting anywhere in Bedrock/Trellis that prevents the site from running inside iframe?
I’m trying to setup Facebook Page Tab app and the requirement is to run inside an iframe.

2

I’ve found add_header X-Frame-Options SAMEORIGIN; in wordpress-site.conf.j2
Is it safe to comment this out and deploy the site again?

3

Yep, it’s up to you. It’s just a secured default.

You can always change it to just allow Facebook. See https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options

4

It seems that ALLOW-FROM is not an option for chrome and safari.

5

I’m having this problem again, but now I can’t find occurrence of the string SAMEORIGIN in any of the config files.
Has anything changed with trellis from then?

6

We pull them in from https://github.com/h5bp/server-configs-nginx/blob/master/h5bp/directive-only/extra-security.conf

See https://github.com/roots/trellis/blob/ec9b11558fcb311866e89646c85ce41e8ddbfb6c/roles/nginx/templates/wordpress.conf.j2#L16

7

Can I add my own header directive to override it? I need it once again for facebook app.

8

I’m not sure what you’re showing me. That .j2 file has include directives, but where is it including those files from?
Should I download the h5bp repo and place it in the templates directory?

9
  1. Fork the https://github.com/h5bp/server-configs-nginx.git repository.
  2. Make the changes you wish to implement.
  3. Update the repo path to your fork.
  4. Update the version.
  5. Provision.
2 Likes
10

Hi! I’m having the same problem… I commented the line
#The X-Frame-Options header indicates whether a browser should be allowed
# to render a page within a frame or iframe.
# add_header X-Frame-Options SAMEORIGIN;

and restarted nginx but my iFrame still being blocked. Is there any other place were this conf is being read?

Thanks for any help!

11

I’m having the same problem.
I’ve commented the line include h5bp/directive-only/extra-security.conf; inside wordpress.conf.j2 and provisioned the server.

Didn’t work so I ssh’d to the server and tried commenting again. Restarted the server but unfortunately still doesn’t work.

Any ideas?

Thanks

12

I believe this is now setup by h5bp nginx rules.
In this file look for “Grab h5bp/server-configs-nginx”:

So you should clone the https://github.com/h5bp/server-configs-nginx.git
and replace the repo url in the main.yml file (above)
and in that repo there’s a file:
https://github.com/h5bp/server-configs-nginx/blob/cb3dc0554eb54ccfab34bfcf32988dfce1872ec2/h5bp/directive-only/extra-security.conf
That has the x-frame-options directive

That’s how I did it last time (I believe).

13

I’ve done what you suggested, provisioned the server again and even ssh’d to see if everything was set correctly.
The header is indeed commented on /etc/nginx/h5bp/directive-only/extra-security.conf but somehow I’m still getting the same:

Refused to display … in a frame because it set ‘X-Frame-Options’ to ‘SAMEORIGIN’.

14

Have you restarted the nginx?
Also you could try sending the same header from your functions.php with php funcion, to see if that works.

15

Yup I did that. I think I know what’s happening now. Anyway thanks so much for you help.

16

Can’t get this to work… What I’ve done:

  • Edited roles/wordpress-setup/templates/wordpress-site.conf.j2, commented out include h5bp/directive-only/extra-security.conf;
  • Forked the server-configs, commented out add_header X-Frame-Options SAMEORIGIN; in server-configs-nginx/h5bp/directive-only/extra-security.conf and replaced the path to the Github-repo with my edited version in roles/nginx/tasks/main.yml
  • Edited /etc/nginx/h5bp/directive-only/extra-security.conf on the remote server directly

Always re-provisioning the (remote) server or restarting nginx of course but no changes.

Any ideas? What am I missing here?

CLARIFICATION
My issue is that Trellis blocks iFrames by default, this is what the browser outputs:

Refused to display ‘https://www.google.com/maps/d/viewer?mid=xxx’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.

17

@evance Where it says Refused to display URL in a frame because it set 'X-Frame-Options' to 'sameorigin', I believe the “it” that set the header was the map, not Trellis.

For example, if I check headers on a private map:

$ curl -I https://www.google.com/maps/d/u/0/viewer\?mid\=my_private_map | grep -i frame

X-Frame-Options: SAMEORIGIN

Making the map public and using the URL provided by the map’s “Embed this map” option:

$ curl -I https://www.google.com/maps/d/embed\?mid\=my_public_map | grep -i frame

(no embed-blocking header like X-Frame-Options or CSP frame-ancestors)
2 Likes
18

You are absolutely right…!

I just grabbed the URL and didn’t recognize I was on the /viewer endpoint instead of /embed which does the trick.

Thanks so much for shedding light on this.

1 Like