0

Note: My site is in production mode, not testing. It is pending verification due to me adding an icon. This issue persisted before the verification was started.

Whenever my browser makes a request to Google for the one-tap widget or the pill, both requests return 400 Bad Request with an empty HTML page and the console is sent a message stating "The given origin is not allowed for the given client ID." I've gone onto the Google Cloud Console and checked my origins. I have only one listed, and it's the exact site I'm sending requests from my browser. My site also has its traffic proxied through Cloudflare if that makes a difference. In addition, I am using JavaScript callbacks (which work when used in PI#1).

Potential issue #1: The URLs are typed in wrong

When I insert localhost (I add https and http because I test with a HTTPS webserver locally using a Cloudflare origin certificate), the requests go through perfectly. However, the moment the requests are from my browser when it's not localhost, the requests fail. I've copied and pasted straight from the URL bar just to make sure that there's no typos or anything but the same results return.

Potential issue #2: The widget is making bad requests

I do open the URLs in other tabs (Which yield the same results from PI#1) and insert bogus URLs like example.com and thisisnotaurl.com to ensure it's not just dropping every request. Those requests return 403 Forbidden instead of 400 Bad Request.

Potential issue #3: The issue is browser specific

I've checked this issue on both Firefox and Microsoft Edge, both on the stable branches and completely up to date. I've disabled my ad block (UBlock Origin & Firefox built-in protection) to ensure they aren't messing with requests but everything except the crucial requests fail with 400 Bad Request. I have yet to test other browsers as I do not have them installed but I assume the same results come from them.

An example of the code can be found here: https://gist.github.com/totallytavi/772ea25b16f3fa0b6b0e04739a1689dd.

Screenshot of website Screenshot of network tab, showing failing requests

The origins shown below are the exact website I am accessing. In addition, I've verified the client IDs are exactly the same as the ones I have added Origins in Google Console that match the URL

Coder Tavi
  • 449
  • 4
  • 12
  • Please edit your question, and include an image with the full error message it should tell you exactly what the origin you are sending is. Then post an image of what you have added in google cloud console. Beyond that try watching this video it may also help https://www.youtube.com/watch?v=V0-4LnHwFho – Linda Lawton - DaImTo Nov 29 '22 at 10:33
  • Added screenshots from my browser console. Also, "include an image with the full error message it should tell you exactly what the origin you are sending is" isn't possible, as Google returns a blank HTML page with only – Coder Tavi Nov 30 '22 at 00:35
  • As you have marked out the information I needed to see in red its hard for me to help. But make sure its https, make sure its not localhost or 127.0.0.1 beyond that i cant help without seeing your code and the origin you are adding. – Linda Lawton - DaImTo Nov 30 '22 at 08:42
  • Please edit your question include [example] and an image of what origins you are adding and the full error message returned. We need to see what origan it is objecting to. – Linda Lawton - DaImTo Nov 30 '22 at 08:43
  • Information unblurred except the client secret. I've also linked in the exact HTML of what my page contains – Coder Tavi Dec 01 '22 at 00:41
  • 1. can you double check you are using that client id in your app? just for sanity sake. Then try this https://stackoverflow.com/q/68438293/1841839. If that doesn't work post me your code i want to try this. – Linda Lawton - DaImTo Dec 01 '22 at 09:22
  • 1
    Checked and found the issue. "Referrer Policy" was the exact issue. I'll post an answer to my own question shortly. – Coder Tavi Dec 01 '22 at 17:32

1 Answers1

0

Referrer Policy is improperly configured

The HTTP header Referrer-Policy controls the exact amount of data sent to servers regarding the origin of the request. In most cases, this is set to same-origin which means that the Referer header will send the origin to servers with the same origin.

Consider you have a webserver at example.com and another at web.example.com with a Referrer-Policy of same-origin. When example.com sends a request to web.example.com, the Referer header will contain the origin of the request, since it is the same origin. However, if example.com sends a request to google.com, the Referer header will not send any origin data, as google.com and example.com are not the same origin.

If we look at the requests, this directive is what we see Referrer Policy set to same-origin, request fails

As such, we need to update the directive to allow the browser to send the origin in the Referer header. This can be done by inserting the following into the HTML of the current page.

<meta name="referrer" content="origin">

This meta tag will allow the browser to send the origin only to other webservers, and as such, Google will see the origin.

Referrer Policy set to origin, request succeeds

Consider the example above again. This time, when example.com sends a request to google.com, the request will contain a Referer header with the origin, as the directive allows for sharing of the origin. However, with this current policy, only the origin is sent, not the query parameters and other parts of the URL. With the following URL: https://example.com/test/123, google.com will only see https://example.com. The MDN Web Docs contain all the possible values and their effects.

Coder Tavi
  • 449
  • 4
  • 12