search

diffshare / imgs

imgs is Secure Image Upload/Viewer used end-to-end encryption on Cloud Storage(e.g. Firebase Storage).
0 stars 1 forks source link

アルバム名が日本語の場合にアルバムが開けない #83

Open cat-in-136 opened 1 year ago

cat-in-136 commented 1 year ago

Angular版で作った日本語のアルバム名のページをNext.js版で表示しても写真が読み込まれない

また、ブラウザコンソールでは https://…/filelist の XHR で 404 Not Found の応答が得られたとのエラーメッセージが確認されました。

filelist の URL では 錬成 → %E9%8C%AC%E6%88%90 のように URI escape された文字列が含まれるべきですが、 %25E9%258C%25AC%25E6%2588%2590 のようになっていました。

再現手順

  1. 問題が発生する特定のアルバムを開きます。

期待する動作

システム情報

cat-in-136 commented 1 year ago

filelist の URL では 錬成 → %E9%8C%AC%E6%88%90 のように URI escape された文字列が含まれるべきですが、 %25E9%258C%25AC%25E6%2588%2590 のようになっていました。

おそらくで2回 encodeURI をしていると思われる。( encodeURI("%") は %25 を戻す )

diffshare commented 1 year ago

問題の原因は、アルバム名として使われている日本語の文字列が二重にURIエスケープされていることにあります。具体的には、「錬成」が %E9%8C%AC%E6%88%90 として1回エスケープされるべき場所で、%25E9%258C%25AC%25E6%2588%2590 として2回エスケープされています。

以下のアクションを取って問題を解決してください：

  1. loadFileList, loadImage, putImage, putFileList, などの関数の中でURIエスケープが二重になっている部分をチェックしてください。これらの関数は外部のfirebaseライブラリからインポートされていますが、どのように実装されているのか具体的には分からないので、その実装を確認する必要があります。

  2. JavaScriptのencodeURIComponentやencodeURIなどの関数を使用してURIエスケープを行う場合、これらの関数が何度も呼び出されていないかを確認してください。

  3. サーバーサイドの処理も確認してください。クライアントサイドだけでなく、サーバーサイドでの不要なエスケープ処理が行われている場合も同じ問題が発生する可能性があります。

  4. エスケープの問題を解決した後、ブラウザのコンソールを再度チェックして、404 Not Foundのエラーが解消されたか確認してください。

  5. 必要に応じて、問題の原因となっている部分を修正し、再テストしてください。

  6. また、関連するエンドポイントや関数が他にもある場合、それらにも同じ問題が発生していないか確認してください。

以上のステップを踏むことで、URIエスケープの問題を解決することができるはずです。