Is there any way to bypass CORS requirement with native `fetch()`, on Android platform? #504

gslin · 2024-10-29T21:13:55Z

gslin
Oct 29, 2024

On Cordova 12, I want to access resources not controlled by myself (i.e. I can't add CORS in the response header), on Android platform. I know it's impossible on browser platform due to sandbox/security constraints, but it should be possible on mobile platforms.

This is my www/index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>title</title>
</head>
<body>
  <textarea readonly style="height: 20rem; width: 100%"></textarea>
  <script src="cordova.js"></script>
  <script src="js/index.js"></script>
</body>
</html>

And this is www/js/index.js:

const main = async () => {
  const res = await fetch('https://www.example.com/');

  const el = document.querySelector('textarea');
  el.innerText = await res.text();
};

document.addEventListener('deviceready', main, false);

I've added <access> into config.xml, but it seems not working:

<access origin="*" />

The error message in the console is:

10-30 05:07:12.365 14983 14983 I chromium: [INFO:CONSOLE(0)] "Access to fetch at 'https://www.example.com/' from origin 'https://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.", source: https://localhost/index.html (0)

breautek · 2024-10-29T21:21:36Z

breautek
Oct 29, 2024
Collaborator

CORS is a browser mechanism. So it's tied to all browser features. There is no way to use the browser fetch implementation and disable CORs. The webview SDK offers no configuration ability for this.

You can however use a cordova plugin that implements http request using the native network stack (e.g. okhttp or some networking library) to make the request. These network request aren't bound by CORS rules since it's not a browser. If the plugin "implements" the fetch interface, then you can probably override window.fetch with the cordova plugin function.

A drawback to this is there are going to be some browser features that can't be mapped to the native network stack, e.g. supplying an img tag source, but you could still download the source and form a blob url to use as a workaround.

Apache doesn't have any plugins to do networking in that fashion, but I do know there are third-party ones available.

0 replies

gslin · 2024-10-29T21:50:03Z

gslin
Oct 29, 2024
Author

Thanks for the clarification. If there is no way to bypass fetch()'s CORS requirement, what's the purpose of <access origin="..." />, mentioned in https://cordova.apache.org/docs/en/12.x/guide/appdev/allowlist/index.html ?

This controls which network requests (images, XHRs, etc) are allowed to be made to specific domains (via cordova native hooks).

My understanding of XHRs here is XMLHttpRequest, which is not working on cross-site requests either.

1 reply

breautek Oct 29, 2024
Collaborator

It's a layer to lock down the webview further. Based on Widget Access Request Policy specification.

The webview allows intercepting network request and Cordova uses this to enforce an allow list policy. But if we permit the request to continue, they are still subjected to CORS, and CSP which are two different browser security mechanisms.

If I recall correctly there are still gaps in the CSP in what it can restrict (e.g. I don' think CSP prevents navigations) so both CSP and cordova's allowlist is still used.

gslin · 2024-10-29T22:15:37Z

gslin
Oct 29, 2024
Author

Thanks, so it looks like using 3rd-party plugins like cordova-plugin-advanced-http is the only approach to bypass CORS mechanism, if the server cannot give CORS header in HTTP response.

2 replies

breautek Oct 29, 2024
Collaborator

That would be your best bet yes. I can't vouch for any particular plugin but using the native network stack will not be bound by CORs.

There are "other" workarounds like using a proxy, so that the cordova app hits your own server, and the server makes the network request to x, so that you can control the response headers. But then you have to worry about malicious clients abusing your proxy server. So using a plugin that exposes a native HTTP API is likely the safest option.

NiklasMerz Oct 31, 2024
Collaborator

There is also another creative approach I implemented with a plugin some years ago. It only works on iOS really and is super sketchy and could break easily. But maybe you want to check it out for certain use cases: https://github.com/GEDYSIntraWare/cordova-plugin-webview-proxy.

As @breautek said I would go with native HTTP plugins if you really need to.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Is there any way to bypass CORS requirement with native `fetch()`, on Android platform? #504

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 3 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Is there any way to bypass CORS requirement with native fetch(), on Android platform? #504

gslin Oct 29, 2024

Replies: 3 comments · 3 replies

breautek Oct 29, 2024 Collaborator

gslin Oct 29, 2024 Author

breautek Oct 29, 2024 Collaborator

gslin Oct 29, 2024 Author

breautek Oct 29, 2024 Collaborator

NiklasMerz Oct 31, 2024 Collaborator

Is there any way to bypass CORS requirement with native `fetch()`, on Android platform? #504

gslin
Oct 29, 2024

Replies: 3 comments 3 replies

breautek
Oct 29, 2024
Collaborator

gslin
Oct 29, 2024
Author

breautek Oct 29, 2024
Collaborator

gslin
Oct 29, 2024
Author

breautek Oct 29, 2024
Collaborator

NiklasMerz Oct 31, 2024
Collaborator