Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

Solved

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

HardikM
Shopify Partner
13 1 6

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

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

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

Accepted Solution (1)

HardikM
Shopify Partner
13 1 6

This is an 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:

hope this is helpful to someone, somewhere

View solution in original post

Replies 5 (5)

HardikM
Shopify Partner
13 1 6

This is an 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:

hope this is helpful to someone, somewhere

zahid3d29
Shopify Partner
75 5 28

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

Need a Shopify developer? Chat on WhatsApp
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip , my code a perfect blend!   ❤️
Cargologi
Shopify Partner
7 0 0

did you solve problem could anyone help me please?

HardikM
Shopify Partner
13 1 6

yes, check the accepted solution

HardikM
Shopify Partner
13 1 6

yes put it in the header