HTTP 403 on images loaded from googleusercontent.com

Question

First off, I don't think my problem is related to these questions: question 1, or question 2.
Because I'm not using authentication anywhere, or any library either (I don't need to).

I'm simply loading some publicly-available album art images in my web application:

// urlList is an array than contains URLs like the examples given below
<img *ngFor="let url of urlList" src="url">

Example URLs: Glass Mansion, Summertime, Side Effects

99% of the time, it works. But sometimes I get 403 errors on the console for those exact same URLs.
I know they're not related to authentication, because, well. These URLs are publicly accessible.

Debugging this has been difficult, because a few page refreshes later, it magically works again. There's nothing out of the ordinary in logs either (except the GET 403 errors).

What in the world is happening?

I'm using Angular v7.2.15. Browser: Google Chrome

Answer 1

You just need to add

referrerPolicy="no-referrer"

to your image tag.

So basically it will look like this:

<img src="https://lh3.googleusercontent.com/a/AGNmyxZnC7Q38BPapCa0S0m6CLNOhGb1bgAvZClsS4Q1ZQ=s96-c" referrerpolicy="no-referrer"/>

Answer 2

Add referrerpolicy="no-referrer" attribute

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

Answer 3

Within several Google API's (like the gmail API for example), Google uses HTTP403 and/or HTTP429 in order to ratelimit certain requests over certain time periods. I do not know what method you are using, if you are using some sort of API etc, nor do I know how busy or large your webapp is. But rate limiting or fair use compliance could be coming into play.

Gmail API Rate Limit Info Source - https://developers.google.com/gmail/api/v1/reference/quota