issue while Implementing Content-Security-Policy in an public app

[HardikM]

Hi,

I'm trying to develop a public app, & having nightmares while implementing Content-Security-Policy as per https://shopify.dev/apps/store/security/iframe-protection

at first, I added 

Content-Security-Policy: frame-ancestors https://*.myshopify.com https://admin.shopify.com;

and submitted the app, the review failed and the reply for the failure I received was 

hence I added the following code

res.setHeader(
    "Content-Security-Policy",
    "frame-ancestors https://cambridgetestshop.myshopify.com https://admin.shopify.com https://*.myshopify.com https://example.myshopify.com"
  );

at this stage, the review failed but for reasons other than Content-Security-Policy, which should ideally mean I was able to implement the Policy properly and it did work. 

I updated the app, as per the other requirements mentioned in the reply mail and resubmitted the app, but now I got another mail rejecting review as follows

hence I updated the code as follows and resubmitted the code

server.use(function (req, res, next) {
  var shopurl;
  if (req.query.shop !== "") {
    shopurl = " https://" + req.query.shop;
    res.setHeader(
      "Content-Security-Policy",
      `frame-ancestors ${shopurl} https://admin.shopify.com`
    );
    res.setHeader("Access-Control-Allow-Origin", "https://www.youtube.com/*");
  }
  next();
});

but even after this, the app is getting rejected for Content-Security-Policy can someone please guide me on an urgent basis, as to what I'm doing wrong here.

ps.: I did try out Content-Security-Policy-Report-Only and didn't get any errors, but the review is just returning negative

[HardikM · Accepted solution]

it seems I finally figured it out after all, as the following snippet is currently working fine

//Content Security Policy
server.use(function (req, res, next) {
  var shopurl;
  var fa;

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

things to note:

•  you don't need to put "https://"
• you don't need to add "https://cambridgetestshop.myshopify.com" or "https://example.myshopify.com" because the shopurl variable will automatically add it when you install the app, so only above 2 URLs should suffice

hope this is helpful to someone, somewhere

[zahid3d29]

Hello,  congrats. Yo solved it alone. But, I need to know that, where yo placed it? In header? I made a PHP app. Thanks.

[Cargologi]

did you solve problem could anyone help me please?

[HardikM]

yes, check the accepted solution

[HardikM]

yes put it in the header