Safe to disable X-FRAME-OPTIONS for Content Security Policy?

Is it safe to disable frameguard and use contentSecurityPolicy instead? For some reason, Chrome is prioritizing X-FRAME-OPTIONS, and it doesn’t have a way to allow an entire domain, only a specific URL.

This is the solution I came up with:

helmet({
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
    },
  },
  frameguard: false,
})

Since I have an iframe I’m using for authentication on a variety of same-domain (but not same-subdomain) sites, I’m looking for a way of replacing frameguard with contentSecurityPolicy so I can set frameSrc: ["'self'", '*.example.com']

[EvanHahn]

Okay—thanks!

tl;dr, it’s safe to disable X-Frame-Options as long as you also specify the frame-ancestors Content Security Policy directive, but be wary of the latter’s browser support.

At the end of the day, you have two goals:

1. Your outer pages should only allow auth-example-iframe.com to be put in an iframe.
2. Your iframe should only be embedded by foo.example.com and boo.example.com.

(Obviously these are example domains, and I’m only assuming you have two outer domains, but this should be easy to map to your actual setup.)

These two goals are largely unrelated in terms of implementation—you’ll need to set two different policies in order to achieve this.

Goal 1: only allow the auth iframe

Your outer pages will want a Content Security Policy that only allows auth-example-iframe.com to be framed. You can achieve this with the frame-src directive.

Here’s what that might look like with Helmet:

app.use(helmet.contentSecurityPolicy({
  directives: {
    // ...
    frameSrc: ['https://*.auth-example-iframe.com']
  }
}))

The more specific you can make that URL, the tighter your policy will be (which is generally a good thing). For example, if you know the exact URL, you can specify that:

frameSrc: ['https://auth.auth-example-iframe.com/auth']

The X-Frame-Options header (helmet.frameguard) is irrelevant here. I’d recommend that you include it so that your outer pages don’t get put in iframes, but that’s a separate issue.

Goal 2: only allow the iframe to be in some places

The iframe should only be embedded on foo.example.com and boo.example.com, let’s say. You can achieve this with the frame-ancestors directive.

Because you want multiple different domains, the X-Frame-Options header should be removed, as you’ve done.

Here’s what that might look like in code:

app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      frameAncestors: [
        'https://foo.example.com',
        'https://boo.example.com'
      ]
    }
  },
  frameguard: false
}))

If you wish to allow any subdomain of example.com:

frameAncestors: ['https://*.auth-example-iframe.com']

Browser support might be a concern here. Content Security Policy Level 2 deprecates frame-src and introduces child-src and frame-ancestors. Not all browsers support CSP 2.

Does that help?

[matusferko]

app.use(helmet({frameguard: false})) executes framequard middleware with option SAMEORIGIN. There is no way currently to configure helmet to avoid X-Frame-Options header. Am I missing something?