Chargement d'images et de chansons avec nonce

Question

Je travaille actuellement sur une application de diaporama autonome, qui montre des images animées CSS avec de la musique. Jusqu'à présent, les images et la musique étaient chargées directement à partir de leur emplacement réel - ce qui signifiait que cet emplacement et les fichiers devaient être complètement accessibles au public et que tout le monde pouvait ouvrir des images et des chansons directement sans utiliser mon application. C'était bien pour le prototypage et le lancement - mais maintenant il y a besoin d'une protection plus avancée contre le vol. Ne vous méprenez pas: Je sais, qu'il n'y a pas de vraie protection. Je veux juste donner aux gens un moment difficile quand il s'agit de téléchargement direct. Il ne devrait y avoir aucun moyen de lier directement à un fichier multimédia.

Voici ce que je suis venu avec:

• images et chansons sont chargées par PHP - vous spécifiez l'identifiant comme paramètre, PHP recherche l'emplacement et sert le fichier, se trouve. De plus, le fichier n'est servi que si le nonce fourni en paramètre est valide (existe et ne dépasse pas 30 secondes). Le nonce est généré par PHP et stocké dans la variable $_SESSION['nonce'].

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

• Dans mon application, j'ai trois fonctions:

  • (string) generateNone() pour générer, la session d'économie et de retourner une valeur nonce -> utilisé dans le balisage pour générer la liens
  • (bool) validateNonce() pour vérifier si un nonce est valide et le supprimer ensuite afin qu'il ne puisse pas être réutilisé
  • (void) initNonces() pour la suppression de tous les fichiers non de la session. Cette fonction est appelée chaque fois que l'application se charge (sans inclure l'image et le service de chanson bien sûr) pour éviter l'accumulation de nonces inutilisées.

---

Le problème:

Théoriquement toute cette idée fonctionne. Pratiquement, j'ai rencontré deux problèmes que je ne peux pas résoudre:

1. Les images semblent être rechargées par le navigateur: Lorsque les images sont modifiées à l'aide jQuery/JavaScript (par exemple « cacher l'image 1, montrer l'image 2 » ou « cacher image 4, montrez l'image 5 "), les images ne sont pas chargeables puisque le nonce n'est plus valide (= était déjà utilisé une fois). L'arrêt de nonce-deletion après vérification (= nonce est réutilisable) résout ce problème, mais ce n'est pas une vraie solution. Ce problème peut être lié au problème 2, car jQuery ne modifie que les propriétés CSS pour afficher et masquer les images.

2. Les images et les morceaux sont chargés après la durée de vie de nonce: Le navigateur semble charger les images initialement masquées par CSS uniquement lorsque l'image est visible. Bien que ce soit généralement utile pour réduire l'utilisation de la bande passante, dans mon scénario, il empêche le chargement des images et des chansons après une durée de vie de 30 secondes.J'ai besoin d'un moyen pour que le navigateur charge tout directement ou, au moins, ouvre et maintienne une connexion à l'image/chanson demandée dans les 30 secondes.

La question:

Il est difficile d'identifier le vrai problème, donc j'espère que quelqu'un qui sait comment les navigateurs interne processus de chargement des médias peuvent me donner un indice sur la façon de résoudre les problèmes décrits. Au cas où vous auriez besoin de code, faites le moi savoir.

Answer 1

Je suis désolé pour poser et de répondre à quelques minutes plus tard - mais je trouve la solution après des heures de recherche et je pense qu'il pourrait être utile pour quelqu'un qui vient des problèmes similaires:

J'utilisais jQuery clone()/remove() pour redémarrer l'animation CSS des images. Ce que je ne savais pas, c'est que non seulement cela a dupliqué l'élément, mais aussi rechargé tous les médias en son sein comme c'était le cas dans le balisage HTML d'origine. L'image était donc en train d'être rechargée, provoquant le problème car le nonce était déjà utilisé.