Google OAuth 2.0 redirect_uri with several parameters

Question

How to add a parameters to the Google OAuth 2.0 redirect_uri?

Just like this:

redirect_uri=http://www.example.com/redirect.html?a=b

The b of a=b is random.

Anyone can help ?

Pictorial

Answer 1

1. You cannot add anything to the redirect URI, redirect URI is constant as set in the app settings of Oauth. eg:http://www.example.com/redirect.html

2. To pass several parameters to your redirect URI, have them stored in state the parameter before calling the OAuth URL, the URL after authorization will send the same parameters to your redirect URI as state=THE_STATE_PARAMETERS

So for your case, do this:

1. create a JSON string of your parameters ->

   { "a" : "b" , "c" : 1 }

2. do a base64UrlEncode , to make it URL safe ->

stateString = base64UrlEncode('{ "a" : "b" , "c" : 1 }');

This is a PHP example of base64UrlEncoding & decoding (http://en.wikipedia.org/wiki/Base64#URL_applications) :

function base64UrlEncode($inputStr)
{
    return strtr(base64_encode($inputStr), '+/=', '-_,');
}

function base64UrlDecode($inputStr)
{
    return base64_decode(strtr($inputStr, '-_,', '+/='));
}

So now the state would be something like: stateString -> asawerwerwfgsg,

Pass this state in the OAuth authorization URL:

https://accounts.google.com/o/oauth2/auth?
  client_id=21302922996.apps.googleusercontent.com&
  redirect_uri=https://www.example.com/back&
  scope=https://www.google.com/m8/feeds/&
  response_type=token&
  state=asdafwswdwefwsdg,

For server-side flow, it will come along with the token : http://www.example.com/redirect.html?token=sdfwerwqerqwer&state=asdafwswdwefwsdg,

For client-side flow, it will come in the hash along with the access token: http://www.example.com/redirect.html#access_token=portyefghsdfgdfgsdgd&state=asdafwswdwefwsdg,

Retrieve the state, base64UrlDecode it, json_decode it, and you have your data.

See more about Google OAuth 2 here:

http://code.google.com/apis/accounts/docs/OAuth2.html

Beatty

base64 is used to obfuscate the data as well as url encode it, if you would need a little bit of extra 'security' through obscurity. – Vibrations

@Beatty perfect, I needed to send a custom parameter back with linkedin API redirect and it's same method you described. – Noneffective

is accessing the query params and token and response data being visible in the url in the first place ok? – Lanoralanose

Phoebe, the token present in the url is not the final access token, it needs to be exchanged for an access token using OAuth apis along with app secret keys. – Beatty

I tried this suggestion, but for some reason my state always comes back truncated from Google... Any idea why? – Johen

@SsjCosty same here, and I have no idea how to fix that :|. – Huffish

The state parameter is used to prevent CSRF attacks during the OAuth flow. You have to set a token in the state parameter when initiating the flow and you should check if you get back the same token in the state parameter when your redirect_uri is hit. Don't do what is done in this answer. A session based solution is probably what you should look at. – Shandashandee

How can I use state param to pass several parameters to redirect uri and to prevent CSRF attack at the same time ? – Oubre

Hi @DhruvPathak, while setting up the state parameter, the value is changed after authentication. Could you please suggest on this – Diagnose

@Oubre I'm wondering the same thing. Did you manage to add several parameters to the state param (custom values and prevent CSRF attacks)? – Quartet

Have a look at #49880644 if you work with Spring Social! – Madel

In javascript you could use this state: JSON.stringify({ a: "b", b: "c" }), on the state attribute – Unlike

Answer 2

Since the accepted answer does expose the actual data and misuses the state parameter instead of sticking to a nonce to protect against CSRF, I'll try to show a proper method. Rather than passing (read exposing) data it should be kept local. Hydrate it before the request and re-hydrate it after a validated request. "Validated" here means that the state-nonce of request and response match.

You need some kind of temporary client side storage. E.g. for SPA or general websites keep it in state or use the browser's localStorage, a session (or a signed cookie). For mobile apps they should use memory or any other local storage.

Before sending the request generate a nonce (see below) that will be used as state parameter for the request. Store the nonce together with the custom state (e.g. a json) in local storage.

For example, the nonce could be ih4f984hf and the custom state {"role": "customer"}. Then you could store data for re-hydration for that request like this:

"ih4f984hf": {
  "role": "customer"
}

Then use only the nonce as value for the state parameter of the request. (If you absolutely want to combine the nonce and data into the state value be sure to encrypt it and be aware that the length of the value is limited!)

When receiving a response you get the value of the state parameter back. Look it up and if it matches the value in the local storage you may process the data using the stored state. If the nonces do not match the request is potentially from an attacker and should not be processed.

Generating the nonce

Remember that the nature of a nonce is that it is used once only and must be unpredictable! Unpredictable here means ideally random, but practically pseudo-random is ok if the entropry is high enough - in web apps you might want to check Web API Crypto which is supported pretty well.

For further readings this might be helpful:

• http://www.thread-safe.com/2014/05/the-correct-use-of-state-parameter-in.html
• https://datatracker.ietf.org/doc/html/draft-bradley-oauth-jwt-encoded-state-00
• https://auth0.com/docs/protocols/state-parameters#set-and-compare-state-parameter-values

Memphian

But this is optional and Google's documentation doesn't make it sound like you have to implement this as an additional security measure. Would you say every app that uses Google oauth2 should implement this? – Custer

The hole point is that you cannot rely on the parameters of the redirect URL without the nonce. I guess there might be cases where that is irrelevant but normally you should keep data out of the URL. – Memphian

Do you mean it's dangerous if someone changes the redirect URL manually? Can you give an example? – Custer

yes, the typical attack vector is a man in the middle attack. But keeping data away from server and network logs is also a good thing. – Memphian

I'm just trying to understand the problem. Because I put a redirect (relative) URL directly into the state and I don't see how this could be abused. When the authentication flow is over, the user is redirected to this relative URL on my website. They could've also entered this URL themselves. – Custer

The oauth website even states: If a client wishes to include request-specific data in the redirect URL, it can instead use the “state” parameter to store data that will be included after the user is redirected. It can either encode the data in the state parameter itself, or use the state parameter as a session ID to store the state on the server. Source: oauth.com/oauth2-servers/redirect-uris/… To me, that sounds like putting the redirect URL directly into the state. – Custer

yes, technically you can put the data there, but from a security and privacy standpoint you must think about which data is fine to expose and what needs to be protected and which attack vectors you application shall mitigate. – Memphian

Gotcha, thank you for the heads up! – Custer

The state parameter is used to ensure that a request remains unchanged, as CSRF attacks are ONE of the common ways to modify requests. – Thacker

Answer 3

If you are in .NET you could save the parameters in the Session

HttpContext.Current.Session[{varname}]

and redirect to the authorization page without parameters

Response.Redirect(your_uri_approved_with_no_querystring_parameters);

Propaedeutic

This does not scale when using a webfarm such as azure. – Cavalierly

@spender: so you imply that two requests almost in sequence from the same client might be handled by different servers in the webfarm. If that's the case, this is not the only thing affected, basically Session variable couldn't be used in that scenario for anything. BTW: I am not arguing - actually trying to learn here. – Propaedeutic

It's entirely possible, yes... You can mitigate this by managing session with a session server or backing session off to the database (see msdn.microsoft.com/en-us/library/ms178586.aspx), or to enable sticky sessions on your load-balancer to ensure that clients always return to the same webserver node. All of the options I've mentioned are a PITA to set up, so IMO, storing any client state in Session should be avoided. – Cavalierly

Answer 4

In Javascript (Node), you could set the state property to an object of key value pairs.

           const oAuth2Client = await new google.auth.OAuth2(
                clientId: <clientId>,
                clientSecret: <clientSecret>,
                redirectUrl: <redirectUrl>,
            );

            return await oAuth2Client.generateAuthUrl({
                access_type: "offline",
                scope: <scopes>,
                state: JSON.stringify({ a: "y", b: "z" }),
            });

On google authorization complete, it returns of the state, code etc from ulr,

const params = JSON.parse(state); // { a: "y", b: "z" }

Unlike

Answer 5

You can redirect parameter with url as below,

When you get response from google than you can pass parameter with url,

See below php code for same,

if (isset($_GET['code'])) {
   $client->authenticate();
   $_SESSION['token'] = $client->getAccessToken();
   $redirect = 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'];
   header('Location: ' . filter_var($redirect, FILTER_SANITIZE_URL) . '?r=page/view');

}

In above example r=page/view is parameter on which i want the response with parameter

Lezlielg

This is where the state parameter is sent in the google provided PHP code. There are three requests made server side. This means that the final request won't have any query string variables at all. – Scarce

works like a charm! I know we can send information in the state param but if application is expecting any value directly as the request param, then it fails. The method you have provided is perfect for this scenario. Thanks! – Rodolforodolph

Answer 6

You can use the state parameter to hold data by using the nonce in the base64 encoded structure.

If you must pass the data into the state parameter. Build the structure with the nonce within the state parameter. Like so:

{
  "role": "customer",
  "nonce": "ih4f984hf",
}

Once you base64 encode the ~structure~, you can verify it has not been tampered with. Including the randomness.

Warning: You need to verify via your business logic that the data state you are trying to maintain throughout the request is considered public information. There is nothing protecting this data from being decoded via a malicious actor.

For instance if the data is simply representative of a color theme so the user resumes to that state on return, the harmless value is okay to send. It is dependent on your requirements.

Stringency