search

Shopify / shopify-app-bridge

https://shopify.dev/docs/api/app-bridge
82 stars 9 forks source link

Embedded app opening in new tab, not current tab #339

Closed Benjamin-Henke closed 2 months ago

Benjamin-Henke commented 2 months ago

Describe the bug

We are trying to get our staging and production environments to be embedded to apply for Built for Shopify status. It mostly works other than the fact that the embedded apps open in a new tab rather than the current tab.

To Reproduce

Below is a MVP example that reproduces the bug described above.

const { send } = require("micro");
const { URLSearchParams } = require("url");

module.exports = async (req, res) => {
    console.log("req.seardch", req.search);
    console.log("req.query", req.query);
    const host = new URLSearchParams(req.search).get("host");
    console.log("host", host);
    const html = `
    <html>
    <head>
      <script src="https://unpkg.com/@shopify/app-bridge@3"></script>
        <script>
            const AppBridge = window['app-bridge'];
            const appBridge = AppBridge.createApp({
                apiKey: '16c6f2e251aee2b3750beed142bf6ee5',
                host: new URLSearchParams(location.search).get("host"),
            });
            console.log('host', new URLSearchParams(location.search).get("host"))
        </script>
      </head>
      <body>
        <h1> This page was render direcly from the server </h1>
        <p>Hello there welcome to my website</p>
      </body>
    </html>
  `;

    const shop = req.query.shop;
    res.setHeader(
        "Content-Security-Policy",
        `default-src https: 'self'; script-src https: 'unsafe-inline' 'unsafe-eval' 'self' unpkg.com cdn.shopify.com cdn.shopifycloud.com; style-src https: 'unsafe-inline' cdn.shopifycloud.com; img-src 'self' https: data: cdn.shopifycloud.com blob:; upgrade-insecure-requests; frame-ancestors https://${shop} https://admin.shopify.com;`,
    );
    return send(res, 200, html);
};

Expected behavior

When clicking on our app in the left sidebar, the app should open in the same tab.

Contextual information

Packages and versions

List the relevant packages you’re using, and their versions. For example:

Platform

Additional context

Example above is built with micro

henrytao-me commented 2 months ago

Can you switch to use latest App Bridge from Shopify CDN? https://shopify.dev/docs/api/app-bridge-library#getting-started

Benjamin-Henke commented 2 months ago

My mistake, I wrote the wrong version. Here is the current version I'm using.

@shopify/app-bridge": "^3.7.10