XMLHttpRequest blocked by CORS policy when using Android Webview for Oauth2 Reddit

Question

I am trying to use Oauth2 in an Android app to get authentication token from Reddit api. I am just trying to use Reddit api from my Android app and it is a must to use Oauth2 to achieve that. In my app, webview is being used to navigate user to following page.

If user clicks Allow, the app would receive authorization code from Reddit so that it can make api requests to the Reddit api. As you can see from above, the url that navigate user to above page works on desktop chrome browser. In the Android simulator, however, I can see the loading page on reddit from webview but the webview suddenly disappers with following error on Logcat:

"Access to XMLHttpRequest at 'https://events.redditmedia.com/v1?key=Mweb3&mac=469c6ed7767c9980560cd23847c8cb8ce021cae472cf4d440ec700b45b926f2d' from origin 'https://www.reddit.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

When creating reddit app for Oauth2, I selected "installed app". Following is the url that I am using:

https://www.reddit.com/api/v1/authorize?client_id=8QWhUSXGUjcwpg&response_type=code&state=TEST&redirect_uri=https%3A%2F%2Fgithub.com%2Fkdy304g%2FCapstone-Project&duration=temporary&scope=read

This is the code I am using for webview:

web.loadUrl(url);

            web.setWebViewClient(new WebViewClient() {
                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    view.loadUrl(url);
                    return true;
                }
                @Override
                public void onPageStarted(WebView view, String url, Bitmap favicon) {
                    super.onPageStarted(view, url, favicon);
                    Log.i("","page started");

                }
                @Override
                public void onPageFinished(WebView view, String url) {
                    super.onPageFinished(view, url);

My webview works fine for other urls but not this one for some reason I guess. I would much appreciate if anyone could take a look. Thank you in advance!

My github project link

put "Access-Control-Allow-Origin : *" in Header. check this for more info https://stackoverflow.com/questions/17272612/android-webview-disable-cors — mili2501, Jul 15 '20 at 04:53
Thank you so much for your reply. Following your advice, I aded below method inside my webview client but it still won't work. `public boolean shouldOverrideUrlLoading(WebView view, String url) { Map map = new HashMap(); map.put("Access-Control-Allow-Origin", url); view.loadUrl(url); return false; }` in the header, what should I put next to "Access-Control-Allow-Origin"? I just put the url but that doesn't seem right. — Austin, Jul 15 '20 at 05:35
you have to pass map in loadUrl.. check it out for header adding https://stackoverflow.com/questions/7610790/add-custom-headers-to-webview-resource-requests-android — mili2501, Jul 15 '20 at 05:38
Map extraHeaders = new HashMap(); extraHeaders.put("Access-Control-Allow-Origin", /* your domain here */); host.loadUrl(url,extraHeaders); — mili2501, Jul 15 '20 at 05:47
I acutally noticed my stupid mistake and revised my code as ` view.loadUrl(url, map);` instead of ` view.loadUrl(url);` Same problem remains.. Maybe I should not use shouldOverrideUrlLoading method for this? Anyways, thank you for your help. — Austin, Jul 15 '20 at 05:48
`web.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { Map map = new HashMap(); map.put("Access-Control-Allow-Origin",url); view.loadUrl(url, map); return false; }` — Austin, Jul 15 '20 at 05:50

score 1 · Answer 1 · answered Jul 15 '20 at 13:18

Mobile webview logins can be highly problematic these days - some providers such as Google block logins from webviews.

The security recommendation is to login on a Chrome Custom Tab window instead, using a mobile flow and AppAuth libraries.

This also has better usability in areas such as password autofill and I don't think you'll get any CORS issues.

Maybe start with a private URI scheme based login, where your callback url is a value like this - rather than a webview HTTPS url.

com.mycompany.myapp:/callback

TRY A LOGIN WITH THE APPAUTH SAMPLE

To see whether this works, follow the quick steps in my blog post to get an AppAuth login working.

Then create an OAuth Client (trust entry) in Reddit, update the test app to those values and see if it works.

XMLHttpRequest blocked by CORS policy when using Android Webview for Oauth2 Reddit

1 Answers1