Shopify Question posted in
The Shopify help center can be found here.

Shopify app is not working in express node js

I am developing a shopify app in express nodejs. I have created installation process of app successfully in express nodejs. After app installation, When I have opened the app then I have getting an error of iframe in shopify admin section. Here’s the screen shot:-

enter image description here

Also, it said ‘Requests to the server have been blocked by an extension’.
This issue comes into Google chrome browser. I have also checked in firefox browser. In firefox, it will works fine and shows me two warning that are:-
1. Content Security Policy: Directive ‘child-src’ has been deprecated.
Please use directive ‘worker-src’ to control workers, or directive
‘frame-src’ to control frames respectively.
2. Content Security Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive.

Mainly, it is not working on google chrome.

Please help me regarding this.

Thanks !!!

Tags:

2

Answers


  1. 0

    You need to include app.js provided by shopify if you haven’t included it yet.

    In your head section of html, add this

    <head>
  <script src="https://cdn.shopify.com/s/assets/external/app.js"></script>
  <script type="text/javascript">
    ShopifyApp.init({
      apiKey: 'YOUR_APP_API_KEY',
      shopOrigin: 'https://CURRENT_LOGGED_IN_SHOP.myshopify.com'
    });
  </script>
  ...
</head>

    Source

    Login or Signup to reply.
  2. 0

    This issue also happens to me and the problem was, I added new scopes for fulfillment but not reinstalled the app.

    1. Reinstalling the app
    2. Manually authenticate the app using window.location.

    Shopify tries to authenticate the app every time when you open it but if Shopify finds any new scope within the app which is not present within the store, it gives you this kind of error.

    Mostly the authentication happens with following

    1. Store domain
    2. API Key
    3. Scopes(Definition against type of actions)
    4. RedirectURL(where your app will be redirected after successful authentication)

    and it looks similar to this

    https://${shopDomain}/admin/oauth/authorize?client_id=${apiKey}&scope=${scopes}&redirect_uri=${redirectUri}

    Open the above URL within the browser with actual values in the URL

    Whenever you open the app, Shopify tries to use the above like to verify each entity provided in the above link.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search