Frame ancestors violation in embedded app

nickcaps
Shopify Partner
18 0 3

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.

Shopify Specialist & App Developer
Replies 3 (3)

RiptideApps
Shopify Partner
11 0 3

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? 

nickcaps
Shopify Partner
18 0 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.

 

 

Shopify Specialist & App Developer
ratlakute
Shopify Partner
1 0 0

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