search

johnfactotum / foliate-js

Render e-books in the browser
https://johnfactotum.github.io/foliate-js/reader.html
MIT License
318 stars 43 forks source link

Fix assets resolving bug in epub.js #8

Closed troyeguo closed 1 year ago

troyeguo commented 1 year ago

When assets are located in the root folder, can't resolve its path with "new URL("../stylesheet.css", "whatever:///b/path.html")". It will return "whatever:///b/stylesheet.css" instead of "whatever:///stylesheet.css". This commit fixes the bug by replacing "whatever:///" with "whatever://whatever/".

example file: Redemption.zip

johnfactotum commented 1 year ago

Thanks for catching this.

It will return "whatever:///b/stylesheet.css" instead of "whatever:///stylesheet.css".

I'm not seeing this behavior, though. The book works as expected in WebKit and Firefox for me. In Chromium the URL constructor just throws a type error, which I'm 100% sure is a Chromium bug.

Given that browsers currently behave very inconsistently when it comes to non-special schemes, I think it'd be better to use https with an invalid host. This was in fact what was used in Foliate before, and I honestly can't remember why I changed it.

troyeguo commented 1 year ago

Just tested in Firefox. Comfirmed that this is a Chromium bug. But still persisting even if changing schemes. This bug will make foliate.js unable to resolve some assets in Chrome Broswer. The example file lost its stylesheets and cover images when opening in Chrome in https://johnfactotum.github.io/foliate-js/reader.html. image

johnfactotum commented 1 year ago

In your screenshot, the URL has an empty host. This is not allowed for special schemes, per the URL standard. I'm not sure if the spec actually defines the behavior in this case, but anyway, here the extra slash is just ignored, and b is treated as the host, rather than a path segment.

So you either need to set the host to an non-empty string (e.g. use https://example.com/b/test.html instead of https:///b/test.html), or you need to use file: or a non-special scheme.

The example file lost its stylesheets and cover images when opening in Chrome in https://johnfactotum.github.io/foliate-js/reader.html.

It works for me after c510d83ea2ccf88e2b243199ecf3cad3c8c9eee8. You may need to bypass the cache and reload the page.

troyeguo commented 1 year ago

In your screenshot, the URL has an empty host. This is not allowed for special schemes, per the URL standard. I'm not sure if the spec actually defines the behavior in this case, but anyway, here the extra slash is just ignored, and b is treated as the host, rather than a path segment.

So you either need to set the host to an non-empty string (e.g. use https://example.com/b/test.html instead of https:///b/test.html), or you need to use file: or a non-special scheme.

The example file lost its stylesheets and cover images when opening in Chrome in https://johnfactotum.github.io/foliate-js/reader.html.

It works for me after c510d83. You may need to bypass the cache and reload the page.

Sorry, didn't notice there is a new commit. It's based on old experince. It works for me too.