Embed My Badge on My website

Good Day,
I’m trying to display my vatsim badge on my website. However, using HTML img tag, the browser gives me “ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 403 (Forbidden)” in console. I was wondering if anyone can help me resolve this or there is another way of doing this that I’m not aware.
The code:

<img src="https://my.vatsim.net/indicators/CID" width="80%" height="auto" />

Regards

Change “CID” in the url with your CID. Then the server will have something to respond with.

Why do u think I use “CID” instead of my actual id, I put CID in the link to say in general. In fact any CID. :confused:

Because this is what you posted :smiley:

I just tried it in here while editing the page with the exact thing you put above and my CID and it had no problems:

Of course it works here in the forum cause the header is from the same origin, meaning the requested link from browser comes from the same server as VATSIM but not working if the link is requested from outside servers.

Managed to replicate it on an NYTimes domain, so it could maybe end up being something else. :slight_smile: Im sure someone from tech can add details I’m not aware of on the server side.

After a quick browse through the internet, add the following attribute to the HTML tag and try again.

crossorigin='anonymous'

Ref: html - ERR_BLOCKED_BY_RESPONSE.NotSameOrigin CORS Policy JavaScript - Stack Overflow

Thanks. Will do that and report back.

I can confirm the fix is not working

This is the error in chrome console after implementing the new crossorigin = 'anonymous' in the img tag:

Access to image at 'https://my.vatsim.net/indicators/1137538' from origin 'https://aev.gr' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Code:

<img crossorigin="anonymous"  src="https://my.vatsim.net/indicators/1137538" width="80%" height="auto" />

NOTA? Cross-domain stuff is PITA, 2nd only to SSH. Both work fine when they work fine. Except when they don’t.

I don’t understand what you’re saying

Cross-domain stuff is difficult and complex, a real source of frustration. The only thing I can think of that’s worse is SSH, which provides security certificates to ensure that material come from the domains they seem to be coming from.

Both work really well when they work, but when there’s a problem it can be difficult to fix.

And heh no, I’m not going to get into the technical details of those complex systems!

good luck

The short answer is that VATSIM needs to configure the web server that serves the badges to include a CORS header so that it can be embedded on another site.

Both cross-domain and SSH can be frustrating to the novice. Once you understand them, they work fine. Reliably and securely.

Cheers

This should be fixed now.

Thanks. I can confirm the issue has been resolved.

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.