http:403 forbidden error when trying to load img src with google profile pic
Solution 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
.
Solution 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
Solution 3
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.
Solution 4
I could imagine that the URL is dynamically created each time you request it. That is supported by the fact that the user needs to be authenticated to retrieve that URL. (If the user e.g. signs out of a previously authorized service / revokes the authentication, a service should no longer be able to retrieve the profile picture)
So either you store the entire image as a blob in the database or authenticate and use the User Object each time to request the URL.
Also, consider using the API as referenced here.
Solution 5
2021 same issue
If you are using the CORS plugin on browser(chrome), please turn it off.
After off the plugin, restart your browser and try again.
.. it works for me!
Related videos on Youtube
JRowan
This is what i Love to do :) Google Play Personal Blog copypasteearth
Updated on September 15, 2022Comments
-
JRowan over 1 year
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
-
webkit over 7 years3 years later.. I'm facing the same issue.. did you ever find a solution for this?
-
JRowan over 7 yearsNo, i just decided to not use google sign in.
-
philo vivero about 7 yearswow. March 2017 and still having this issue. if I figure it out, I'll answer the question. I really want to be able to use Google login.
-
Tarek Eldeeb about 6 yearsSame issue .. 2018 .. Is this related to serving from localhost?
-
A.W. over 5 yearsI have the same problem. I am using Firebase auth and that returns a picture url. It gives a 403 error sometimes.
-
Yos over 4 yearsI think this has to do with localhost. When I reload the page (so they page is serverside rendered) the picture shows. So there's some CORS issue probably.
-
Anis Smail about 4 yearsFor me it's also related to localhost, when I'm on my firebase domain it works.
-
Davide over 3 years2020 same issue, now I'm using 127.0.0.1 instead of localhost, and works fine
-
dcts over 2 yearsOctober 2021 still same issue. But @Davide solution using 127.0.0.1 instead of localhost still works
-
-
MehranTM almost 4 yearsThe URL is NOT dynamic. Please check my answer above
-
b00stup over 3 yearsI have the same issue. Where in my code do I actually "use" referrerpolicy="no-referrer" ? I use firebase in react to log through google login. thnx for any help on this !
-
Turbotailz about 3 yearsIf you click the link in the answer, it takes you to the list of attributes for the IMG element. Simply add
referrerpolicy="no-referrer"
to your image elements that use googleusercontent.com -
Anees Hameed almost 3 yearsThis is correct. To test this I started a ngrok.io tunnel and the image was loading through the tunnel even though it was not working in localhost.
-
Admin over 2 yearsAs it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
-
Admin over 2 yearsYour answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
-
Md. Mahmud Hasan over 2 yearsThanks. Worked perfectly