App bridge remote redirect

Shopify Apps
1

Greetings. We received a comment to use the latest version of App Bridge and add this library to the html head. “As of March 13th, 2024, all apps must use the latest Shopify App Bridge by adding the app-bridge.js script tag to the head of each document of your app. See this screenshot for details.”

We did it, but now the remote redirect type does not work correctly

const shopifyApp = createShopifyApp({ 
apiKey: process.env.VUE_APP_SHOPIFY_CLIENT_ID, 
host: <some host>, 
forceRedirect: true, 
}); 

const redirect = Redirect.create(shopifyApp); 
redirect.dispatch(Redirect.Action.REMOTE, redirectUrl);

For the redirect, we used the following libraries @Shopify_77 /app-bridge, @Shopify_77 /app-bridge/actions. In the documentation, we did not find information on how to make a remote redirect using thehttps://cdn.shopify.com/shopifycloud/app-bridge.js library. Our application uses the Vuejs framework.

On the internet I found the next code example

var AppBridge = window['app-bridge'];
var createApp = AppBridge.default;
var Redirect = AppBridge.actions.Redirect;

but window[‘app-bridge’] is undefined if we uses https://cdn.shopify.com/shopifycloud/app-bridge.js lib.

Do you have an opportunity to drop an example of how to properly use remote redirect with the new app-bridge.js library? Thank you.

2

You don’t need remote redirect any more you just do

window.open(url, "_top")
3

No, it will not, because of same-origin policy.

4

We are working on migration to Appbridge 4 I just tested it and it works. Also have a look at the documentation for App Bridge 4 migration (https://shopify.dev/docs/api/app-bridge-library/apis/navigation) and links they have recommended to use to redirect the top iframe is with target=“_top”

5

But again, window.open(‘extrernal url’, ‘_top’) is not working. Browser prevents it with an error

Unsafe attempt to initiate navigation for frame with origin 'https://admin.shopify.com' from frame with URL 'https://external-url.com/oauth2/install?embedded=1&hmac=3a73541d772ddc3304c66a80005d08c9635d2139cd9a9b52a602353dfb922084&host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvaWZ5bmtkZXYyNjA&id_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczpcL1wvaWZ5bmtkZXYyNjAubXlzaG9waWZ5LmNvbVwvYWRtaW4iLCJkZXN0IjoiaHR0cHM6XC9cL2lmeW5rZGV2MjYwLm15c2hvcGlmeS5jb20iLCJhdWQiOiI3NzVlODNlZjg5ZTU5Yzk3N2YzYmVkMGE0Y2Y1ZDU2MiIsInN1YiI6IjExNTcxODc4MzI1MCIsImV4cCI6MTczMjExODEyNCwibmJmIjoxNzMyMTE4MDY0LCJpYXQiOjE3MzIxMTgwNjQsImp0aSI6IjJhMTgwOTQwLWNlZjItNGVkYi1iMjQzLTIwMmIzNGNlMDAzZCIsInNpZCI6IjUwMDE2N2YzLWQzMDUtNDllMy1iYmU4LThlOWRhZDQyNzI2MiIsInNpZyI6IjE5MTNjOTlhYjNmNmM4YjM5MDBkYjlhYjkyYmU0OGZiYTk4OGRlNWU4MzNmNTlmYTRlODdlMDFkYjkxMWZhMjgifQ.SjO8_jGGZuarnacWZLWCgl2AGI0p-5pOBwwDAl7Fpfk&locale=en&session=b5d41c4960897a62c6ed9ce28781482ab540551631f89a58787fed32c02a618a&shop=ifynkdev260.myshopify.com&source=shopify×tamp=1732118064'. The frame attempting navigation is targeting its top-level window, but is neither same-origin with its target nor has it received a user gesture. See https://www.chromestatus.com/feature/5851021045661696.
6

I was wrong. Still not work.