Frame ancestors violation in embedded app

Retired Boards Appdev Tools

Topic summary

Main issue: Embedded app triggers a Content Security Policy (CSP) error when switching stores: “Refused to frame … because an ancestor violates ‘frame-ancestors’.” It persists until logout/clearing cookies; seen in Safari and also in Chrome Incognito.

Context: Backend (Django) sets CSP frame-ancestors to admin.shopify.com plus the shop’s domain. Attempts to use App Bridge client-side redirect during auth caused an infinite loop. Upgrading to App-Bridge 2.3.1 did not resolve it; ensure “Embed in Shopify admin” is enabled in app settings.

Key insight: The Python Shopify API’s create_permission_url still targets the legacy shopname.myshopify.com admin path. This mismatch with the newer admin.shopify.com/store/{shop} can cause framing/CSP issues. Manually constructing the permission URL fixes it for new admin, but some shops still use the old admin domain.

Next steps: Implement client-side detection of which admin domain (admin.shopify.com vs myshopify.com) the shop uses and generate the appropriate permission URL. Confirm embed setting and avoid redirect loops.

Status: No final resolution posted; awaiting update. Middleware/code snippets and linked docs are central to the diagnosis.

Summarized with AI on January 20. AI used: gpt-5.
1

I get this error for my embedded app when I switch between stores. When I logout and log back in the app works for the first shop, but when I switch to a different store this error pops up and doesn’t go away until I log out or clear the cookies. Also when loading the app in Safari it shows the same error:

Refused to frame 'https://myshop.myshopify.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

I’m using Django on the backend and setting the frame ancestor CSP header in the middleware:

class CspMiddleware:
    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):

        response = self.get_response(request)

        frame_ancestors = 'https://admin.shopify.com'

        if request.session.get('shopify') and request.session.get('shopify').get('shop_url'):
            shop_url = request.session['shopify']['shop_url']
            frame_ancestors += f' https://{shop_url}'
            response['Content-Security-Policy'] = f"frame-ancestors {frame_ancestors}"

        return response

From looking at the logs the CSP headers seem to be all there and correct. It might be that there is an App Bridge client side redirect needed in the auth process? I’ve followed the directions and tried redirecting to the different auth urls but kept getting an infinite loop that breaks the app eventually.

Hopefully there is someone here that ran into a similar situation and can help out.

2

Hi Nick,

I too am running into this issue!

I have an older custom app running for a single client. I’ve upgraded it to App-Bridge 2.3.1 but that hasn’t helped.

You mention a redirect loop, have you made sure that in your partner account’s app settings, you have embed enabled?

3

I figured part of it out, the create_permission_url function from the Python Shopify API still only has the old admin url (shopname.myshopify.com) in it, so the permission url doesn’t work reliably for the new admin url (admin.shopify.com/store/shopname/).

I created the permission url myself without using the helper function and that worked. However, it turns out some shops are still on the old admin url, so now I’m at the client side Javascript part where I have to detect which shop url is being used and then generate the permission url client side. I’ll post an update here when I have that working.

4

Any update please , i am having the same issue when embeded my app but only happens in incognito mode of chrome