header bearer authorization not working on Android 10

[hanifmhd]

Since the new update of API 29 Android 10 in December 2019, react-native-webview is not working on Android 10.

Bug description:

error: unathorized

To Reproduce:

async openLink() { try { const url = ${RestConstant.getGrafanaItoc}+ this.state.username; const bearer = {['Authorization']: 'Bearer ' + this.state.api_token_msd}; if (await InAppBrowser.isAvailable()) { const result = await InAppBrowser.open(url, { // Android Properties showTitle: true, toolbarColor: 'black', secondaryToolbarColor: '#ca2227', enableUrlBarHiding: false, enableDefaultShare: false, forceCloseOnRedirection: false, animations: { startEnter: 'slide_in_right', startExit: 'slide_out_left', endEnter: 'slide_in_left', endExit: 'slide_out_right', }, headers: bearer, }); } } catch (error) { Alert.alert(error.message); } }

Expected behavior:

Show the webview from url

Error:

Which platform(s) does your issue occur on?

• Android 10 and greater

Please, provide the following version numbers that your issue occurs with:

• CLI: (run react-native --version to fetch it)
• Plugin(s):
  "react-native": "0.61.2", "react-native-inappbrowser-reborn": "^3.3.4",

[mghozyn]

After Update Android System Webview to Version 83.0.4103.83, I'm facing same issue, can't passing headers props into inappbrowser.

Issue only happen in Android, working well in iOS

Don't know what happen, any a solution for this issue ?

[jdnichollsc]

There seems to be a bug with chrometabs, Please follow this link https://bugs.chromium.org/p/chromium/issues/detail?id=772966

[swalahamani]

Any workarounds?

[aliakbarazizi]

You need to make digital asset here is the link you can find information

https://developer.chrome.com/docs/android/custom-tabs/headers/

Chrome version	CORS headers allowed
before Chrome 83	whitelisted, non-whitelisted
Chrome 83 to Chrome 85	whitelisted
from Chrome 86 onwards	whitelisted, non-whitelisted when a digital asset link is set up

but still there is no way to use digital asset with this library, you have to do it manually or wait for update

[jdnichollsc]

You need to make digital asset here is the link you can find information

https://developer.chrome.com/docs/android/custom-tabs/headers/

Chrome version CORS headers allowed before Chrome 83 whitelisted, non-whitelisted Chrome 83 to Chrome 85 whitelisted from Chrome 86 onwards whitelisted, non-whitelisted when a digital asset link is set up but still there is no way to use digital asset with this library, you have to do it manually or wait for update

Did you try creating a digital asset? maybe we can include that step in the README <3

[jdnichollsc]

Please try and let us know! 👍

[aliakbarazizi]

@jdnichollsc as I say there is no way to use digital asset with this library. so the issue is still exist.

[jdnichollsc]

@aliazizi but as you mentioned, it's required to create a digital asset link manually following these steps, what do you mean about adding that from this lib? 🤔

[aliakbarazizi]

@aliazizi but as you mentioned, it's required to create a digital asset link manually following these steps, what do you mean about adding that from this lib? 🤔

It's not just about adding them, still it need addition code for validation in java and I didn't find any solution to how to achieve that manually,

https://developer.chrome.com/docs/android/custom-tabs/headers/#set-up-a-custom-tabs-connection-to-validate-the-asset-link

[jdnichollsc]

@aliazizi but as you mentioned, it's required to create a digital asset link manually following these steps, what do you mean about adding that from this lib? 🤔

It's not just about adding them, still it need addition code for validation in java and I didn't find any solution to how to achieve that manually,

https://developer.chrome.com/docs/android/custom-tabs/headers/#set-up-a-custom-tabs-connection-to-validate-the-asset-link

Interesting, can you share your code or refer a repository to be able to debug your issue? ❤️

[aliakbarazizi]

@aliazizi but as you mentioned, it's required to create a digital asset link manually following these steps, what do you mean about adding that from this lib? 🤔

It's not just about adding them, still it need addition code for validation in java and I didn't find any solution to how to achieve that manually, https://developer.chrome.com/docs/android/custom-tabs/headers/#set-up-a-custom-tabs-connection-to-validate-the-asset-link

Interesting, can you share your code or refer a repository to be able to debug your issue? ❤️

I don't have any code for reproduce, I'm not the issue owner. but he provides a code to reproduce the problem and it seems that should be enough to see the problem. I just share a detail about issue, why this issue exist and what is the problem.

and here is the beautify code.

async openLink() {
    try {
        const url = $ {
            RestConstant.getGrafanaItoc
        } + this.state.username;
        const bearer = {
            ['Authorization']: 'Bearer ' + this.state.api_token_msd
        };
        if (await InAppBrowser.isAvailable()) {
            const result = await InAppBrowser.open(url, {
                showTitle: true,
                toolbarColor: 'black',
                secondaryToolbarColor: '#ca2227',
                enableUrlBarHiding: false,
                enableDefaultShare: false,
                forceCloseOnRedirection: false,
                animations: {
                    startEnter: 'slide_in_right',
                    startExit: 'slide_out_left',
                    endEnter: 'slide_in_left',
                    endExit: 'slide_out_right',
                },
                headers: bearer,
            });
        }
    } catch (error) {
        Alert.alert(error.message);
    }
}

[aliakbarazizi]

@jdnichollsc and I don't think this issue should be closed. it's a problem and it's a open issue with a valid repro code.

[jdnichollsc]

@aliazizi did you follow this guide? https://developer.android.com/training/app-links/verify-site-associations#web-assoc

BTW, what are you expecting from this lib?

Please let me know!

[aliakbarazizi]

@aliazizi did you follow this guide? https://developer.android.com/training/app-links/verify-site-associations#web-assoc

BTW, what are you expecting from this lib?

Please let me know!

I'm not the issue owner, so obviously I don't expect anything, I just tried to help this lib by sharing some info.

It's not possible cause it needs some java code and it's not possible to put it in the library without modifying the source code.

https://developer.chrome.com/docs/android/custom-tabs/headers/#set-up-a-custom-tabs-connection-to-validate-the-asset-link

So someone had the issue, I found it exciting and shared some info about the problem. that's all I'm doing. what do you expect from me? to solve the issue? maybe in the future but I don't have time for that right now.

[jdnichollsc]

@aliazizi I mean, you requested to reopen this issue, but after checking the official guide to set up a digital asset link, that needs to be configured from your app manually.

Maybe we can reuse the below method to validate the Asset link: https://github.com/proyecto26/react-native-inappbrowser/blob/develop/android/src/main/java/com/proyecto26/inappbrowser/RNInAppBrowser.java#L335

Please let me know what you think!

[aliakbarazizi]

@aliazizi I mean, you requested to reopen this issue, but after checking the official guide to set up a digital asset link, that needs to be configured from your app manually.

Maybe we can reuse the below method to validate the Asset link: https://github.com/proyecto26/react-native-inappbrowser/blob/develop/android/src/main/java/com/proyecto26/inappbrowser/RNInAppBrowser.java#L335

Please let me know what you think!

I'm not sure about that since I don't have good knowledge of java, I see the document that I posted before and it says when using the custom tab, you need to verify it when you open the tab. so I'm guessing that's not possible from the app cause it needs to be in the source code, still I'm not sure what is good, but the document I mention is different from the one you sent it.

[aliakbarazizi]

Still I don't see how to use this library with validation assets,

Since it need these code in onCustomTabsServiceConnected

mSession = client.newSession(callback);
client.warmup(0);
 // Validate the session as the same origin to allow cross origin headers.
mSession.validateRelationship(CustomTabsService.RELATION_USE_AS_ORIGIN, 
            Uri.parse(url), null);

And I don't see how you can do it manually, since this code need to placed in method that exist in library.

[JameDodgers]

@jdnichollsc I believe @aliakbarazizi is right. This should be done by the lib itself. As mentioned in this comment, the CustomTabsIntent.Builder needs a CustomTabsSession object used to validateRelationship .

[JameDodgers]

As far as I know, by now there is no way of passing custom headers different than CORS approvelisted ones, what makes headers option almost useless

[rahimrahman]

I've made some changes and was able to get it to work. I don't know much Java so I'm sure there is a better way to do this. Check out: https://github.com/rahimrahman/react-native-inappbrowser/commit/92280068e9300261e7244e7809345ed72be300f8

I do have to add onStart call to my MainActivity:

import com.proyecto26.inappbrowser.RNInAppBrowserModule;

...
    @Override
    protected void onStart() {
        super.onStart();
        RNInAppBrowserModule.onStart(this, "https://www.twitter.com");
    }

The url ^^ needs to have assetlinks.json with your android app as target (example Twitter) and this "delegate_permission/common.use_as_origin". See example: https://www.twitter.com/.well-known/assetlinks.json