it violates the following Content Security Policy directive: frame-src app.myshopify.io *.shopifyap

Highlighted
New Member
4 0 0

Hi Guys I am hosting the getting started tutorial on a Public Ubuntu server.

 

https://i-watch-dog.com:3000/?shop=th-consulting-dev.myshopify.com

 

  • The direct link works perfectly.
  • There is no extensions loaded in chrome of firefox that can block my app.
  • Also I have https working.

But when I am trying to access the app via the store, It is blocked on shopify. I can see that the console response on the server does not fire like on the above link. 

 

shopify1.JPG

This is my server.js

 

const { createServer } = require('https');
const { parse } = require('url');
const { readFileSync } = require('fs');
require('isomorphic-fetch');
const dotenv = require('dotenv');
const Koa = require('koa');
const next = require('next');

const { default: createShopifyAuth } = require('@shopify/koa-shopify-auth');
const { verifyRequest } = require('@shopify/koa-shopify-auth');
const session = require('koa-session');

dotenv.config();

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

const { SHOPIFY_API_SECRET_KEY, SHOPIFY_API_KEY } = process.env;


const httpsOptions = {
  key: readFileSync('./ssl/privkey.pem'),
  cert: readFileSync('./ssl/fullchain.pem')
};


app.prepare().then(() => {
    const server = new Koa();
    server.use(session(server));
    server.keys = [SHOPIFY_API_SECRET_KEY];
    
    server.use(
        createShopifyAuth({
            apiKey: SHOPIFY_API_KEY,
            secret: SHOPIFY_API_SECRET_KEY,
            scopes: ['read_products'],
            afterAuth(ctx) {
                const { shop, accessToken } = ctx.session;
                
                ctx.redirect('/');
            },
        }),
    );
    server.use(verifyRequest());
    server.use(async (ctx) => {
        await handle(ctx.req, ctx.res);
        ctx.respond = false;
        ctx.res.statusCode = 200;
//        console.log(ctx);
        return
    });
    const serverCallback = server.callback();
    
    createServer(httpsOptions, serverCallback).listen(port, err => {
        if (err) throw err;
        console.log(`> Ready on https://i-watch-dog.com:${port}`);
    })
    
//    server.listen(port, () => {
//        console.log(`> Ready on https://i-watch-dog.com:${port}`);
//    });
});

I get this when I use the direct link:

shopify2.JPG

 

Does anyone have an idea what is wrong. I have seen many posts like this, but none seams to answer the problem.

 

Regards

Hannes

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
644 78 141

Hey @Starhopper,

 

Does the same thing happen when you test locally? I just deployed the sample node app on my own server to test, and I'm able to open the app in the admin without an error. This means there's no issue with the code, so it must be something to do with your deployment.

 

I checked a bunch of forum posts from others that have had this issue, and while none of them offer a clear cut solution, there's definitely a few things you can try. The first thing I would look at is any CSP settings from your hosting provider. If you have any CSP directives enabled, try changing the settings to lax or disabled.

 

You can also try running the app locally to verify the error isn't occurring there as well, and then if possible, test using your own domain. This can be done by deploying to a different host like Heroku, or using the paid version of Ngrok which allows you to use your own domain. This will tell you if the issue lies with your domain or server. Based on what I've read the most likely culprit seems to be the server, but you can narrow it down by using these steps. Let me know how that works out!

JB | Developer Support @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes
Highlighted
New Member
4 0 0

Hi There thanks for responding.

 

you guys have 2 tutorials. one that is specific for nodejs. I did that without a problem on that server. I have not tried to develop on my local pc, Purely because my pc's nodejs setup and python setup is not the best.

 

I do have another pc that I though to use. 

 

these are the url's I whitelisted:

https://i-watch-dog.com:3000/
https://i-watch-dog.com:3000/auth/callback

Is this correct?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
644 78 141

Hey @Starhopper,

 

You only need to whitelist the callback URL, it's not necessary to whitelist the root domain. However I noticed before that you whitelisted the root domain, so I did the same thing in my test app but wasn't able to replicate the issue you're seeing. So the extra domain is most likely not causing the issue. Were you able to test from a different machine?

JB | Developer Support @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes
Highlighted
Excursionist
33 4 4

Hi @Starhopper ,

 

When you authorized the app did you grab the callback in the url? There should be something in the url like "grant-options" or similar with a value. I had to add that in my whitelisted url's before my app would work so this might be something for you to try.

You are phoenix
0 Likes