0

私は現在、CSS でアニメーション化された画像を音楽と共に表示するスタンドアロンのスライドショー アプリに取り組んでいます。

今日まで、画像と音楽は実際の場所から直接ロードされていました。つまり、この場所とファイルは一般に公開され、誰でもアプリを使用せずに画像や曲を直接開くことができる必要がありました。これはプロトタイピングとローンチには問題ありませんでしたが、現在は盗難に対するより高度な保護が必要です。

誤解しないでほしいのですが、本当の保護がないことはわかっています。直接ダウンロードに関しては、人々に苦労を与えたいだけです。メディア ファイルに直接リンクする方法はありません。

これが私が思いついたものです:

  • 画像と曲は PHP 経由で読み込まれます。ID をパラメーターとして指定すると、PHP がその場所を検索し、見つかった場合はファイルを提供します。さらに、ファイルは、パラメーターとして指定されたノンスが有効な場合 (存在し、30 秒以内) にのみ提供されます。nonce は PHP によって生成され、$_SESSION['nonce']変数に格納されます。

    <img src="image/imageid?nonce=[[nonce]]">
    <audio><source src="song/songid?nonce=[[nonce]]"></audio>

  • 私のアプリには、次の 3 つの機能があります。

    • (string) generateNone()nonce 値を生成、セッション保存、および返すため -> リンクを生成するためにマークアップで使用
    • (bool) validateNonce()ノンスが有効かどうかを確認し、後で削除して再利用できないようにする
    • (void) initNonces()セッションからすべてのノンスを削除します。この関数は、アプリが読み込まれるたびに呼び出され (もちろん、画像や曲の提供は含まれません)、未使用の nonce が蓄積されるのを防ぎます。

問題:

理論的には、このアイデア全体が機能します。実際には、解決できない 2 つの問題に遭遇しました。

  1. ブラウザによって画像がリロードされているように見える: jQuery/JavaScript を使用して画像が変更された場合 (たとえば、「画像 1 を非表示にして画像 2 を表示」または「画像 4 を非表示にして画像 5 を表示」)、ナンスがないため、画像をロードできません。もう有効です (= すでに一度使用されています)。検証後に nonce-deletion を停止する (= nonce が再利用可能になる) と、この問題は解決しますが、これは本当の解決策ではありません。jQuery は CSS プロパティのみを変更して画像を表示および非表示にするため、この問題は問題 2 に関連している可能性があります。

  2. 画像と曲は nonceの有効期間後に読み込まれます: ブラウザーは、CSS によって最初は非表示になっている画像を、画像が表示されるようになったときにのみ読み込むようです。これは通常、帯域幅の使用量を減らすのに役立ちますが、私のシナリオでは、30 秒の nonce ライフタイムの後に画像や曲が読み込まれないようにします。ブラウザにすべてを直接ロードさせるか、少なくとも、要求された画像/曲への接続を開いて 30 秒以内に保持する方法が必要です。

質問:

本当の問題を特定するのは難しいので、ブラウザーが内部でメディアの読み込みを処理する方法を知っている人が、説明されている問題を修正する方法についてヒントをくれることを願っています. コードが必要な場合は、お知らせください。

4

1 に答える 1