Embedding App In Shopify Framse source Error

[ced1968]

We are trying to embed our app, built in React Vite and we keep getting the same errors regarding the iframe:

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

Refused to frame 'https://github.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

I'm not sure if GitHub allows the CSP for the framesource but not sure how to get around it so we can keep building out the app.  Been stuck here for 2 days.  Any thoughts?

[wappy]

I'm having the same problem, can't load my app anymore

[ced1968]

I think there is a piece of middleware missing that helps install the Content Security Platform and this is using NextJS framework.  Seems to solve the issue.

/**  Middleware Content Security Policy headers to match requests. */

import { NextResponse } from "next/server";

export const config = {
  matcher: [
    /*
     * Exceptions:
     * /api/auth, /api/webhooks, /api/proxy_route, /api/gdpr, /_next,
     * /_proxy, /_auth, /_static, /_vercel, /public (/favicon.ico, etc)
     */
    "/((?!api/auth|api/webhooks|api/proxy_route|api/gdpr|_next|_proxy|_auth|_static|_vercel|[\\w-]+\\.\\w+).*)",
  ],
};

/**
 * @Anonymous {NextRequest} request - The incoming request object.
 * @returns {NextResponse} The response object with modified headers.
 */
export function middleware(request) {
  const {
    nextUrl: { search },
  } = request;


  const urlSearchParams = new URLSearchParams(search);
  const params = Object.fromEntries(urlSearchParams.entries());

  const shop = params.shop || "*.myshopify.com";


  const res = NextResponse.next();
  res.headers.set(
    "Content-Security-Policy",
    `frame-ancestors https://${shop} https://admin.shopify.com;`
  );

  return res;
}

[ErSanjay]

@ced1968  I have the same issue. with my production app it was working fine. but from the last week I can see the many shop req. goes to 403.

I have also validated the CSP was correct. 

any suggestion? 

[stoneknocker]

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

I also encountered a similar issue.

[ErSanjay]

@ced1968 @stoneknocker  Any suggestions DM me let's connect for the same issue we can resolve. 

[admirxsaheta]

Encountered same issue on production, CSP is set correctly, did anyone find a way around this ? 

[patrickpittman]

I wrestled with this one for weeks, until I found that adding a <Page> Polaris component wrapper to my Remix component (which probably should have always been there) made this error go away. Wasn't aware that was absolutely compulsory, but it solved this one immediately.

[guest4]

I'll give that a try and report back.

[guest4]

I've been seeing this message throughout the year. The app would load in fits and starts. Right now it's not loading. Found this looking to see if others are having the issue. And it looks like they are. I'm about to comb through the authentication system...

See also: https://community.shopify.com/c/shopify-apps/can-t-run-app-blocked-script-execution-in-lt-url-gt/m-p...