Configuring CSP for iframe protection

Partner Discussions
1

Background & Architecture

I am the developer of an embedded app. One key difference between the Shopify remix template and my app is that I have a multi process architecture.

  • Vite / Vue SPA frontend hosted as a static site
  • Django / DRF backend API

On the Shopify admin panel, my static site is embedded by the app surface iframe, where once loaded, my static site calls my API.

It is my goal to set up a Content Security Policy (CSP) for iframe protection as outlined here:

My Problem

The requirements state:

Set the frame-ancestors directive dynamically based on the current shop domain and the Shopify admin domain . Setting this directive guarantees that your app can be framed only within the shop admin.

However, my frontend is hosted statically so I cannot know the current shop domain on initial load. How can I correctly set frame-ancestors with this architecture? has anyone experienced a similar issue?

2

Hey,

I use a similar architecture; my security headers look like below.
Ended up wildcarding the frame accessors to *.myshopify.com which isn’t actually used anymore ( i don’t believe) but at the time it was storeID.myshopify.com.
They now use admin.shopify.com, so I added that.
Hope it helps, love this architecture!

  X-XSS-Protection: 1; mode=block
  X-Content-Type-Options: nosniff
  X-DNS-Prefetch-Control: off
  Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
  Referrer-Policy: same-origin
  Permissions-Policy: accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(),payment=(), usb=()
  Server: pimsical
  Content-Security-Policy: default-src 'none'; script-src 'self' https://cdn.shopify.com; img-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self'; font-src 'self'; base-uri 'self'; form-action 'none'; frame-ancestors 'self' https://*.myshopify.com https://admin.shopify.com; manifest-src 'self'; frame-src 'self'; media-src 'self';
1 Like
3

Hey Jordan!

Thank you so much for chiming in here. I will give your solution a shot and follow up in this thread if I run into any issues.

Much appreciated :slight_smile:

4

No problem :slight_smile:
Could you link to this from your other comment where you asked about this on a thread about separating your Shopify UI from API please :pray:
Just for consistency, incase someone finds that one but not this post

1 Like