Embedded app sandboxed despite correct headers and App Bridge initialization

[Rudolph_94]

Hi everyone,

I’m building an embedded app for Shopify (Next.js frontend hosted on Vercel + FastAPI backend on Render), and I’m encountering an issue where the app gets sandboxed even though headers and initialization seem correct.

I’m seeing the following error in the browser console:

Blocked script execution in ‘’ because the document’s frame is sandboxed and the ‘allow-scripts’ permission is not set.

Blocked script execution in ‘’ because the document’s frame is sandboxed and the ‘allow-scripts’ permission is not set.

These headers are already configured in my `next.config.js` file:

module.exports = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Content-Security-Policy",
            value: "frame-ancestors https://admin.shopify.com https://*.myshopify.com"
          },
          {
            key: "X-Frame-Options",
            value: "ALLOWALL"
          }
        ]
      }
    ];
  }
};

I’ve also confirmed:

• The host parameter is present and valid
• App Bridge initializes without errors
• Session tokens are successfully retrieved

Still, Shopify embeds the app in a sandboxed iframe that blocks scripts from running.

Is there any additional requirement (e.g. OAuth verification status, domain whitelisting, app review stage) that could cause this behavior?

Any help would be greatly appreciated.

Thanks!

[Alan_G]

Hey @Rudolph_94 - I believe this is a known issue, just sharing this link:

Blocked script execution in <URL> because the document's frame is sandboxed and the 'allow-scripts' permission is not set

After upgrading to the newest app bridge version for my app and pushing to production I’m now getting this error in the console: Blocked script execution in <URL> because the document's frame is sandboxed and the 'allow-scripts' permission is not set Now my external scripts are not loading which is breaking some things. Has anyone else had this problem? My app is using the Shopify node template

My understanding is that this shouldn’t impact the execution of your app - can you let me know if it is blocking any of your CSS/other app components?

I noticed you did post in that older thread there too - is the issue just causing the automated check not to pass for your app submission but the app itself runs as expected?

Happy to look into this further with the team here, just wanted to touch base with you to see if we could diagnose the issue - hope to hear from you soon!

[Rudolph_94]

Hi @Alan_G first of all, thank you for your help.

So far, the only message I’m seeing is the message in the console. None of my functions are affected (as far as I know). This is the last step I need to move forward. I appreciate your time and help.

[Alan_G]

No worries - thanks for confirming @Rudolph_94 - I’ll dig into this a bit more with the team and loop back with you when I have next steps.

[Rudolph_94]

Hello @Alan_G , how are you? Have you had time to look into the problem?

[Alan_G]

Hey @Rudolph_94 - thanks for following up. I was able to get some more info on this for you. One of our devs mentioned a bit of this here:

Blocked script execution in <URL> because the document's frame is sandboxed and the 'allow-scripts' permission is not set

This error fundamentally cannot block your app’s CSS when your app is actually loaded (to be shown on screen). What’s happening here is that we use a sandboxed iframe to preload your app before loading it for real in a different iframe. The preloading sandbox iframe intentionally prevents JS from loading (which results in those “errors” in your console), but that frame is never shown on screen. It is removed the moment your app begins loading for real. Your app is loaded in a totally separate …

We’ve spoken with the app review team and the error there shouldn’t affect your app’s status. If you do see any other issues pop up though, feel free to reach out to me here and I can look into things for you.