App must set security headers to protect against click jacking

Shopify Discussion
1

App must set security headers to protect against click jacking.
Your app must set the proper frame-ancestors content security policy directive to avoid click jacking 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.

3 Likes
2

Have you found a solution? I set it with node cli app, still app is rejected

3

Have you found a solution? I set it with node cli app, still app is rejected

4

No Not Yet

5

Hello, im have same solution, but i set headers on router

res.setHeader(“Content-Security-Policy”, frame-ancestors https://${shop} [https://admin.shopify.com](https://admin.shopify.com);)

6

Issued resolved ?

7

I solved it by adding this:

ctx.set('Content-Security-Policy', `frame-ancestors https://${session.shop} https://admin.shopify.com`);

To the

handleRequest

method in official Shopify Node JS CLI GitHub code

1 Like
8

CSP frame-ancestors directive allows wildcard.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors#syntax

So, I think we can configure the header like this

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

I tried to use a wildcard, but my app keeps getting rejected.

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

Do I require the store name to be dynamically added to the policy on a per request basis?

10

Do I require the store name to be dynamically added to the policy on a per request basis?

Our member was allowed that by wildcard CSP.

Could you contact Shopify Staff about this?

11

I solved using a combination between @wellbranding 's solution and the routes. Here is my solution:

router.get("/", async (ctx) => {
  const shop = ctx.query.shop;

  ACTIVE_SHOPIFY_SHOPS[shop] = await loadActiveShopifyShop(shop);
  // This evaluates if the shop exists already so it doesn't load each time server reload
  if (ACTIVE_SHOPIFY_SHOPS[shop] === undefined) {
    ctx.redirect(`/auth?shop=${shop}`);
  } else {
    // At this point the store is authenticated and shop var can be used
    ctx.set(
      "Content-Security-Policy",
      `frame-ancestors https://${shop} https://admin.shopify.com`
    );

    await handleRequest(ctx);
  }
});

After this, the frame-ancestor policy is authenticated and inserted correctly within the iFrame.

1 Like
12

hi am facing same issue , but am not find the best way.

Am using laravel with shopify , but when am verify our app thats show eror.

Anyone help me for solving this issue !

13

have you got any specific solution for this issue, I get same issue in my app, and also I have developed the app using laravel+reactjs with shopify , I also don’t know from where to add ‘Content-Security-Policy’ header