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

3 years later.. I'm facing the same issue.. did you ever find a solution for this? — webkit, Dec 22 '16 at 12:47
wow. 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. — philo vivero, Mar 07 '17 at 19:55
Same issue .. 2018 .. Is this related to serving from localhost? — Tarek Eldeeb, Feb 01 '18 at 15:48
I have the same problem. I am using Firebase auth and that returns a picture url. It gives a 403 error sometimes. — A.W., Sep 27 '18 at 09:51
I 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. — Yos, Jan 16 '20 at 13:32
For me it's also related to localhost, when I'm on my firebase domain it works. — Anis Smail, Mar 27 '20 at 10:14
2020 same issue, now I'm using 127.0.0.1 instead of localhost, and works fine — Davide, Sep 20 '20 at 21:28
October 2021 still same issue. But @Davide solution using 127.0.0.1 instead of localhost still works — dcts, Oct 02 '21 at 22:41

score 184 · Answer 1 · answered Apr 05 '20 at 11:57

184

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.

answered Apr 05 '20 at 11:57

Michael Ganß

2,846
1
18
11

4

I 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 ! – b00stup Aug 18 '20 at 10:36
10

If 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 – Turbotailz Mar 15 '21 at 04:49
2

Thanks. Worked perfectly – Md. Mahmud Hasan Jan 19 '22 at 14:41
13

Note for REACT users: You'll need to camelCase the attribute name: `referrerPolicy="no-referrer"` – Jason Frank Jul 29 '22 at 02:40
I meant to upvote this, my bad – tiadotdev Sep 15 '22 at 17:39
This is what I needed to display custom emotes from YouTube (yt3.ggpht... URLs.) Thanks – Zane Helton Jan 08 '23 at 23:25
This works in Chrome and Firefox, but it seems like Safari on both MacOS and iOS aren't working for me with this fix. – Charles Chen May 03 '23 at 21:16

score 87 · Answer 2 · answered Mar 15 '22 at 09:01

87

Add referrerpolicy="no-referrer" attribute

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

See about referrerpolicy here

answered Mar 15 '22 at 09:01

willf80

973
7
11

score 8 · Answer 3 · answered Nov 18 '22 at 20:30

8

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

answered Nov 18 '22 at 20:30

Philip Sopher

627
2
8
19

score 6 · Answer 4 · answered May 05 '20 at 17:39

6

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

answered May 05 '20 at 17:39

Arju S Moon

61
1
1

This 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. – Anees Hameed May 27 '21 at 15:40

zolee · Answer 5 · 2020-07-01T20:43:24.357

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.

edited Jul 01 '20 at 20:43

answered Jul 01 '20 at 20:30

zolee

429
4
19

score 2 · Answer 6 · answered Jan 19 '21 at 04:49

2

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!

answered Jan 19 '21 at 04:49

HARU

21
2

score 1 · Answer 7 · edited Feb 25 '18 at 05:08

1

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.

edited Feb 25 '18 at 05:08

Stephen Rauch

47,830
31
106
135

answered Feb 25 '18 at 04:34

Patrick

303
1
4
11

The URL is NOT dynamic. Please check my answer above – MehranTM Jun 09 '20 at 14:28

score 1 · Answer 8 · answered Jun 12 '23 at 09:39

1

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" />

answered Jun 12 '23 at 09:39

Bibek Oli

366
2
14

score 0 · Answer 9 · answered Mar 23 '20 at 10:06

0

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.

answered Mar 23 '20 at 10:06

MehranTM

714
9
10

score 0 · Answer 10 · answered Dec 21 '21 at 14:25

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.

score -2 · Answer 11 · edited Dec 30 '21 at 14:28

-2

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.

edited Dec 30 '21 at 14:28

cigien

57,834
11
73
112

answered Dec 30 '21 at 11:34

lakshya 'Coding' Jain

1
1
5

1

As 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](/help/how-to-answer). – Community Dec 30 '21 at 11:34
Your 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](/help/how-to-answer). – Community Dec 30 '21 at 18:32

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

11 Answers11

Linked