How to fix - "App must set security headers to protect against clickjacking app" rejection issue

[prank7]

I am trying to submit an app using Express.js on the backend.
I am setting the headers like this in a middleware at app level before any of the routes like this- 

app.use((req, res, next) => {
  var shopURL = req.query.shop;
  res.setHeader("Content-Security-Policy", `frame-ancestors ${shopURL} admin.shopify.com;`)
  next();
})

I have also tried other combinations like - 

res.setHeader("Content-Security-Policy", `frame-ancestors https://${shopURL} https://admin.shopify.com;`)

I can see the headers being set exactly like that in response headers in the browser.

But when I submit the app for review, it's rejecting saying -

App must set security headers to protect against clickjacking.

Your app must set the proper frame-ancestors content security policy directive to avoid clickjacking attacks. The 'content-security-policy' header should set frame-ancestors https://[shop].myshopify.com https://admin.shopify.com, where [shop] is the shop domain the app is embedded on.

This is extremely frustrating. There is no tooling from Shopify end to really test these issues out. The documentation is not sufficient and doesn't say anything other than this.

Would love to get some help on this. thanks

[SullivanStudios]

Did you end up getting any help with this? 

We have the exact same issue. 

[prank7]

Yes, please check the accepted answer.

[isfakmustakim]

Can you tell me how to fix Missing Secure Referrer-Policy Header ?

[prank7 · Accepted solution]

I was able to resolve it. My app.js looks like this - 

var app = express();
app.use(cookieParser());
app.use(function (req, res, next) {
  var shopurl;
  var fa;

  if (req.query.shop !== "") {
    shopurl = req.query.shop;
    fa = `frame-ancestors https://${shopurl} https://admin.shopify.com`;
    res.setHeader(
      "Content-Security-Policy",
      fa
    );
  }
  next();
});

I was using `Helmet` package before for various security reasons but then I removed it and it started to work. 

[1080]

@prank7  can you please help on the same CSP Error.
My app in express js 

app.use((req, res, next) => {
    const shop = req.query.shop;
    if (Shopify.Context.IS_EMBEDDED_APP && shop) {
      res.setHeader(
        "Content-Security-Policy",
        `frame-ancestors https://${shop} https://admin.shopify.com;`
      );
    } else {
      res.setHeader("Content-Security-Policy", `frame-ancestors 'none';`);
    }
    next();
  });

But still app get rejected what was the Correct CSP to set into header !

[Girish_Rajwani]

Hey, we have to set frame ancestors header for every request and response?

Please confirm.

Thanks in advance 😊

[ameernormie]

If you are using next app to build the shopify app then in the home page i.e. index.tsx, index.jsx

Add the following code

export async function getServerSideProps(context: any) {
  if (context?.query?.shop)
    context.res.setHeader(
      "Content-Security-Policy",
      `frame-ancestors https://${context.query.shop} https://admin.shopify.com`,
    );
  return {
    props: {},
  };
}

This successfully submitted my app.

[syedusama0786]

@prank7 Hey ! I was facing the same issue and got the answer here thanks you all for it. can you please clear one thing up, how can I test that CSP is set in my header?