Content Security Headers and iframe

Ivan_B · August 12, 2018, 10:16am

Hi!
I’m trying to embed specific wordpress (use bedrock and trellis) page in an iframe (in another site with different domain). But dev console shows error:
"Refused to display 'https://site.com' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'"."

Headers of the the page are following:
"X-Frame-Options: SAMEORIGIN"
"Content-Security-Policy: frame-ancestors 'self'

I’ve tried to use php header_remove() for that page, and tried to modify headers with wp hooks wp_headers and send_headers, but that gave no result.
Search in wp code shows that headers (CSP and X-Frame-Options) are being sent only for wp Customizer page, and other pages of a site do not have them. Standart wp sites, which are not built on bedrock and trellis, also don’t have CSP and X-Frame-Options headers

I’m a bit puzzled by that situation, maybe somebody know how to solve that and remove security headers from specific page?

Thank you!

ben · August 13, 2018, 4:46pm

github.com

roots/trellis/blob/e3315fef63f290757e5ab249c96c01dadb84a8c2/roles/nginx/templates/h5bp/directive-only/extra-security.conf

# 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 always;

# MIME type sniffing security protection
#	There are very few edge cases where you wouldn't want this enabled.
add_header X-Content-Type-Options nosniff always;

# The X-XSS-Protection header is used by Internet Explorer version 8+
# The header instructs IE to enable its inbuilt anti-cross-site scripting filter.
add_header X-XSS-Protection "1; mode=block" always;

# with Content Security Policy (CSP) enabled (and a browser that supports it (http://caniuse.com/#feat=contentsecuritypolicy),
# you can tell the browser that it can only download content from the domains you explicitly allow
# CSP can be quite difficult to configure, and cause real issues if you get it wrong
# There is website that helps you generate a policy here http://cspisawesome.com/
# add_header Content-Security-Policy "default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' https://www.google-analytics.com;" always;

Boz_Bundalo · August 15, 2019, 10:56pm

Hi Ben,

can you clarify what is the solution here. I found the file and it’s exactly set like yours but my default Content-Security-Policy for frame frame-ancestors defaults always to ‘self’ after re-provision, no matter what I do.

Same with X-Frame-Options. I see them changed, but then when I ping the headers to check it shows the changed settings and then prints out again / reverts to:

X-Frame-Options SAMEORIGIN
Content-Security-Policy "frame-ancestors ‘self’;

robrecord · March 30, 2022, 10:21am

step 1

In trellis/roles/nginx/templates/h5bp/directive-only/extra-security.conf:

If your iframe is on another site, DON’T uncomment that first line (X-Frame-Options) but instead add another below:

add_header Content-Security-Policy "frame-ancestors url-1.com url-2.com;"

This is the right approach for modern browsers.

step 2

To allow the above file to be loaded, in trellis/group_vars/all/security.yml, add:

h5bp_extra_security_enabled: true

step 3

Then, in trellis/group_vars/production/wordpress_sites.yml file (or whichever remote you want this enabled for) you may need to add nginx_embed_security: false as shown below, to disable conflicting headers being added:

wordpress_sites:
  mydomain.com:
    #... other options ...#
    nginx_embed_security: false

step 4

reprovison the affected remotes