Shopify Script Tag: Cross-Origin Read Blocking (CORB) blocked cross-origin response

therahulissar
Tourist
6 0 1

Currently working on a shopify app which uses script tags to add a section on the thank you page (order status page). 

It loads the image and text perfectly fine on the thank you page but 5 minutes later I get a CORB error which stops my code from being displayed on the thank you page. 

This is the basic structure of my js file which does the main handling of the script tag. 

 

console.log('this is coming from script tag api!')

const header = $('div.section__content').parent('.section');
 
var myContent = function($) {

//content box contains some basic styling with divs and an image which I haven't included
const contentBox = $( ....).css(....)

header.prepend(contentbox)
}
0 Likes
Bunty
Tourist
91 20 48

Interesting, are you able to share your browser network log and the exact error?

Script Tags are a predominant mechanism to load scripts on the thank you page, so I'm curious as to what's happening.

0 Likes
therahulissar
Tourist
6 0 1

It's a tricky one to show currently - as when I add the script tag it works for about an hour and then when I come back it's no longer there and shows the CORB error. This is the landing page: https://www.littos.co.nz/11812208736/orders/4d2b6faa0b63a59c3e1d95908528fd40

I will try record the error once it happens again, for the moment I've removed the script tag and added it back in. 

0 Likes
therahulissar
Tourist
6 0 1

Do you think it could be due to a mime type? I've currently got it on my code as script.type = "text/javascript" 

0 Likes
Bunty
Tourist
91 20 48

If it was the mime type, it would not have worked at all.

Looking at the order confirmation link, all looks fine. So yeah when you are able to capture more info, please do share.

0 Likes
therahulissar
Tourist
6 0 1

Here's some more info! image (2).pngimage (3).png

0 Likes
Bunty
Tourist
91 20 48

Ok, so this is weird, and I think I know the problem now

<script type="text/javascript" async="" src="https://arcane-spire-11260.herokuapp.com/thanks-script.js?shop=littosnz.myshopify.com"></script>

This is what is included as a script tag. If I paste that src link in an incognito window, it redirects me to 

/auth?shop=littosnz.myshopify.com

which further redirects me to

https://littosnz.myshopify.com/admin/oauth/authorize?client_id=5cfb517c172af6c170f4c4fac3c09996&scope=write_script_tags&redirect_uri=https%3A%2F%2Farcane-spire-11260.herokuapp.com%2Fauth%2Fcallback&state=210481837313155&grant_options%5B%5D=per-user

which seems like the app install URL

and since I don't have an active Shopify session, I get redirect to the Store login page, no wonder you get a block on these 302s

You probably don't always get this block because sometimes when you are testing, you are in the same session as your store admin

 

So, you need to check your auth routine in the app and change it so that it doesn't do that when an unauthenticated user opens that link

 

 

EugeneCXY
Tourist
10 3 1

Hey Bunty, 

Thanks for the fast replies and pointers. 

Where do we find the auth routine in the app. Is this a codebase change or a Shopify partner setting change?

 

 

0 Likes
Bunty
Tourist
91 20 48
https://arcane-spire-11260.herokuapp.com/thanks-script.js?shop=littosnz.myshopify.com

Fundamentally, if you add something to a script tag, it should be publicly accessible. I believe it is your app that's adding it, so it is your code base that needs to be looked into.

I can not access this publicly, and it returns a JS and I no longer see a 302 or the block, have you fixed it?

0 Likes
EugeneCXY
Tourist
10 3 1

EugeneCXY_0-1626907678888.png

This is built as a custom app and has gone live on one site. It seems like I am already doing it correctly, is there anything I'm missing here?

 

0 Likes