http:403 forbidden error when trying to load img src with google profile pic

Question

hello everyone I am trying to load google profile picture in my site and other ones

I have done

var profile = googleUser.getBasicProfile();
profile.getImageUrl()

when I sign in with google and save the image url to a database but when I try to put it into the scr of an img tag like so

var img = document.createElement("img");
img.src = image;
img.alt = "image";
img.style.float = "left";
divn.appendChild(img);

I get 403 forbidden error sometimes, but sometimes it works here is a sample link that I'm using the one that is stored in the database just altered a bit

https://lh4.googleusercontent.com/-OmV9386WzGk/AAAAFFFFAAI/AAAAAAAACpc/BEtVNh85tnk/s96-c/photo.jpg

so I'm just wondering if I'm doing it right obtaining the profile image, and its for other users also on the same page

Answer 1

Using referrerpolicy="no-referrer" seems to help. While it didn't work in a localhost app (before I added this attribute), it worked consistently when loading the image in its own tab. One of the differences in the request headers was the absence of referer.

Answer 2

I was getting this error when accessing the localhost without any protocol mentioned. If your images aren't loading, try reopening the website giving http:// or https:// That should solve the issue

Answer 3

Add referrerpolicy="no-referrer" attribute

<img src="your-google-link-here" referrerpolicy="no-referrer"/>

See about referrerpolicy here

Answer 4

Looks like google doesn't serve requests when the Referer header is set to localhost. I changed it in the inspecto to some other domain, resent it and it worked. I could even get the profile picture with curl and zero headers.