Récupérer le MD5 d'un fichier client

Sans d'interraction avec le serveur, bien entendu.

Sujet résolu

14 décembre 2011 à 7:16:37

Bonjour,

Je souhaite récupérer le MD5 d'un fichier client image (.png à chaque fois), sans devoir interagir avec le serveur.
Cela ne devrait pas être compatible avec tout les navigateurs, je le consens, mais ce n'est pas grave, car c'est un plus pour le site.

Lorsque je dis "fichier client", c'est un fichier que le visiteur aura préalablement choisis via un input[type=file] :

<input id="uploadImage" type="file" onchange="loadImageFile();" />

Actuellement, via la fonction FileReader, j'ai bien réussis à récupérer le contenu du fichier image.
Voici mon code quand même :

oFReader = new FileReader(), rFilter = /^(image\/bmp|image\/cis-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x-cmu-raster|image\/x-cmx|image\/x-icon|image\/x-portable-anymap|image\/x-portable-bitmap|image\/x-portable-graymap|image\/x-portable-pixmap|image\/x-rgb|image\/x-xbitmap|image\/x-xpixmap|image\/x-xwindowdump)$/i;  
  
oFReader.onload = function (oFREvent) {  
  document.getElementById("md5").innerHTML = MD5(oFREvent.target.result);  
};  
  
function loadImageFile() {  
  if (document.getElementById("uploadImage").files.length === 0) { return; }  
  var oFile = document.getElementById("uploadImage").files[0];  
  if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }  
  oFReader.readAsText(oFile);  
}

C'est code qui n'est pas de moi, un code que j'ai récupéré sur le net, et un peu arrangé à ma sauce.

Pour la fonction MD5, j'utilise celle-ci : http://www.webtoolkit.info/javascript-md5.html

Mais là est tout le problème... ça ne me retourne pas le bon hash MD5.
J'ai même essayé plusieurs fonctions JavaScript, elles me retournent même d'autres MD5, mais jamais le bon !

J'ai quand même "débuggé" un petit mon code au cas où.

Tout d'abord, j'ai fais une page de test en PHP :

<?php
echo file_get_contents('mon_image.png');
?>

Ca m'affiche donc un code bien farfelu (pas beau, plein de caractères spéciaux, ... ^^).
Si je fais maintenant dans ma fonction JavaScript :

alert((oFREvent.target.result));

Ca me retourne exactement le même contenu que mon file_get_contents !

(enfin au début non, mais depuis, j'ai corrigé : j'ai échangé readAsDataURL en readAsBinaryString, puis, vu que c'était encode différent, en readAsText

).
Pour les intéressés, voici le début (vraiment tout début) de cette image :
http://img580.imageshack.us/img580/604 [...] 214071516.png
C'est bien ... sale, mais c'est identique à ce que me fournis mon file_get_contents.

C'est donc déjà un bon point... j'ai la même source du point de vue JavaScript ou de celui du PHP.

Maintenant, il reste ce soucis :

MD5(oFREvent.target.result)

md5(file_get_contents('2011-12-13_064351.png'))

En JavaScript ça me renvoi : 8b9798535d952724582357ad3bdce674
En PHP : 665cc228bee7728b176175a1f0808ec7 (celui-là c'est le bon, c'est sûr, car j'utilise un logiciel pour voir les hash de fichiers qui me renvoi le même)

Pour ceux qui voudrait peut être faire des tests, voici le code complet :

<!doctype html>  
<html>  
<head>  
<title>MD5 Image</title>  
<script type="text/javascript">
/**
*
*  MD5 (Message-Digest Algorithm)
*  http://www.webtoolkit.info/
*
**/
 
var MD5 = function (string) {
 
  function RotateLeft(lValue, iShiftBits) {
    return (lValue<<iShiftBits) | (lValue>>>(32-iShiftBits));
  }
 
  function AddUnsigned(lX,lY) {
    var lX4,lY4,lX8,lY8,lResult;
    lX8 = (lX & 0x80000000);
    lY8 = (lY & 0x80000000);
    lX4 = (lX & 0x40000000);
    lY4 = (lY & 0x40000000);
    lResult = (lX & 0x3FFFFFFF)+(lY & 0x3FFFFFFF);
    if (lX4 & lY4) {
      return (lResult ^ 0x80000000 ^ lX8 ^ lY8);
    }
    if (lX4 | lY4) {
      if (lResult & 0x40000000) {
        return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);
      } else {
        return (lResult ^ 0x40000000 ^ lX8 ^ lY8);
      }
    } else {
      return (lResult ^ lX8 ^ lY8);
    }
  }
 
  function F(x,y,z) { return (x & y) | ((~x) & z); }
  function G(x,y,z) { return (x & z) | (y & (~z)); }
  function H(x,y,z) { return (x ^ y ^ z); }
  function I(x,y,z) { return (y ^ (x | (~z))); }
 
  function FF(a,b,c,d,x,s,ac) {
    a = AddUnsigned(a, AddUnsigned(AddUnsigned(F(b, c, d), x), ac));
    return AddUnsigned(RotateLeft(a, s), b);
  };
 
  function GG(a,b,c,d,x,s,ac) {
    a = AddUnsigned(a, AddUnsigned(AddUnsigned(G(b, c, d), x), ac));
    return AddUnsigned(RotateLeft(a, s), b);
  };
 
  function HH(a,b,c,d,x,s,ac) {
    a = AddUnsigned(a, AddUnsigned(AddUnsigned(H(b, c, d), x), ac));
    return AddUnsigned(RotateLeft(a, s), b);
  };
 
  function II(a,b,c,d,x,s,ac) {
    a = AddUnsigned(a, AddUnsigned(AddUnsigned(I(b, c, d), x), ac));
    return AddUnsigned(RotateLeft(a, s), b);
  };
 
  function ConvertToWordArray(string) {
    var lWordCount;
    var lMessageLength = string.length;
    var lNumberOfWords_temp1=lMessageLength + 8;
    var lNumberOfWords_temp2=(lNumberOfWords_temp1-(lNumberOfWords_temp1 % 64))/64;
    var lNumberOfWords = (lNumberOfWords_temp2+1)*16;
    var lWordArray=Array(lNumberOfWords-1);
    var lBytePosition = 0;
    var lByteCount = 0;
    while ( lByteCount < lMessageLength ) {
      lWordCount = (lByteCount-(lByteCount % 4))/4;
      lBytePosition = (lByteCount % 4)*8;
      lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount)<<lBytePosition));
      lByteCount++;
    }
    lWordCount = (lByteCount-(lByteCount % 4))/4;
    lBytePosition = (lByteCount % 4)*8;
    lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80<<lBytePosition);
    lWordArray[lNumberOfWords-2] = lMessageLength<<3;
    lWordArray[lNumberOfWords-1] = lMessageLength>>>29;
    return lWordArray;
  };
 
  function WordToHex(lValue) {
    var WordToHexValue="",WordToHexValue_temp="",lByte,lCount;
    for (lCount = 0;lCount<=3;lCount++) {
      lByte = (lValue>>>(lCount*8)) & 255;
      WordToHexValue_temp = "0" + lByte.toString(16);
      WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length-2,2);
    }
    return WordToHexValue;
  };
 
  function Utf8Encode(string) {
    string = string.replace(/\r\n/g,"\n");
    var utftext = "";
 
    for (var n = 0; n < string.length; n++) {
 
      var c = string.charCodeAt(n);
 
      if (c < 128) {
        utftext += String.fromCharCode(c);
      }
      else if((c > 127) && (c < 2048)) {
        utftext += String.fromCharCode((c >> 6) | 192);
        utftext += String.fromCharCode((c & 63) | 128);
      }
      else {
        utftext += String.fromCharCode((c >> 12) | 224);
        utftext += String.fromCharCode(((c >> 6) & 63) | 128);
        utftext += String.fromCharCode((c & 63) | 128);
      }
 
    }
 
    return utftext;
  };
 
  var x=Array();
  var k,AA,BB,CC,DD,a,b,c,d;
  var S11=7, S12=12, S13=17, S14=22;
  var S21=5, S22=9 , S23=14, S24=20;
  var S31=4, S32=11, S33=16, S34=23;
  var S41=6, S42=10, S43=15, S44=21;
 
  string = Utf8Encode(string);
 
  x = ConvertToWordArray(string);
 
  a = 0x67452301; b = 0xEFCDAB89; c = 0x98BADCFE; d = 0x10325476;
 
  for (k=0;k<x.length;k+=16) {
    AA=a; BB=b; CC=c; DD=d;
    a=FF(a,b,c,d,x[k+0], S11,0xD76AA478);
    d=FF(d,a,b,c,x[k+1], S12,0xE8C7B756);
    c=FF(c,d,a,b,x[k+2], S13,0x242070DB);
    b=FF(b,c,d,a,x[k+3], S14,0xC1BDCEEE);
    a=FF(a,b,c,d,x[k+4], S11,0xF57C0FAF);
    d=FF(d,a,b,c,x[k+5], S12,0x4787C62A);
    c=FF(c,d,a,b,x[k+6], S13,0xA8304613);
    b=FF(b,c,d,a,x[k+7], S14,0xFD469501);
    a=FF(a,b,c,d,x[k+8], S11,0x698098D8);
    d=FF(d,a,b,c,x[k+9], S12,0x8B44F7AF);
    c=FF(c,d,a,b,x[k+10],S13,0xFFFF5BB1);
    b=FF(b,c,d,a,x[k+11],S14,0x895CD7BE);
    a=FF(a,b,c,d,x[k+12],S11,0x6B901122);
    d=FF(d,a,b,c,x[k+13],S12,0xFD987193);
    c=FF(c,d,a,b,x[k+14],S13,0xA679438E);
    b=FF(b,c,d,a,x[k+15],S14,0x49B40821);
    a=GG(a,b,c,d,x[k+1], S21,0xF61E2562);
    d=GG(d,a,b,c,x[k+6], S22,0xC040B340);
    c=GG(c,d,a,b,x[k+11],S23,0x265E5A51);
    b=GG(b,c,d,a,x[k+0], S24,0xE9B6C7AA);
    a=GG(a,b,c,d,x[k+5], S21,0xD62F105D);
    d=GG(d,a,b,c,x[k+10],S22,0x2441453);
    c=GG(c,d,a,b,x[k+15],S23,0xD8A1E681);
    b=GG(b,c,d,a,x[k+4], S24,0xE7D3FBC8);
    a=GG(a,b,c,d,x[k+9], S21,0x21E1CDE6);
    d=GG(d,a,b,c,x[k+14],S22,0xC33707D6);
    c=GG(c,d,a,b,x[k+3], S23,0xF4D50D87);
    b=GG(b,c,d,a,x[k+8], S24,0x455A14ED);
    a=GG(a,b,c,d,x[k+13],S21,0xA9E3E905);
    d=GG(d,a,b,c,x[k+2], S22,0xFCEFA3F8);
    c=GG(c,d,a,b,x[k+7], S23,0x676F02D9);
    b=GG(b,c,d,a,x[k+12],S24,0x8D2A4C8A);
    a=HH(a,b,c,d,x[k+5], S31,0xFFFA3942);
    d=HH(d,a,b,c,x[k+8], S32,0x8771F681);
    c=HH(c,d,a,b,x[k+11],S33,0x6D9D6122);
    b=HH(b,c,d,a,x[k+14],S34,0xFDE5380C);
    a=HH(a,b,c,d,x[k+1], S31,0xA4BEEA44);
    d=HH(d,a,b,c,x[k+4], S32,0x4BDECFA9);
    c=HH(c,d,a,b,x[k+7], S33,0xF6BB4B60);
    b=HH(b,c,d,a,x[k+10],S34,0xBEBFBC70);
    a=HH(a,b,c,d,x[k+13],S31,0x289B7EC6);
    d=HH(d,a,b,c,x[k+0], S32,0xEAA127FA);
    c=HH(c,d,a,b,x[k+3], S33,0xD4EF3085);
    b=HH(b,c,d,a,x[k+6], S34,0x4881D05);
    a=HH(a,b,c,d,x[k+9], S31,0xD9D4D039);
    d=HH(d,a,b,c,x[k+12],S32,0xE6DB99E5);
    c=HH(c,d,a,b,x[k+15],S33,0x1FA27CF8);
    b=HH(b,c,d,a,x[k+2], S34,0xC4AC5665);
    a=II(a,b,c,d,x[k+0], S41,0xF4292244);
    d=II(d,a,b,c,x[k+7], S42,0x432AFF97);
    c=II(c,d,a,b,x[k+14],S43,0xAB9423A7);
    b=II(b,c,d,a,x[k+5], S44,0xFC93A039);
    a=II(a,b,c,d,x[k+12],S41,0x655B59C3);
    d=II(d,a,b,c,x[k+3], S42,0x8F0CCC92);
    c=II(c,d,a,b,x[k+10],S43,0xFFEFF47D);
    b=II(b,c,d,a,x[k+1], S44,0x85845DD1);
    a=II(a,b,c,d,x[k+8], S41,0x6FA87E4F);
    d=II(d,a,b,c,x[k+15],S42,0xFE2CE6E0);
    c=II(c,d,a,b,x[k+6], S43,0xA3014314);
    b=II(b,c,d,a,x[k+13],S44,0x4E0811A1);
    a=II(a,b,c,d,x[k+4], S41,0xF7537E82);
    d=II(d,a,b,c,x[k+11],S42,0xBD3AF235);
    c=II(c,d,a,b,x[k+2], S43,0x2AD7D2BB);
    b=II(b,c,d,a,x[k+9], S44,0xEB86D391);
    a=AddUnsigned(a,AA);
    b=AddUnsigned(b,BB);
    c=AddUnsigned(c,CC);
    d=AddUnsigned(d,DD);
  }
 
  var temp = WordToHex(a)+WordToHex(b)+WordToHex(c)+WordToHex(d);
 
  return temp.toLowerCase();
}

oFReader = new FileReader(), rFilter = /^(image\/bmp|image\/cis-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x-cmu-raster|image\/x-cmx|image\/x-icon|image\/x-portable-anymap|image\/x-portable-bitmap|image\/x-portable-graymap|image\/x-portable-pixmap|image\/x-rgb|image\/x-xbitmap|image\/x-xpixmap|image\/x-xwindowdump)$/i;  
  
oFReader.onload = function (oFREvent) {  
  document.getElementById("md5").innerHTML = MD5(oFREvent.target.result);  
};  
  
function loadImageFile() {  
  if (document.getElementById("uploadImage").files.length === 0) { return; }  
  var oFile = document.getElementById("uploadImage").files[0];  
  if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }  
  oFReader.readAsText(oFile);  
}  
</script>  
</head>  
  
<body onload="loadImageFile();" id="body">  

<input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" />
<p id="md5"></p>

</body>  
</html>

C'est peut être pas bien propre, mais là ce qui m'intéresse, c'est juste le fonctionnement. Donc...

Si quelqu'un pourrait donc me donner un petit coup de main, ça sera pas mal.
A mon avis, ça doit être un soucis d'encodage, où quelque chose de ce genre. Non ?

Merci d'avance,
Cordialement,
Aurélien.

Golmote

14 décembre 2011 à 7:46:00

Et si, plutôt que de jouer avec une image, tu commençais plutôt par un fichier texte brut, contenant un simple mot, sans accent.

Vois ensuite ce qui se passe si tu ajoutes des caractères spéciaux. Ainsi, on verra si l'encodage a un rôle à jouer.

CowBoySD

14 décembre 2011 à 12:31:54

Merci de ta réponse.
Comme tu me l'a suggéré, j'ai fais quelques tests.

Je crée un txt, et je met du texte, même des caractères spéciaux, et tout marche.
Mais je prends un ancien txt, et je trouve pas le même MD5.

Je copie exactement le même contenu dans le nouveau txt.
Avec le nouveau txt, ça marche. Mais avec l'ancien, ça ne marche pas.

J'ai alors regardé qu'est-ce qu'y pouvait différencier :
-> Nouveau txt : en UNIX
-> Ancien : en Windows/DOS
-> Image : en Windows/DOS

Je suis en train de chercher une solution sur Google, mais je trouve rien... :euh:

EDIT : J'ai bien essayé de faire un :

oFReader.onload = function (oFREvent) {  
  var string = (oFREvent.target.result);
  string = string.replace("\r\n", "\n");
  //string = string.replace("\n\r", "\n");
  document.getElementById("md5").innerHTML = MD5(string);
};

Mais ça ne change rien au MD5, malgré que ça change bien niveau de la variable "string" (j'ai testé en remplaçant par des lettres).
Je sais pas trop quoi faire là... :euh:

xavierm02

14 décembre 2011 à 15:33:22

Les encodages que t'as donne c'est les sauts de ligne et osef.
Normalement, t'as un iso ou utf...

CowBoySD

14 décembre 2011 à 18:33:45

Là ce n'est pas l'encodage (UTF8, ISO, ...).
Je ne sais pas comment ça s'appelle, mais c'est UNIX/Windows DOS.

Et de ce que j'ai vu sur internet, la différence entre les formats Unix et Windows DOS, c'est que pour les sauts de ligne, Unix utilise \n, et Windows DOS utilise \r\n.
J'ai même d'ailleurs testé ce code en PHP.

J'ouvre en file_get_contents l'image en Windows DOS. Je remplace les \r\n par des \n.
J'enregistre le tout dans un nouveau fichier (je crée donc une image).
Et lorsque je regarde la source de cette image sous Notepad++, je suis bien passé en Unix.
Donc il y a bien que les sauts de lignes qui change.

Après, ça va peut être être différent selon Windows/Linux/Mac... mais bon, on verra ça après.
Pour le moment, je souhaite récupérer le hash d'un fichier Windows DOS.

Merci,
Aurélien

xavierm02

14 décembre 2011 à 19:37:17

Quand tu lis le fichier, il faut que tu mettes l'encodage quelquepart... sinon ca prend celui par defaut et ca ne marche potentiellement que pour les caracteres "simples".

CowBoySD

15 décembre 2011 à 9:24:54

Bonjour,

Les fichiers / images sont toujours en UTF-8 pour mon cas, et readAsText lit par défaut l'UTF-8.
Sinon, il faut lui préciser l'encodage en deuxième paramètre.

Personne n'aurait une idée pour faire ça juste en JavaScript ? :/
Je sais que je pourrai très bien faire la même chose en PHP, ça serait vachement plus simple, mais niveau performance, ça utilise le serveur...
Si il y a plus de 1000 demandes par jour (ce qui devrait largement être le cas!), le serveur risque de ne pas trop aimé à force ^^.

Alors que je suis sûr que faire la même chose en JavaScript, ça doit être possible.

Et là j'arrive à un stade où je sèche vraiment... j'ai essayé un tas de choses (on ne peut pas dire que je suis venu demander de l'aide sans rien avoir foutu avant ? ^^).
Alors si quelqu'un voudrait bien m'aider, ça serait vraiment bien sympa...

Merci,
@++
Aurélien

xavierm02

15 décembre 2011 à 12:21:20

T'es sur que PHP et js sont tous tout en utf-8 ?

CowBoySD

15 décembre 2011 à 18:08:02

Je comprends pas ta question... :/
Les fichiers que j'inclus sont en UTF-8.

Golmote

15 décembre 2011 à 19:36:57

Tu compares tes résultats JS avec md5_file ?

EDIT : C'est rigolo comme expérience. En testant avec des fichiers texte, je constate que :

Avec un passage à la ligne CR, ça fonctionne.
Avec un LF, ça fonctionne.
Avec un CRLF, ça plante.

Lol. \o/

CowBoySD

15 décembre 2011 à 20:12:25

En php, md5() et md5_file() retourne la même chose.
En JavaScript, j'utilise quoi comme fonction md5_file() ? Car sur phpjs.org cette fonction utilise un file_get_contents, non compatible avec les fichiers clients.

Golmote

15 décembre 2011 à 21:27:14

En utilisant cette implémentation MD5, ce code :

function bin2hex (s){
    // Converts the binary representation of data to hex  
    // 
    // version: 909.322
    // discuss at: http://phpjs.org/functions/bin2hex
    // +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   bugfixed by: Onno Marsman
    // +   bugfixed by: Linuxworld
    // *     example 1: bin2hex('Kev');
    // *     returns 1: '4b6576'
    // *     example 2: bin2hex(String.fromCharCode(0x00));
    // *     returns 2: '00'
    var i, f = 0, a = [];
    
    s += '';
    f = s.length;
    
    for (i = 0; i<f; i++) {
        a[i] = s.charCodeAt(i).toString(16).replace(/^([\da-f])$/,"0$1");
    }
    
    return a.join('');
}

et en faisant :

bin2hex(rstr_md5(oFREvent.target.result))

J'obtiens le résultat escompté, même avec des images.

(En utilisant oFReader.readAsBinaryString(oFile);)

Tiré de http://www.bruechner.de/md5file/js/

CowBoySD

15 décembre 2011 à 22:11:02

Merci beaucoup Golmote !

Ca à l'air de fonctionner correctement.

Je ferai plus de tests ce weekend, et je te retiendrai au courant.

Mais pour les moments, mes premiers tests avec fichier/images en unix/windows dos fonctionnent impeccable.

Merci pour ton aide.

@++
Aurélien

Golmote

15 décembre 2011 à 22:25:30

Pense à mettre ton sujet en résolu à l'aide du bouton approprié

CowBoySD

16 décembre 2011 à 6:59:36

Oui oui, mais j'attendais pouvoir continuer mes tests.

Une petite question supplémentaire.

Mon code est compatible avec quoi ?

oFReader = new FileReader(), rFilter = /^(image\/jpeg|image\/png)$/i;
oFReader.onload = function (oFREvent)
{
	document.getElementById("md5").innerHTML = bin2hex(rstr_md5(oFREvent.target.result));
};
function loadImageFile()
{
	if (document.getElementById("uploadImage").files.length === 0) { return; }
	var oFile = document.getElementById("uploadImage").files[0];
	if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
	oFReader.readAsBinaryString(oFile);
}

Seulement avec les dernières versions de FF ?
(même IE9 ça ne fonctionne pas, et pas encore testé sous Chrome/Opéra)

Si je rajoute une alternative avec :

dataTransfer.files[0]

Ce sera surement compatible avec plus de navigateurs non ?

Connaitrais-tu par hasard encore une autre alternative que celle-ci, permettant ainsi de rendre ce code accessible à encore plus de personnes ?

Bonne journée,
@++
Aurélien

Golmote

16 décembre 2011 à 8:17:41

Euh...

dataTransfer c'est pour faire du drag'n'drop de fichiers. C'est intéressant, mais je ne crois pas que ce soit le but de ton code.

Ton code fonctionnera dans les dernières versions de FF, Chrome, Opera et Safari (quoique j'arrive pas à le faire fonctionner dans Safari Windows... m'enfin).

Pour IE9, il est possible que FileReader soit pas encore dispo. Auquel cas, faut voir si l'activeX Scripting.FileSystemObject est capable de lire des contenus binaires.

Je te laisse faire les recherches Google appropriées.

CowBoySD

16 décembre 2011 à 18:38:42

D'accord, merci pour tout.
Je verrai ce weekend du côté de Scripting.FileSystemObject, sinon ben je laisserai ainsi.

Édition :
Ca fonctionne parfaitement.

Merci pour tout.
Je met en résolu.