CODEWITHSUNDEEP
javascripthtmlimagegoogle-signin
JRowan
JRowan

Reputation: 7114

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

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 src 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

Upvotes: 124

Views: 45548

Answers (11)

Bibek Oli
Bibek Oli

Reputation: 876

I was facing same error in my Next.js app while rendering the user profile picture on MUI <Avatar /> component.

It got fixed and picture was rendered correctly after adding this line on _app.js

<meta name="referrer" content="no-referrer" />

Upvotes: 5

Philip Sopher
Philip Sopher

Reputation: 783

The only thing that worked for me was adding in

<meta name="referrer" content="no-referrer" />

to the head of my html, as explained here: https://github.com/chakra-ui/chakra-ui/issues/5909

Upvotes: 15

willf80
willf80

Reputation: 1223

Add referrerpolicy="no-referrer" attribute

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

See about referrerpolicy here

Upvotes: 112

lakshya &#39;Coding&#39; Jain
lakshya &#39;Coding&#39; Jain

Reputation: 1

Yup...there's a small hack to fix this. Just change your tag to a closing one, . Apparently, this fixes it, but I'm not sure if this is a temporary solution.

Upvotes: -3

Phoeobe
Phoeobe

Reputation: 9

I was able to resolve this in one of my projects, the issue was that I had been using the wrong img tag, i.e. <img src"foo.png" /> instead of <img src="foo.png></img>. The latter is appropriate for DOCTYPE=HTML, whereas the former is meant for XHTML pages.

Upvotes: -1

HARU
HARU

Reputation: 31

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!

Upvotes: 3

zolee
zolee

Reputation: 439

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.

Upvotes: 5

Arju S Moon
Arju S Moon

Reputation: 61

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

Upvotes: 6

Michael Gan&#223;
Michael Gan&#223;

Reputation: 3406

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.

Upvotes: 218

MehranTM
MehranTM

Reputation: 751

The link sent back is NOT dynamic. For example my profile picture is this one:

https://lh3.googleusercontent.com/a-/AAuE7mB9nRJ8QQy4bJ97P2zeqX_5u7bVuS_DzxOsV0u6rlc

And I can see my photo even in an incognito tab and while I am logged off.

Upvotes: 0

Patrick
Patrick

Reputation: 373

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.

Upvotes: 2

Related Questions