search

satorumurmur / bibi

Bibi | EPUB Reader on your website.
https://bibi.epub.link
MIT License
843 stars 123 forks source link

How to use Bibi with AWS S3 (cross-origin) #84

Closed gotchane closed 3 years ago

gotchane commented 4 years ago

※日本語失礼します

Bibi を使わせていただいている者です。アップデートされていくのはとてもありがたいです！

1点質問させてください。以下構成で Bibi ビューアーを使うことを検討しています。

・アプリサーバに Bibi ビューアー配置 ・epub 展開済みの フォルダを AWS S3に配置 ・上記epub のパスを data-bibi-book にて指定 ・アプリサーバと AWS S3のドメインは違う（クロスオリジン）

上記構成だと、以下あたりで Bibi ビューアー読み込みが止まってしまい、 うまく表示することができません。 おそらくクロスオリジンでは、iframe タグ内の document を呼び出すことはできても、document に変更を加えることができないのでは…？と予想しています。

https://github.com/satorumurmur/bibi/blob/2e5bd04be88920984ce60428fc204722ca1d807f/__src/bibi/resources/scripts/bibi.heart.js#L1051

こちらの回避方法について、もし方法ありそうでしたらご教示いただけませんでしょうか…？

satorumurmur commented 4 years ago

ご利用ありがとうございます。

初期状態ではクロスオリジンでの利用を明示的に制限していますので、クロスオリジンで EPUB を開きたい場合には、bibi/presets/default.js ファイルを編集して設定を変更する必要があります。具体的には、"trustworthy-origins" に EPUB 保存先のオリジンを加えることで許可対象になります。

まずこちらをお試しになってみてください（前提として、サーバサイドで CORS が許可されていなくてはなりません）。

　＊

なお、その上で "bookshelf" をリモートオリジンにある特定ディレクトリに変更しておくと、index.html の body 要素の data-bibi-book 属性や URL の book パラメータで EPUB までの URL 全体を示す必要はなくなります。

ちなみに bookshelf ディレクトリの指定は、index.html で上記 default.js を読み込んでいる script 要素の data-bibi-bookshelf 属性でも行うこともでき、そちらが default.js 中での指定よりも優先されます。共通設定を default.js で行い、各 HTML で場合に応じて変更するという使い方も可能です。

satorumurmur commented 4 years ago

……ただ、ちょっと振る舞いに想定と異なるところがあるような気がします。可能でしたら URL（と、場合により認証情報）をご共有いただければ、より具体的にわかると思います。ここでなくメールなどでも構いませんので、コンテンツやサービスによっては難しいと思いますが、ご検討ください。

satorumurmur commented 4 years ago

（上に書いた「想定と異なる振る舞い」は気になるので、できればお使いの状態で確認させていただけると今後のために助かるのですが……それはそれとして、ブレイクポイントとして示してくださった行のあたりは v1.1.1 以降、same-origin-policy にも影響のあるかたちで処理が変わっていますので、最新版にするとまた状況が変わるかもしれない、と思います）

gotchane commented 4 years ago

詳細なご回答ありがとうございます！ "trustworthy-origins"の設定はしているのですが、うまく挙動せず…という状況です。 v1.1.1 はまだ試していませんので、一旦こちら試してみようと思います！

可能でしたら URL（と、場合により認証情報）をご共有いただければ、

こちらはセキュリティ共有が難しいかもしれませんが、一旦検討してみます。 難しい場合はこちらにより詳細な挙動を共有しようと思います。

gotchane commented 4 years ago

@satorumurmur

まず bibi-bookshelf 以下にファイルを配置する形で、 Bibi 1.1.3 の動作確認をしているのですが、 bibi-bookshelfに指定した epub がうまく読み込まれません。。

以下に手順を記載しますが、 Bibi1.0.0 ~ 1.0.1 では動作し、Bibi1.1.0 から手順7に記載したエラーが発生するようになっています。

epub の指定方法が Bibi 1.1.0 から変更が加わったなどありますでしょうか？

手順

  1. 以下リンクから、 Bibi1.1.3 ダウンロード https://bibi.epub.link/my/name/is/Bibi-v1.1.3.zip

  2. Webサーバ上に Bibi 1.1.3.zip を解凍

  3. Bibi-1.1.3 ディレクトリをreaderに変

  4. reader/bibi-bookshelf ディレクトリに、FIXED版の epub を配置（展開前・展開後両方）

  5. reader/bibi/index.html の body タグの data-bibi-book に、展開したepubのディレクトリ or epub ファイル名を指定 例）ファイル名がsample.epub の場合(展開前)

    <body data-bibi-book=“sample.epub”>

    例）ファイル名がsample.epub の場合(展開済)

    <body data-bibi-book=“sample”>

  6. Webブラウザから Bibi ビューアーにアクセス 例）https://example.com/reader/bibi/index.html

  7. 以下エラーが発生

フォルダに展開した epub の場合

Uncaught (in promise) 
Failed to Open the Book:
Changing "extract-if-necessary" May Be Required to Open This Book as  File.

image

.epub の状態の epub の場合

Uncaught (in promise) 
Failed to Open the Book:
TypeError: Cannot read property 'Path' of undefined

image

gotchane commented 4 years ago

@satorumurmur

追記です。 デバッグ進めたところ、v1.1.3 では展開した EPUB ファイルだと、以下行で B.Type に EPUB と渡らず、空文字が渡るようになっているため、 動作しないようです。 v1.0.1 までは、 B.Type に EPUB と渡ってきているようでした。

https://github.com/satorumurmur/bibi/blob/2e5bd04be88920984ce60428fc204722ca1d807f/__src/bibi/resources/scripts/bibi.heart.js#L4681

satorumurmur commented 4 years ago

@gotchane 対応が遅くなっていてすみません。調査までありがとうございます。 なるべく早々に hotfix 的に対応したバージョンを出したいと思っています。

gotchane commented 4 years ago

@satorumurmur

ご連絡ありがとうございます。 ありがとうございます、助かります 🙇‍♂️ お待ちしています…！

satorumurmur commented 4 years ago

@gotchane お待たせしています。他の改善も合わせて v1.2.0 としてリリースしようとしているのですが、未解決の問題があってもう１週間はかかかってしまいそうです、すみません。

body[data-bibi-book] の件は、develop ブランチでは修正されていますので、必要に応じてそちらをお使いいただければ幸いです。ただし、develop では現在、固定レイアウト書籍の非同期読み込み最適化の課程で〈スライダーをドラッグして、しばらく静止してから手を離すと、そのページが読み込まれない〉という問題が生じており、解決を試みているところです。……もし固定レイアウトの公開にご利用でしたら、ちょっとおすすめしづらいですね。その場合はすみませんがもう少々お待ちください。

gotchane commented 4 years ago

@satorumurmur

ご連絡、ご対応ありがとうございます！承知いたしました！

satorumurmur commented 4 years ago

@gotchane ようやくリリースしました。長らくお待たせしました。どうかお試しくださいませ！

gotchane commented 4 years ago

@satorumurmur ありがとうございます！！ 確認させていただきます。

gotchane commented 4 years ago

@satorumurmur

連絡が遅くなり申し訳ございませんでした。 こちら、data-bibi-book の挙動修正されていること確認しました！ また AWS S3 とのクロスオリジンでのアクセスもできるようになっているようでした。 ありがとうございます！

別件なのですが、1点だけ確認させてください。 Bibi の読み込み処理の際、以下のようなblob によるデータダウンロード処理がリクエストで走っていると思うのですが、 こちらをOFFにして、通常のリクエストでデータをダウンロードするといった方法などありましたでしょうか…？ （もしなければ大丈夫です） セキュリティが厳しい環境下ですと、blob: から始まるリクエストをホワイトリストでブロックするというケースがあるようで、 こちらを回避できる方法があるか検討していまして…

blob:https://xxx.xxx.com/00000000-0000-0000-0000-000000000000
satorumurmur commented 3 years ago

返答が大変遅くなりました。

Bibi は、互換性向上・サニタイズ・機能拡張などの目的で、XHTML や CSS を再解釈・コンバートして利用する場合があります。すると、EPUB に含まれているままのファイルとは内容が変わり、ファイルとしては存在しないデータになりますが、それをブラウザに読み込ませるためにはあたかも URL を持つファイルのように扱う必要があり、それには Blob が最適だと考えています（かつて古いバージョンのビビでは data URI をつかっていたこともありました）。……というわけで、現状仕様では Blob を一切使わないようにするのはなかなか難しいです。

gotchane commented 3 years ago

@satorumurmur

ご連絡ありがとうございました。 承知しました、背景把握しましたので、こちらのissueはクローズさせていただきます！