Est-il possible de mettre des données d’image binary dans le balisage HTML et d’obtenir l’image affichée comme d’habitude dans n’importe quel navigateur?

C’est un problème de sécurité important et je suis sûr que cela devrait être possible.

Un exemple simple:

Vous gérez un portail de communauté. Les utilisateurs sont enregistrés et téléchargent leurs photos. Votre application donne des règles de sécurité chaque fois qu’une image est autorisée à être affichée. Par exemple, les utilisateurs doivent être des amis de chaque côté du système, afin que vous puissiez voir les images téléchargées de quelqu’un d’autre.

Voici le problème: il est possible que quelqu’un explore les répertoires d’image de votre serveur. Mais vous voulez protéger vos utilisateurs contre de telles attaques.

S’il est possible de placer les données binarys d’une image directement dans le balisage HTML, vous pouvez restreindre l’access utilisateur de vos répertoires d’images à l’utilisateur et regrouper les exécutions d’applications Web et transmettre les données d’image directement à votre utilisateur et à votre groupe Apache. le HTML.

La seule faiblesse possible est alors le mot de passe de l’utilisateur sous lequel s’exécute votre application Web.

Y a-t-il déjà une possibilité?

Il existe d’autres méthodes (meilleures), décrites dans d’autres réponses, pour sécuriser vos fichiers, mais oui, il est possible d’intégrer l’image dans votre fichier HTML.

Utilisez la cette façon:

  

Où la partie xxxxx... est un encodage base64 des données d’image gif.

Si j’avais besoin de sécurité sur mon répertoire d’images, je n’exposerais pas le répertoire. Au lieu de cela, mes atsortingbuts img src feraient référence à une page qui prendrait un identifiant d’utilisateur et un identifiant d’image en tant que paramètre.

La page validerait que cet utilisateur avait effectivement access à cette image. Si tout va bien, renvoyez le binary. Sinon, ne rien envoyer.

par exemple:

  

De plus, je n’utiliserais pas d’ID devinables. Au lieu de coller à quelque chose comme la base 64 encodé guid.

Je ne suis pas sûr de comprendre, mais voilà. Au lieu de servir des images statiques qui résident dans un dossier d’images, pourquoi, en utilisant la technologie côté serveur de votre choix, ne pourriez-vous pas envoyer dynamicment les images au client? De cette façon, votre code côté serveur peut entrer dans le mix et autoriser ou refuser l’access par programmation?

 
		      	

Avec HTML5, vous pouvez utiliser la balise canvas et JavaScript pour ce faire.

Vous pourriez peut-être faire quelque chose avec CSS ou une disposition de tableau pour dessiner une image (probablement très mauvaise performance, résolution, portabilité).

Quoi qu’il en soit, rien n’empêche les gens de prendre vos photos. Ils pourraient prendre une capture d’écran et la rogner.

Comme Chris l’a mentionné dans sa réponse, il est important d’avoir de longues images d’identification pour que l’adresse URL de chaque image ne soit pas facile à deviner ou que la force brutale soit importante. Et aucune liste de répertoires sur vos répertoires de serveur Web n’est également.

Vous pouvez déplacer les images de la racine du document dans un répertoire privé et les transmettre via votre application, qui a access à ce répertoire. Chaque fois que votre application génère une balise d’image, elle génère également un jeton de sécurité à durée de vie courte qui doit être spécifié lors de l’access à une image particulière:

  

Les chances sont très rares que quelqu’un brute le bon jeton au bon moment avec la bonne image. Il y a au moins des possibilités de vérifier le jeton dans “getImage”:

  1. Suivez tous les tags d’image dans votre application et stockez les enregistrements dans une firebase database qui relie les jetons générés de manière aléatoire et les ID d’image aux utilisateurs demandeurs. L’action “getImage” vérifie ensuite les parameters fournis par rapport à cette firebase database.
  2. Générez le jeton en tant que sum de contrôle (MD5, CRC, etc.) sur l’ID utilisateur, l’ID de l’image et peut-être le jour en cours de l’année, et veillez à mélanger un sel non identifiable. L’action “getImage” recalcule alors la sum de contrôle et la compare à celle spécifiée afin de vérifier l’access de l’utilisateur. Cette méthode produira moins de frais généraux que le premier.

Exemple PHP:

 $token = md5($_SESSION['user_id'].' '.$imageID.' '.$SECRET_SALT.' '.date('z'));