search

apache / cordova-ios

Apache Cordova iOS
https://cordova.apache.org/
Apache License 2.0
2.16k stars 987 forks source link

No local file access #883

Closed nintendowii111 closed 4 years ago

nintendowii111 commented 4 years ago

Bug Report

Problem

Cant access local www folder I think it has to do with XHR?

What is expected to happen?

local file access should be a default feature like with UiWebView

What does actually happen?

Shoots error where can't access local file.

Information

Command or Code

Environment, Platform, Device

Xcode 11.5, Cordova-ios@6.0.0

Version information

Checklist

adams999 commented 4 years ago

webview actualizalo a la version 5.0.0

breautek commented 4 years ago

You should migrate your app to use schemes, which should solve this issue, among other file:// related issues with the WKWebView. Do note however that switching schemes will cause you lose web storage such as indexedDB or local storage, as the origin of your app will change.

If you must use the file:// scheme, then I would advise sticking with cordova-ios@5.1.1 for the time being. You need to use a plugin such as https://github.com/oracle/cordova-plugin-wkwebview-file-xhr, but it currently expects the wkwebview engine to be installed, which is incompatible with cordova-ios@6. I've raised an issue at https://github.com/oracle/cordova-plugin-wkwebview-file-xhr/issues/55 to see if they can update the plugin to support cordova-ios@6.

Polm90 commented 4 years ago

I have the same issue. But I do not understand if I'm missing something else and how I can properly fix it.

I use the file plugin and I access try to access to local files via this:

let path = cordova.file.dataDirectory + nameFile; window.resolveLocalFileSystemURL(path, success, error);

and with cordova-ios 6.0.0 I always receive error (NOT_FOUND_ERR). I do not explicitly use the "file://" scheme, but actually, if I inspect the code at runtime, I see that path has the following value:

"file:///Users//Library/Developer/CoreSimulator/Devices/E56CD54C-AA0C-43F8-BB37-9D91CA3754C1/data/Containers/Data/Application/683C763A-1710-4729-83E0-DC693A142188/Library/NoCloud/" So, maybe, I just need to change some preference in the config.xml or to do something else simple.

I also tried to read the blog post and I tried to add the preference options indicated but they didn't work (probably, I've missed something or I've not understood something properly).

I do not know if the file-xhr plugin will help me (note that I'm using the ionic-webview) once it will be properly updated.

Thank you for any advice you can give me!

breautek commented 4 years ago

@Polm90 I don't think your issue is the same. It's similar, but this issue is regarding using XHR on cordova-ios@6.

I'd consider raising an issue on the cordova-plugin-file repo with the bug form filled out, since it looks like your issue is more related to the file plugin on cordova-ios@6.

eradin commented 4 years ago

You should migrate your app to use schemes, which should solve this issue, among other file:// related issues with the WKWebView. Do note however that switching schemes will cause you lose web storage such as indexedDB or local storage, as the origin of your app will change.

If you must use the file:// scheme, then I would advise sticking with cordova-ios@5.1.1 for the time being. You need to use a plugin such as https://github.com/oracle/cordova-plugin-wkwebview-file-xhr, but it currently expects the wkwebview engine to be installed, which is incompatible with cordova-ios@6. I've raised an issue at oracle/cordova-plugin-wkwebview-file-xhr#55 to see if they can update the plugin to support cordova-ios@6.

I have confirmed that removing all WKWEBVIEW plugins and adding the config.xml directives:

<preference name="scheme" value="app" />
<preference name="hostname" value="localhost" />

Works for cordova-ios@6.0.0. This was not obvious from the blog release notes nor were these explained on what they do and how to use them (documentation needs updating). They apparently implement an "app" scheme and override the file:// scheme which will be rejected by WKWEBVIEW. I have confirmed that this also works with plugins, file and fileopener2. My app doesn't use inappbrowser so I can't confirm that one.

ej-dunne commented 4 years ago

You should migrate your app to use schemes, which should solve this issue, among other file:// related issues with the WKWebView. Do note however that switching schemes will cause you lose web storage such as indexedDB or local storage, as the origin of your app will change. If you must use the file:// scheme, then I would advise sticking with cordova-ios@5.1.1 for the time being. You need to use a plugin such as https://github.com/oracle/cordova-plugin-wkwebview-file-xhr, but it currently expects the wkwebview engine to be installed, which is incompatible with cordova-ios@6. I've raised an issue at oracle/cordova-plugin-wkwebview-file-xhr#55 to see if they can update the plugin to support cordova-ios@6.

I have confirmed that removing all WKWEBVIEW plugins and adding the config.xml directives:

<preference name="scheme" value="app" />
<preference name="hostname" value="localhost" />

Works for cordova-ios@6.0.0. This was not obvious from the blog release notes nor were these explained on what they do and how to use them (documentation needs updating). They apparently implement an "app" scheme and override the file:// scheme which will be rejected by WKWEBVIEW. I have confirmed that this also works with plugins, file and fileopener2. My app doesn't use inappbrowser so I can't confirm that one.

@eradin when I add those preferences the app loads to a black white screen and does not display my index.html file (which is the homepage of the app) is there anything additional I need to change when I add these config preferences?

eradin commented 4 years ago

@ej-dunne The white page (of death) is the exact effect you get when it loads from file:// under WKWEBVIEW. Those directives are supposed to override the file:// request. Did you remove the plugins (either the ionic or cordova one)? Are you using a framework?

breautek commented 4 years ago

There could also be a javascript error preventing the page from loading. Safari Web Inpsector doesn't show console logs unless if the inspector was opened at the time the error occurred.

So to see startup errors, launch the web inspector, then cmd+r while the inspector is focused to refresh the app page. If there are any javascript errors occurring, you should now see them.

ej-dunne commented 4 years ago

The old wkwebview plugin is not installed and im not seeing any javascript errors. I also downloaded the apps content through xcode and confirmed that my index.html file is present. It is a local file.

eradin commented 4 years ago

I assume this app loaded WITH the plugin using 5.1.1. The only other thought I have is one of your plugins is failing under 6.0.0. Make sure you upgrade your plugins to the latest rev where applicable. You may have to simplify your plugin configuration until you get that index page to load and then add them back.

ej-dunne commented 4 years ago

It is telling me that "The resource was requested insecurely."

Failed to load resource: the server responded with a status of 404 ()

eradin commented 4 years ago

Server? For a local index file?

obxyann commented 4 years ago

I used ej-dunne's coment at first. I can load local files by Ajax calls, but later some other plugins I used had impacts because file:// scheme been changed to app://localhost/

  1. cordova-plugin-inappbrowser@4.0.0 can't open local html because it navigate to "app://localhost/local.html" which reported 'unsupported URL' as IAB#732

  2. I used Google Maps which refused the HTTP referrers 'app://localhost/my-app.html' (I had already added it into allow list, but it seems only recognize those links started with http:// or __file_url __//)

So I changed to XHR#55. ej-dunne has a hot patch it does solve all above problems include AJAX call local...

I think cordova-ios w/ WKWebView should advise the usage of file:// ...

75341704 commented 4 years ago

Follow codes hereunder, cdvIsFileScheme may be the key point

https://github.com/apache/cordova-ios/blob/e6e90e07d1b04bf5fcafc14578f1c4fb8bd86386/CordovaLib/Classes/Public/CDVViewController.m#L273 https://github.com/apache/cordova-ios/blob/e6e90e07d1b04bf5fcafc14578f1c4fb8bd86386/CordovaLib/Classes/Public/CDVViewController.m#L319 https://github.com/apache/cordova-ios/blob/e6e90e07d1b04bf5fcafc14578f1c4fb8bd86386/CordovaLib/Classes/Private/Plugins/CDVWebViewEngine/CDVWebViewEngine.m#L301 https://github.com/apache/cordova-ios/blob/e6e90e07d1b04bf5fcafc14578f1c4fb8bd86386/CordovaLib/Classes/Private/Plugins/CDVWebViewEngine/CDVWebViewEngine.m#L304 https://github.com/apache/cordova-ios/blob/e6e90e07d1b04bf5fcafc14578f1c4fb8bd86386/CordovaLib/Classes/Private/Plugins/CDVWebViewEngine/CDVWebViewEngine.m#L160

That is to say, if the scheme is not 'file://‘ , the code hereunder won't work. https://github.com/apache/cordova-ios/blob/e6e90e07d1b04bf5fcafc14578f1c4fb8bd86386/CordovaLib/Classes/Private/Plugins/CDVWebViewEngine/CDVWebViewEngine.m#L306

But the scheme setting is also related to CORS in the Wkwebview. Yesterday I changed the scheme from app to file. The local file from the hot-code-push folder was working, but there is a 'null' origin error in safari debugger when the axios is used in my html project.

As per https://github.com/oracle/cordova-plugin-wkwebview-file-xhr#readme, =qte= This plugin makes it possible to reap the performance benefits of using the WKWebView in your Cordova app by resolving the following issues:

The default behavior of WKWebView is to raise a cross origin exception when loading files from the main bundle using the file protocol - "file://". This plugin works around this shortcoming by loading files via native code if the web view's current location has "file" protocol and the target URL passed to the open method of the XMLHttpRequest is relative. As a security measure, the plugin verifies that the standardized path of the target URL is within the "www" folder of the application's main bundle or in the /Library path of the application data directory.

Since the application's starting page is loaded from the device's file system, all XHR requests to remote endpoints are considered cross origin. For such requests, WKWebView specifies "null" as the value of the Origin header, which will be rejected by endpoints that are configured to disallow requests from the null origin. This plugin works around that issue by handling all remote requests at the native layer where the origin header will be excluded. =unqte=

it may be the trade off between local file and CORS in the wkwebview?

75341704 commented 4 years ago

You should migrate your app to use schemes, which should solve this issue, among other file:// related issues with the WKWebView. Do note however that switching schemes will cause you lose web storage such as indexedDB or local storage, as the origin of your app will change.

If you must use the file:// scheme, then I would advise sticking with cordova-ios@5.1.1 for the time being. You need to use a plugin such as https://github.com/oracle/cordova-plugin-wkwebview-file-xhr, but it currently expects the wkwebview engine to be installed, which is incompatible with cordova-ios@6. I've raised an issue at oracle/cordova-plugin-wkwebview-file-xhr#55 to see if they can update the plugin to support cordova-ios@6.

  1. fork the cordova-plugin-wkwebview-file-xhr and remove the dependency cordova-plugin-wkwebview-engine in the plugin.xml
  2. cordova plugin add [fork address]
  3. Add the code [configuration.preferences setValue:@"TRUE" forKey:@"allowFileAccessFromFileURLs"]; [configuration setValue:@"TRUE" forKey:@"allowUniversalAccessFromFileURLs"]; In https://github.com/apache/cordova-ios/blob/e6e90e07d1b04bf5fcafc14578f1c4fb8bd86386/CordovaLib/Classes/Private/Plugins/CDVWebViewEngine/CDVWebViewEngine.m#L72

it works partially considering the Known Issues of cordova-plugin-wkwebview-file-xhr The plugin caches cookies at the native layer between requests but it does not attempt to sync cookies between the WKWebView and the native sessions. From the JavaScript context, this means "document.cookie" won't contain any cookies returned from XHR handled at the native layer and the native iOS XHR will not see any cookies returned from remote resources fetched by the browser context, such as images.

anatolykazantsev commented 4 years ago

I'm very sorry and I guess I'm not the first one who is asking it, but I've being searching and going around all of these relates issue, cross links, etc, but could not see a solution.

So my problem is accessing files on iOS (using cordova-ios 6.x) from cordova.file.cacheDirectory which is outside of the app bundle. Of course writing and reading via Cordova's File plugin works ok but the webview doesn't have direct access to it. And as I understood from all comments here and there, it is not possible in wkwebview. Neither setting schema/hostname (i.e. using WKURLSchemeHandler) nor using cordova-plugin-wkwebview-file-xhr.

Sad news if it is true. For example taking a picture and showing its preview (via tag) before uploading becomes very inconvenient on iOS and different to Android code. I believe there're plenty of Cordova-based apps using similar scenarios and it became "impossible" to do it stright-forward and we're also forced to use wkwebview.

Alternatives are:

I wonder if I miss something and what's current good solution. Is there any plans to solve it somehow in future?

If there's a better place to post this question/message, I'm happy to move it :-)

globules-io commented 4 years ago

https://github.com/globules-io/cordova-plugin-ios-xhr

breautek commented 4 years ago

I'm very sorry and I guess I'm not the first one who is asking it, but I've being searching and going around all of these relates issue, cross links, etc, but could not see a solution.

So my problem is accessing files on iOS (using cordova-ios 6.x) from cordova.file.cacheDirectory which is outside of the app bundle. Of course writing and reading via Cordova's File plugin works ok but the webview doesn't have direct access to it. And as I understood from all comments here and there, it is not possible in wkwebview. Neither setting schema/hostname (i.e. using WKURLSchemeHandler) nor using cordova-plugin-wkwebview-file-xhr.

Sad news if it is true. For example taking a picture and showing its preview (via tag) before uploading becomes very inconvenient on iOS and different to Android code. I believe there're plenty of Cordova-based apps using similar scenarios and it became "impossible" to do it stright-forward and we're also forced to use wkwebview.

Alternatives are:

Internal web-server data: (requires cleanup after usage) Copying to cordova.file.tempDirectory (requires cleanup after usage) I wonder if I miss something and what's current good solution. Is there any plans to solve it somehow in future?

If there's a better place to post this question/message, I'm happy to move it :-)

You can try convertFilePath as described at https://github.com/apache/cordova-plugin-camera/issues/622#issuecomment-659357799

iwan-uschka commented 4 years ago

Hi there, i just tried to update to cordova-ios@6.1.0 but ran into CORS issues. I added 

<preference name="scheme" value="app" />
<preference name="hostname" value="localhost" />

to my config.xml.

I switched from https://github.com/apache/cordova-plugin-file-transfer to https://github.com/dpa99c/cordova-plugin-file-transfer to avoid build errors in Xcode (https://github.com/apache/cordova-plugin-file-transfer/issues/258).

I updated cordova-plugin-inappbrowser to version 4.0.0 and cordova-plugin-splashscreen to version 6.0.0.

So i do not face any app boot screen of death issues or any problems opening URLs in an external browser, the local web app loads without any problems but i can't make any API or simple GET-calls (AJAX)=> CORS.

I've read about cookie issues at https://github.com/apache/cordova-ios/issues/944 or locale storage issues at https://github.com/apache/cordova-ios/issues/883#issuecomment-637559770.

I just tested successfully loading remote images and iframes (Youtube embed player).

I have to admit it's been a long time since i had to deal with cordova at this level so i have to ask: should we wait a little more til and all the issues will be fixed in the near future?

Running this setup we're not able to publish new apps into the Apple App Store but we have to use this setup, right? Or do these errors mentioned above not exist for cordova-ios@5.1?

It's too late right now 😴 for testing https://github.com/globules-io/cordova-plugin-ios-xhr but if anyone can confirm that this plugin solves XHR issues (calling API from within a correctly loaded ionic web app [different schemes]) it would be really appreciated.

ThX!!

breautek commented 4 years ago

If you're using schemes, or the ionic webview using schemes, you don't need the cordova-plugin-ios-xhr. Schemes workarounds around the CORS issues when dealing with local files. This plugin is for using xhr against your own local file:// urls.

If you're communicating with an external webserver using XHR, the webserver must implement the CORS protocol.

iwan-uschka commented 4 years ago

Hi @breautek thanks for your (ultra) quick reply and thanks for pointing out the main function of cordova-plugin-ios-xhr.

the webserver must implement the CORS protocol

Does this mean that i am not able to work with foreign APIs which do not provide Access-Control-Allow-Origin: *?

breautek commented 4 years ago

Does this mean that i am not able to work with foreign APIs which do not provide Access-Control-Allow-Origin: *

Yes, because they'll be considered cross-origin to your app.

There are workarounds, such as building a proxy server that your app communicates with, and your server then makes the foreign API call.

iwan-uschka commented 4 years ago

Yes, because they'll be considered cross-origin to your app.

Jap, from now on :)

Thanks again.

I will try solving the CORS issues and I'll come back in here crying if i run into other cordova-ios@6+ related issues. Cheers

breautek commented 4 years ago

Assuming you have control of your server, this may help: https://breautek.com/2020/07/14/enabling-cors/

iwan-uschka commented 4 years ago

Enabling CORS and returning the correct allowed origins headers did the trick. Thx again @breautek. Now i'am stuck handling the cookies correctly. But to keep from filling the ticket with unrelated stuff i'll keep an eye on https://github.com/apache/cordova-ios/issues/944 and https://github.com/apache/cordova-ios/issues/931.

anatolykazantsev commented 4 years ago

You can try convertFilePath as described at apache/cordova-plugin-camera#622 (comment)

Thanks a lot. That definitely works. And the new post on cordova's blog (https://cordova.apache.org/howto/2020/07/18/uiwebview-warning.html) mentions that.

Pratz007-tech commented 4 years ago

After cordova-ios@6.1.0 installation i had cors issue now while doing cordova run browser : App properly runs on localhost on browser (CORS setting added from server side) & api gives me expected response . But in ios device I can still see the same issue [Error] Origin app://localhost is not allowed by Access-Control-Allow-Origin. [Error] XMLHttpRequest cannot load http://myDomain/API/V1/region due to access control checks. 2:50. Added preference for scheme with value as app & preference for hostname with value as localhost. Following added in config.xml : 

    <preference name="hostname" value="localhost" />
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
</platform> What the thing I am missing ?? Thanks In advance.
Pratz007-tech commented 4 years ago

Enabling CORS and returning the correct allowed origins headers did the trick. Thx again @breautek. Now i'am stuck handling the cookies correctly. But to keep from filling the ticket with unrelated stuff i'll keep an eye on #944 and #931.

Hey enabling cors was the only thing u did ? Initially I added cordova-ios6.1.0 then preferences for schema as app & hostname as localhost. Fixed the cors issue from server side , tried cordova run browser --> Got response on browser while on ios device got error : [Error] Origin app://localhost is not allowed by Access-Control-Allow-Origin. [Error] XMLHttpRequest cannot load http://myDomain/API/V1/region due to access control checks. Thanks in advance !!

breautek commented 4 years ago

Oracle has released version 3.0.0 of their cordova-plugin-wkwebview-file-xhr plugin, which supports cordova-ios@6.

If you are not using schemes, then you should this updated version of this plugin.

Hey enabling cors was the only thing u did ? Initially I added cordova-ios6.1.0 then preferences for schema as app & hostname as localhost. Fixed the cors issue from server side , tried cordova run browser --> Got response on browser while on ios device got error : [Error] Origin app://localhost is not allowed by Access-Control-Allow-Origin. [Error] XMLHttpRequest cannot load http://myDomain/API/V1/region due to access control checks. Thanks in advance !!

Looks like you're using an external server, my blog post may help you for this case. If you still have issues, consider asking for support on our slack

iwan-uschka commented 4 years ago

I want to confirm that i was able to make my app work again using cordova-plugin-wkwebview-file-xhr@3.0.0 (thanks @breautek for mentioning) and cordova-ios@6.1.0. I removed

<preference name="scheme" value="app" />
<preference name="hostname" value="localhost" />

from my config.xml. Just mentioning because i tried it this way before.

Result:

Tested on:

For the sake of completeness: I also updated to cordova-plugin-inappbrowser@4.0.0 and cordova-plugin-splashscreen@6.0.0.

vdias38 commented 4 years ago

Hi @iwan-uschka, check this comment. I've faced the same issue and it fixes it, only need to install @ahovakimyan/cordova-plugin-wkwebviewxhrfix

iwan-uschka commented 4 years ago

Hi @vdias38, i added @ahovakimyan/cordova-plugin-wkwebviewxhrfix but it didn't work out. I am still not able to load remote HTML assets like images, audio or videos via HTML tags like <img>, <audio> or <video> which are only accessible if the correct (session & CSRF) cookie is sent along. I think this plugin enables loading local files without having CORS issues, right?

iwan-uschka commented 4 years ago

@ahovakimyan/cordova-plugin-wkwebviewxhrfix needs to be added and does not replace cordova-plugin-wkwebview-file-xhr@3.0.0, right?

vdias38 commented 4 years ago

Hi @iwan-uschka , I confirm it's for local file access if you use cordova-ios@6+, no need to add cordova-plugin-wkwebview-file-xhr. If you face issues loading remote files with cookie, then should not be related to this thread and I don't know what could happen.

AraHovakimyan commented 3 years ago

@ahovakimyan/cordova-plugin-wkwebviewxhrfix needs to be added and does not replace cordova-plugin-wkwebview-file-xhr@3.0.0, right?

Hi @iwan-uschka If you are using 

 `cordova plugin add https://github.com/AraHovakimyan/cordova-plugin-wkwebviewxhrfix`

Plugin, also make sure you remove the below preference from project's config.xml

`<preference name="scheme" value="app" /> `
`<preference name="hostname" value="localhost"  />`
iwan-uschka commented 3 years ago

Thx @AraHovakimyan , like mentioned in https://github.com/apache/cordova-ios/issues/883#issuecomment-716736137 i already removed scheme and hostname from config.xml. Local file access problems are solved.

sven513 commented 1 year ago

For accessing local files (and resources like scripts, images, ...) inside cordova.file.dataDirectory with InAppBrowser, I can confirm this hotfix https://github.com/apache/cordova-plugin-inappbrowser/pull/778 in CDVWKInAppBrowser.m works.

danieldanielecki commented 1 year ago

For accessing local files (and resources like scripts, images, ...) inside cordova.file.dataDirectory with InAppBrowser, I can confirm this hotfix apache/cordova-plugin-inappbrowser#778 in CDVWKInAppBrowser.m works.

That's a good PR to put more "pressure" to finally merge such a little changes causing such a basic functionality to be broken without some side fixes. For me, the only one solution which worked was to add cordova plugin add @globules-io/cordova-plugin-ios-xhr to my project, even though the plugin seems to be archived...