search

Shopify / shopify-app-bridge

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

Embedded app opens new shopify admin tab #282

Closed TDH55 closed 5 months ago

TDH55 commented 5 months ago

Describe the bug

I have a simple http server that serves as my app url. The GET request returns a simple html snippet with the app bridge cdn in the html header. When opening a new app, a new shopify admin tab opens. Both the new tab and the old tab seem to have the app embedded properly

To Reproduce

Steps to reproduce the behaviour: Create an app that returns an html snippet from the server and try to open the app. Below is the load-app endpoint I've been trying to work with

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 behaviour

The embedded app should open in the current tab

Packages and versions

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

Platform

Additional context

The web server is built using micro

henrytao-me commented 5 months ago

Hi @TDH55 can you check it again? I just fixed it for you.

TDH55 commented 5 months ago

@henrytao-me The demo app seems to be working now, thanks!

TDH55 commented 3 months ago

@henrytao-me This fixed the problem in the example app we were testing with but when we start trying to embed our actual app it begins opening in a new tab again. Any thoughts?