iOS WKWebview not allowing to load ePUB files

[csantanu]

Since Apple has deprecated UIWebview, we have to migrate to WKWebview. This has strict security policies and after many days of exasperated work, finally we could migrate our eBook app to WKWebview where all components are working fine, except the core epubjs. Even converting the source URLs of the ePUB files downloaded to app's data directory has been converted to safe URL but when we instantiate the book by passing the ePUB file path, the reader opens up with blank page. Web inspector shows no errors except there is a notice against the file saying - 'cannot load the resource'. Since epubjs uses iframe to render the book, there are pointers that WKWebview will not allow it due to CORS. But there are also pointers that says using Content Security Policy and in config.xml this should work. We tried all that but to no avail. Anyone has faced this issue ? Any help will be highly appreciated.

[OriIdan]

Does your epub.js resides in a different space then the actual EPUB file? We had similar problem when epub.js was not in the application document space. We ended up copying epub.js to application's document space and everything works.

-- Ori Idan CEO Helicon Books http://www.heliconbooks.com

On Tue, Jan 5, 2021 at 8:00 AM csantanu notifications@github.com wrote:

Since Apple has deprecated UIWebview, we have to migrate to WKWebview. This has strict security policies and after many days of exasperated work, finally we could migrate our eBook app to WKWebview where all components are working fine, except the core epubjs. Even converting the source URLs of the ePUB files downloaded to app's data directory has been converted to safe URL but when we instantiate the book by passing the ePUB file path, the reader opens up with blank page. Web inspector shows no errors except there is a notice against the file saying - 'cannot load the resource'. Since epubjs uses iframe to render the book, there are pointers that WKWebview will not allow it due to CORS. But there are also pointers that says using Content Security Policy and in config.xml this should work. We tried all that but to no avail. Anyone has faced this issue ? Any help will be highly appreciated.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/futurepress/epub.js/issues/1163, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAB43QC2TPAT7E57Q2KETXTSYKTHXANCNFSM4VUKXPWQ .

[csantanu]

@OriIdan thanks for such quick response. We are using ionic / cordova application, the epub files are downloaded from remote servers and placed in the application document space. How to place the epub.js in the application document space?

[OriIdan]

The method we are using is to pack epub.js along with our interface JS file and the actual reader HTML file in a single ZIP file that we download before we download any EPUB file. This gave us the flexibility to update epub.js without updating all our App. so it started as a solution to Apple's problem but proved to be a good solution in general.

On Tue, Jan 5, 2021 at 8:50 AM csantanu notifications@github.com wrote:

@OriIdan https://github.com/OriIdan thanks for such quick response. We are using ionic / cordova application, the epub files are downloaded from remote servers and placed in the application document space. How to place the epub.js in the application document space?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/futurepress/epub.js/issues/1163#issuecomment-754439369, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAB43QHZXVKCR3XL4KMDGV3SYKZDHANCNFSM4VUKXPWQ .

[csantanu]

Quick question though - in ionic, all other files under assets folder like images, fonts, css etc are correctly being accessed and rendered, so wondering why epub.js files will get caught up with security issue? is it because of javascript?

[csantanu]

@OriIdan We placed the epub.js files in the application document space and dynamically linked them in the index.html file of the ionic app. The EPUB files are in the same location as well. However, still the issue is not resolved. The EPUB reader opens up but still not displaying the EPUB file. Is the iframe an issue? I was reading somewhere that iOS WKWebview does not allow iframe to function due to it's tight security policy. We added CSP as well - meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' 'unsafe-eval' gap:; script-src 'self' 'unsafe-inline' 'unsafe-eval' gap:; frame-src ;" But again no luck.

[vince4]

Hi @csantanu, I am using the WKWebView to load an html from the file system, and then loading ePub with epub.js. If your distribution of epub.js and the epub you try to render are in the file system, you just need to give WKWebView permission to read other files:

wkwebView.configuration.preferences.setValue(true, forKey: "allowFileAccessFromFileURLs")
let url = URL(fileURLWithPath: YOURFILEPATH)
wkwebView.loadFileURL(url, allowingReadAccessTo: url.deletingLastPathComponent())

(Cf: https://stackoverflow.com/a/57756238/4320246)

It works for me. Moreover, you can also load your ePub through WKURLSchemeHandler, but you need to allow * origins in the response headers to fight CORS. I can't give you more clues with ionic, because I never tried ionic. Good luck.

[csantanu]

@vince4 Thanks for sharing the info...will surely try it. The url in the above code is the html file you are loading from the file system? which in turn uses epub.js to load an epub?

[vince4]

@csantanu Yes it's what I'm doing : loading an HTML file from a repository in my Bundle. In this repository, I have also epub.min.js, some css and custom js files.

[Soulfloret]

option add allowScriptedContent:true