How can I add local site to the frame-ancestors of a Content Security Policy?

Viewed 3932

We have recently implemented a Content Security Policy on our site, to restrict which sites can iframe it in. We are hosting on IIS and the line in the web.config looks like this

<add name="Content-Security-Policy" value="frame-ancestors *.website.com *.otherwebsite.com" />

This works as only the specified test environments are able to iframe in the site.

Our current problem is that our clients can not access the site on their local development environments as it being blocked by the above policy. Their local site is set up in IIS with an entry in the host file which matches one of the allowed domains in the CSP, dev.website.com.

We have tried to add the following

  • localhost:*
  • 127.0.0.1:*
  • dev.website.com

Unfortunately none have worked. Any help would be appreciated, thanks.

2 Answers

This will be a late reply but I was also trying to figure out this issue in web.config and after trying some other patterns, this one have worked for me:

<add name="Content-Security-Policy" value="frame-ancestors 'self' *.example.com *.example.net http://localhost:8005" />

I had this same issue; for me, it turned out that it would only work if I specified the port on localhost (I'm working in Express):

app.use(helmet.contentSecurityPolicy({
    directives: {
      frameAncestors: ["https://some-domain.app", "http://localhost:3000"]
    }
  }))

This allows me to load the site with the iframe in it on localhost for local development.

Related