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:
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. Im sure someone from tech can add details I’m not aware of on the server side.
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.
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!
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.