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

Shopify Apps
1

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

IMG-20211221-WA0001.jpg
IMG-20211221-WA0001.jpg720×494 39.8 KB

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

IMG-20211221-WA0000.jpg
IMG-20211221-WA0000.jpg720×582 43.6 KB

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

1 Like
2

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:

hope this is helpful to someone, somewhere

3

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

4

did you solve problem could anyone help me please?

5

yes put it in the header

6

yes, check the accepted solution