App page shows up blank! ERROR in console: Blocked script execution in '<URL>' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

[hasnain37]

We got warning from shopify to upgrade the App brigde version. previously we are using osiset package in our app.
according to Shopify here are the instructions
https://shopify.dev/docs/api/app-bridge/previous-versions/updating-overview

Now I have update to Kyon laravel shopify package and update the App bridge as well, Now App page is not showing Show this

Please guide me on this, Thanks in advance
@Kyon147

[Kyon147]

You just need to edit your config file - that is the easiest approach but if you are using the older package you might need to migrate first.

As this is not a bug going to convert it to a discussion

[iamaks1993]

@Kyon147 @hasnain37 Any solution? I am using V23.0. Thanks

[Kyon147]

Have you upgraded from a previous version @iamaks1993? If so, have you followed the upgrade guide?

[iamaks1993]

@Kyon147 Thanks for the quick response. It's fresh install. Despite this error in console, the app is working fine. I found one thread on shopify community, as per them they are aware of this issue.

[FaintShadow]

I am getting that exact same problem and I am new to Shopify so I don't know what I should be looking for in my page. I have the following page which is just for testing if things are working or not:

@extends('shopify-app::layouts.default')

@section('content')
    <div class="Polaris-Page">
        <div class="Polaris-Page__Content">
            <div class="Polaris-Card">
                <div class="Polaris-Card__Section">
                    <p>You are: <strong>{{ $shopDomain ?? Auth::user()->name }}</strong></p>
                    <button class="Polaris-Button Polaris-Button--pressable Polaris-Button--variantPrimary Polaris-Button--sizeMedium Polaris-Button--textAlignCenter" type="button">
                        <span class="Polaris-Text--root Polaris-Text--bodySm Polaris-Text--medium">Save theme</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    @parent
    <script>
        var AppBridge = window['app-bridge'];
        var createApp = AppBridge.default;
        var app = createApp({
            apiKey: '{{ config('shopify-app.api_key') }}',
            shopOrigin: '{{ Auth::user()->name }}',
            forceRedirect: true
        });

        // Then access actions from the app
        var actions = AppBridge.actions;
        var TitleBar = actions.TitleBar;

        var titleBarOptions = {
            title: 'Welcome to My Shopify App',
        };

        var titleBar = TitleBar.create(app, titleBarOptions);
    </script>
@endsection

and the error: Blocked script execution in '[URL]' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

[Kyon147]

From what I've seen this error doesn't stop an app from loading.

I get this same error in the console but the app loads correctly.

My guess is something else is the actual issue and this error is a red herring.