Images do not display on svg map

On this map, I don’t understand why the pictures are not displayed. Actually, they used to display correctly, but not anymore, even though I didn’t change my code. How can I solve the problem?

hm, yeah, when i follow a link i see that passportindex.org disallows hotlinking:

how recently was it working?

i guess if i were you tbh i would download them all (via like python scraping) and re-upload them as file attachments. not very satisfying, though. hm.

Ok. It’s weird because on my computer, https://www.passportindex.org/countries/thum/nl.png is displayed correctly… In any case thank you, it means that the problem comes from the site where I go to fetch the images.

I’m guessing passportindex.org blocks requests that have a referrer that is not their own site. Another suggestion would be a use a proxy (maybe cors anywhere?) to request the images and make them available, but downloading as @tophtucker suggested is probably more straightforward.

CORSanywhere is officially no longer viable except for very limited testing. I worry that our community contributed to this outcome. There’s a notebook that templates a personal cors-anywhere deployment, thanks to Sylvain Lesage:

2 Likes

It’s weird because on my computer, https://www.passportindex.org/countries/thum/nl.png is displayed correctly…

This is secondary (and maybe you already know all this), but yeah, I feel a little crazy whenever I type a URL in manually and it works and then try to fetch it programmatically and it doesn’t! I lump a lot of this under the issue of “CORS” (Cross-Origin Resource Sharing), though there might be other stuff going on.

I’m interested in the history of this (and haven’t read a good one), because I feel like it’s gotten worse over the twenty years I’ve been making websites. @jashkenas once said it has gotten stricter over time in response to the threat that an untrusted public website could secretly request URLs from a private intranet address.

One point of confusion is that for a long time I thought the URL was the only thing being sent to the server, and I didn’t know how it was even possible for a programmatic request to be treated differently from a manual request. Eventually I learned that there is additional metadata in the request headers, including Origin, which browsers at least try to enforce. But, judging from the discussion here, there are ways around that, and you shouldn’t rely on CORS for security. Which makes it just feel annoying!!

2 Likes

CORS is meant to protect the client, not the server. :slight_smile:

For this topic, the browser cache also plays a role. If you first visit https://www.passportindex.org/, then visit the notebook version that still hotlinked the images, you will see (most of?) the images loading just fine, because they are retrieved from the cache.

1 Like