Navigation error in Chrome 61+ on Android

I create a login page that, after sending and verifying user credentials, opens its own mobile application. Until last week, I had this working cross-mobile OS using a custom URI scheme, for example:

function onLoginCallback() { const redirectUri = 'customscheme:/action?param1=val1&param2=val2'; window.location.replace(redirectUri); } 

The login page is displayed in IABT, abbreviated from the "In the application browser" tab.

However, since the release of version 61 of Chrome, this approach does not work on Android. Chrome blocks redirection because there are no visible user actions related to redirection (see here for more information on this).

As a result, when I run the above code, I get a warning in the console:

Navigation is blocked: customscheme: / action? Param1 = val1ΒΆm2 = val2

I also tried updating the URL of the user schema to the destination URL, but to no avail. A Google search on this issue cannot provide a clear solution, so I hope someone can help me.


Edit: Trying to reproduce the problem in the following scenario (as close to the real scenario as possible):

  • IABT displays a page with one button
  • Clicking on a button starts a jsonp call to a dummy endpoint
  • JSONP callback executes and fires user event
  • The event handler for the custom event fires and redirects the browser to another dummy endpoint
  • This dummy endpoint responds 302 to the Deeplink user scheme.

Alas, this seems to work. I expected that turning on the jsonp call would force Chrome to block the final redirect, as it would not be able to identify it as a user initiated action.


Edit 2: Could get reproducible script. We created a dummy endpoint, which on request simply returns 302 with a custom schema in the Location header. This is blocked for all attempts except the first. This fact still strikes the mind. We use the AppAuth app for Android to check the settings.

I open the user tab for the endpoint, as shown below. The code is taken from this answer .

 void launchTab(Context context, Uri uri){ final CustomTabsServiceConnection connection = new CustomTabsServiceConnection() { @Override public void onCustomTabsServiceConnected(ComponentName componentName, CustomTabsClient client) { final CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder(); final CustomTabsIntent intent = builder.build(); client.warmup(0L); // This prevents backgrounding after redirection intent.launchUrl(context, uri); } @Override public void onServiceDisconnected(ComponentName name) { } }; CustomTabsClient.bindCustomTabsService(context, "com.android.chrome", connection); } 
+29
javascript redirect android google-chrome appauth
source share
1 answer

As a result, we implemented our login and registration forms using the classic post-redirect-get template .

The server responds 302 to the user URI scheme. Since there is no asynchronous execution between the user submitting the form and the browser receiving the redirection in this setting, Chrome correctly defines the chain of actions as trusted and, thus, does not block navigation.

I understand that this may not be the preferred solution for everyone. A possible alternative to support asynchronous threads is to use universal links , because they use the usual http (s) schemes, to which redirects (at the time of publication of my question) were not considered harmful to Chrome.

0
source share

All Articles