New App Bridge using Shopify node template

App Bridge
1

I have an app that was built with the Shopify Node template that I’m migrating to the new App Bridge version. I’m having trouble getting it to work properly.

I have many buttons in my app that redirect to other screens. To do this I’m using the new Navigation API where you can do something like this:

open("/settings", "_self");

The problem is when I do this it sends the user to <base-app-url>/settings which doesn’t contain the usual shop param in the URL. This means I’m not able to figure out which shop is requesting this and therefore I’m not able to set the Content-Security-Policy header correctly, which breaks my app. This is the error I’m getting:

Refused to frame ‘<base-app-url>’ because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘none’”.

Normally, Shopify automatically adds information to the URL so requests look something like this:

https://<base-app-url>/settings?embedded=1&hmac=<hmac>&host=<host>&locale=<locale>&session=<session>&shop=<shop>&timestamp=<timestamp>

And from this URL we can get the Shop and then correctly set the Content-Security-Policy header.

Do I have to manually set the shop for each request? Surely not, so I’m guessing something must be broken but I’ve followed all the setup steps.

2

You will need to use navigate instead.

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

navigate("/settings")
3

Looks to have worked, thanks. Any idea why I can’t use open()?