Cordova Slack Digest

Sat, 03 Dec 2022 08:21:15 GMT

User count: 4724

Join the conversation at slack.cordova.io

Channel #general (49 messages)

Fri, 02 Dec 2022 16:19:34 GMT

@xinube says

After I bumped my project from cordova 9.x to 11 (and android 29 to 32) i have been dealing with unexpected CORS errors. The backend has allow origin set to * but it still persists. If I'm not mistaken, there was possibly a webview update somewhere in the past for cordova. Any chance this is related?? Requests from webview are sent as https://localhost|https://localhost.. I wonder if I missed any config from older cordova migration

Fri, 02 Dec 2022 16:21:14 GMT

@norman137 says

Are you handling preflight requests?

Fri, 02 Dec 2022 16:21:39 GMT

@norman137 says

Simply sending Access-Control-Allow-Origin: * isn‘t enough, there’s a few more steps for proper CORS support on the backend

Fri, 02 Dec 2022 16:22:24 GMT

@norman137 says

For all the APIs, the backend should also respond to the OPTIONS method of the API and return the CORS headers in the response with no content body.

Fri, 02 Dec 2022 16:23:03 GMT

@xinube says

Is this something added from one of these versions? Because I have an older apk build that works

Fri, 02 Dec 2022 16:23:03 GMT

@norman137 says

An nginx config that does this may look something like:

    add_header 'Access-Control-Allow-Origin' $http_origin always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, DELETE, PUT, OPTIONS, HEAD' always;
    add_header 'Access-Control-Allow-Headers' 'Accept, Content-Type, Access-Control-Allow-Origin' always;
    add_header 'Content-Type' 'text/plain charset=UTF-8' always;
    add_header 'Content-Length' 0 always;
    return 204;
}```

Fri, 02 Dec 2022 16:24:34 GMT

@xinube says

It accepts OPTIONS

Fri, 02 Dec 2022 16:25:39 GMT

@norman137 says

> Is this something added from one of these versions? Because I have an older apk build that works Not sure what you mean by this. The CORS issues in the android webview would have started when schemes are used (Android calls it the WebviewAssetLoader). Using schemes solves some issues related to browser features that requires a secure context (e.g. it needs to be on a https protocol) but using that also enforces cors.

Fri, 02 Dec 2022 16:25:57 GMT

@norman137 says

Cordova implements the WebviewAssetLoader/scheme stuff in cordova-android 10.x

Fri, 02 Dec 2022 16:29:08 GMT

@xinube says

As a first step I‘m trying to figure out where is my mistake. Something missing in my cordova/ionic configs, API. After some head banging I wondered if it was in backend so I found an APK from when I hadn’t bumped anything yet and installed. API endpoints worked. So I automatically guessed API misconfig out of the equation. Right?

Fri, 02 Dec 2022 16:30:20 GMT

@xinube says

I did read something about webview 2.x to 3.x changing something about localhost:8080 to localhost but that shouldn't change much, especially because it is set to *

Fri, 02 Dec 2022 16:30:59 GMT

@norman137 says

no matter what your app‘s webview origin is, it’s always going to be cross-origin to your server endpoint

Fri, 02 Dec 2022 16:31:43 GMT

@xinube says

Yes

Fri, 02 Dec 2022 16:31:45 GMT

@norman137 says

> I did read something about webview 2.x to 3.x I'm not really sure what oyu mean by this. Are you using the ionic webview plugin?

Fri, 02 Dec 2022 16:32:53 GMT

@norman137 says

In my experience to, using the * wildcard didn't always work, although my issues was with ios... not android

Fri, 02 Dec 2022 16:33:31 GMT

@norman137 says

What I did instead is read the Request‘s Origin header and use that as the value for the Response’s Access-Control-Allow-Origin value

Fri, 02 Dec 2022 16:33:53 GMT

@norman137 says

which in nginx, is what add_header 'Access-Control-Allow-Origin' $http_origin always; line does, $http_origin is the variable for the request origin header

Fri, 02 Dec 2022 16:34:25 GMT

@norman137 says

Obivously I don't know your tech stack, but whatever what you use, should be able to translate it so it does the same thing.

Fri, 02 Dec 2022 16:35:16 GMT

@xinube says

I didn‘t manually install any additional webview plugin. There’s something I also always wondered. Even with * I always needed to manually change it to my local external ip if i wanted to run the app locally

Fri, 02 Dec 2022 16:36:17 GMT

@xinube says

So instead of wildcard you dynamically read req on the fly and set it to allow

Fri, 02 Dec 2022 16:38:23 GMT

@norman137 says

Right

Fri, 02 Dec 2022 16:38:31 GMT

@norman137 says

which, is effectively the same behaviour as a wildcard

Fri, 02 Dec 2022 16:39:09 GMT

@norman137 says

I‘m not really confident that’s your issue thogh, cause like I said I only ever experienced that on like... ios 10

Fri, 02 Dec 2022 16:39:29 GMT

@norman137 says

But doesn't hurt to try...

Fri, 02 Dec 2022 16:40:44 GMT

@xinube says

Yea, and with this I think I can safely discard new cordova/ionic migration configs (?) being the culprit

Fri, 02 Dec 2022 16:43:57 GMT

@norman137 says

if you are using the ionic webview, ionic has had the scheme stuff implemented for a long time now... , but idk if they used the same WebViewAssetLoader stuff behind the scenes. But if you are using the ionic webview, then I think it will override what Cordova does.

Fri, 02 Dec 2022 16:46:52 GMT

@norman137 says

But as far as CORS goes... if you're returning the right Access-Control headers and responding to the OPTIONS request, then should be good...

Fri, 02 Dec 2022 16:46:56 GMT

@xinube says

I do use ionic, if that automatically implies using their webview, then yes. So older webview implementations didn‘t enforce CORS? maybe it’s something that was always there but the webview didn't care before

Fri, 02 Dec 2022 16:48:33 GMT

@norman137 says

I‘m not 100% sure on this but I think the android system webview didn’t enforce cors while on the file: protocol, but it does when using WebViewAssetLoader (which is what powers the https:// scheme for the app). But it could have also been simply a system webview update that made it started enforcing CORS, it's kinda hard to say tbh.

There isn't any explicit documentation from Android about how CORS is handled.

Fri, 02 Dec 2022 16:51:00 GMT

@norman137 says

There's also like 3 levels of security, 2 of which are browser features... some people get confused by them.

There‘s the CORS, CSP, and Cordova’s allow list (formally called whitelist).

So... I guess are you sure what you're seeing is a CORS issue?

Fri, 02 Dec 2022 16:51:00 GMT

@xinube says

The project is from 2017 so a lot is possible hehe

Fri, 02 Dec 2022 16:52:04 GMT

@norman137 says

CORS issues are usually identified by a lack of an error, perhaps simply stating a Security Error. with no other information, or sometimes you see preflight errors or it talks explicitly about Access-Control headers.

CSP errors will explicitly talk about Content Security Policy

Fri, 02 Dec 2022 16:54:48 GMT

@xinube says

Access to XMLHttpRequest at x from origin '<https://localhost|https://localhost>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present in the requested resource

Fri, 02 Dec 2022 16:55:23 GMT

@norman137 says

k, then yup... CORS 😛 but in that error it's stating that Access-Control-Allow-Origin is missing

Fri, 02 Dec 2022 16:55:31 GMT

@norman137 says

So that sounds like a server misconfiguration

Fri, 02 Dec 2022 16:57:24 GMT

@xinube says

I don't have access to it, just to the source code, I can ask for a check, but the code for this header is present in the source code

Fri, 02 Dec 2022 16:57:35 GMT

@norman137 says

at x is a remote server correct?

Fri, 02 Dec 2022 16:57:52 GMT

@xinube says

Yes, i redacted haha

Fri, 02 Dec 2022 16:58:19 GMT

@norman137 says

Just wanted to make sure you're not XMLHttpRequesting <http://localhost> or something lol

Fri, 02 Dec 2022 16:59:13 GMT

@norman137 says

but yah that sounds like a server issue, that error is saying that the server didn't give a Access-Control-Allow-Origin response header so the browser blocked the request

Fri, 02 Dec 2022 17:00:03 GMT

@norman137 says

If you hit the API manually via postman or something, you can inspect the response headers to confirm

Fri, 02 Dec 2022 17:00:36 GMT

@norman137 says

If it is indeed missing, then that's definitely your issue.

Fri, 02 Dec 2022 17:02:08 GMT

@xinube says

Good idea, I'm hitting it with insomnia

Fri, 02 Dec 2022 17:02:53 GMT

@norman137 says

I'd try hitting both the OPTIONS version and the real endpoint and confirm that the headers are present in both http methods, and that they are the expected value.

Fri, 02 Dec 2022 17:06:59 GMT

@xinube says

access-control-allow-credentials: true access-control-allow-origin: * access-control-allow-headers: x-requested-with access-control-allow-methods: POST, GET, PUT, DELETE, OPTIONS

Fri, 02 Dec 2022 17:07:15 GMT

@xinube says

Both GET and OPTIONS

Fri, 02 Dec 2022 17:07:44 GMT

@xinube says

OPTIONS response body was OK

Fri, 02 Dec 2022 17:08:11 GMT

@xinube says

Maybe I should just try the wildcard work around

Fri, 02 Dec 2022 17:14:27 GMT

@norman137 says

If you can try it...

OPTIONS response body should be empty (Content-Length should be 0) but that shouldn‘t be related the error you’re seeing.