Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Atteint de JavaScriptite Aiguë [Cyril Durand]

Expert ASP.net Ajax et WCF, Cyril Durand parle dans son blog de point techniques sur ASP.net, ASP.net Ajax, JavaScript, WCF et .net en général. Cyril est également consultant indépendant, n'hésitez pas à le contacter pour de l'assistance sur vos projets

Actualités

  • Blog de Cyril DURAND, passionné de JavaScript, Ajax, ASP.net et tout ce qui touche au developpement Web Client-Side.

    N'hésitez pas à me contacter pour vos projets .net : architecture, accompagnement, formation, ...

    View Cyril Durand's profile on LinkedIn
    hit counters


    Expertise Commerce server et BizTalk

Compression et obfuscation des fichiers JavaScript avec Atlas

Lorsque j'avais examiné les fichiers JavaScript de Microsoft Ajax Extensions beta 1 une question m'était venue à l'esprit.

La plupart des méthodes sont écrites de la sorte :

Sys.Serialization.JavaScriptSerializer.serialize = function Sys$Serialization$JavaScriptSerializer$serialize(object) { // doSomething }

Je pense que la plupart des développeurs non JavaScript ne voient pas le soucis, en fait cette ligne déclare une méthode dans deux variables (Sys.Serialization.JavaScriptSerializer.serialize et Sys$Serialization$JavaScriptSerializer$serialize) !!! La question que je me suis posé est pourquoi dans deux variables plutôt qu'une ? Cela a une conséquence non négligeable puisque cela grossis le fichier JavaScript inutilement ! Le nom de la variable est répété deux fois alors qu'une seule aurait largement suffit !

J'ai donc cherché et la première idée qui m'est venu est pour des raisons de perf, en effet à cause du late binding de JavaScript la méthode Sys$Serialization$JavaScriptSerializer$serialize serait plus rapide que la méthode rangé dans des namespaces ? Malheureusement les méthodes avec des $ ne sont jamais utilisées ! Ces méthodes sont donc complètement inutiles !

Je vois alors deux autres solutions :

  1. C'est une nécessité pour Orcas et son IntelliSens;
  2. C'est utile pour un outil de prétraitement des fichiers JavaScript.

J'en ai parlé avec Aurélien qui lui non plus ne savait pas quelle était l'utilité de ces méthodes.

Je pense avoir découvert aujourd'hui le pourquoi ! Prenons par exemple la méthode Date._parse (exemple pris au hasard ;-))

Date._parse = function Date$_parse(value, cultureInfo, args) { var custom = false; for (var i = 1, il = args.length; i < il; i++) { var format = argsIdea; if (format) { custom = true; var date = Date._parseExact(value, format, cultureInfo); if (date) return date; } } if (! custom) { var formats = cultureInfo._getDateTimeFormats(); for (var i = 0, il = formats.length; i < il; i++) { var date = Date._parseExact(value, formatsIdea, cultureInfo); if (date) return date; } } throw Error.format(Sys.Res.formatBadDate); }

Comparons cette méthode avec la méthode présente dans la version release du script c'est à dire la version compressé qui est envoyé au client :

Date._parse=function(g,c,h){var e=false;for(var a=1,i=h.length;a<i;a++){var f=hAngel;if(f){e=true;var b=Date._parseExact(g,f,c);if(b)return b}}if(!e){var d=c._getDateTimeFormats();for(var a=0,i=d.length;a<i;a++){var b=Date._parseExact(g,dAngel,c);if(b)return b}}throw Error.format(Sys.Res.formatBadDate)};

Si on déplie tout ça cela nous donne :

Date._parse=function(g,c,h){ var e=false; for(var a=1,i=h.length;a<i;a++){ var f=hAngel; if(f){ e=true; var b=Date._parseExact(g,f,c); if(b)return b } } if(!e){ var d=c._getDateTimeFormats(); for(var a=0,i=d.length;a<i;a++){ var b=Date._parseExact(g,dAngel,c); if(b)return b } } throw Error.format(Sys.Res.formatBadDate) };

En plus d'avoir supprimé les espaces inutiles, l'équipe Atlas à surtout réussit à renommer toutes les variables avec des noms incompréhensible !!! L'avantage immédiat est que le fichier JavaScript est beaucoup plus léger et surtout le script JavaScript devient incompréhensible c'est donc une première approche pour protéger son code JavaScript !

Autre exemple : lorsque l'on construit un type, le code ressemblait à :

Sys._ScriptLoader = function Sys$_ScriptLoader() { // constructor } function Sys$_ScriptLoader$dispose() { // some Code } Sys._ScriptLoader.prototype = { dispose: Sys$_ScriptLoader$dispose, // ... }

Là encore il y a l'utilisation inutile d'une variable, en release ce code se transforme en :

Sys._ScriptLoader = function() { // constructor } Sys._ScriptLoader.prototype = { dispose:function Sys$_ScriptLoader$dispose() { // some Code }, // ... }

C'est donc un excellent travail de la part de Microsoft que je viens de découvrir !

J'espère vraiment que l'outil qu'ils ont utilisé pour compresser le code JavaScript sera disponible pour tous ! Le besoin d'un outil qui compresse et rend illisible le code JavaScript va devenir de plus en plus fort suite à l'engouement pour les applications Ajax (Web 2.0 oblige ...).

Cet outil sera t'il intégré à Orcas ? Sera t'il disponible avant ? En tout cas j'espère qu'il le sera très bientôt, puisque je vais en avoir besoin d'ici quelques mois ...

Posted: lundi 18 décembre 2006 00:44 par cyril
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

badrbadr a dit :

J'aurais besoin d'une petite explication

À quoi ça sert d'obfusquer Date.Parse alors que le développeur (toi par exemple) possède son code? j'imagine que tout le monde qui télécharge Atlas possède le code en clair? corrige moi si je me trompe.

Merci :)

# décembre 18, 2006 04:11

FREMYCOMPANY a dit :

Pour date.parse c'est inutile, mais pour les codes que tu crée toi-même, c'est utile !

Je vois une deuxième utilité qui n'a pas été envisagée ici...

Dans la pile (callStack) les fonctions sont données par nom :

exemple :

function x() {

   y();

}

function y() {

   debugger;

}

callStack :

-- y (line xx)

-- x (line xx)

Si on avait écrit :

x=function() { y(); }

y=function() { debugger; }

callStack :

anonymous (line xx)

anonymous (line xx)

==&gt; C'est moins clair !

Ici c'est pareil

avec le nom Sys$Date$Parse

la callStack renvoie qqchose d'identifiable plus vite : gain de temps pour le developpeur

# décembre 18, 2006 09:16

cyril a dit :

badrbadr &gt; Dans le cas d'Atlas il est inutile d'obfusquer le code puisqu'effectivement tout le monde y a accés. Mais par exemple je suis en train de bosser sur un gros projet en JavaScript (plusieurs milliers de lignes) et j'aimerais qu'on ne me pique pas le code ni qu'on le modifie, "l'obfuscation" m'est donc super utile ... :-)

FremyCompany &gt; Je suis pas sur du tout de ce que tu avances puisque les méthodes avec des $ ne sont jamais utilisés, dans le debugger de VS il ne me semble pas qu'il donne le nom de ces méthodes ...

# décembre 18, 2006 12:39

FREMYCOMPANY a dit :

Le fait que cette méthode soit utilise ou pas n'importe pas...

En fait, si tu as le code suivant :

function x() {}

et que tu fais alert(x.name) tu verras s'afficher ceci "x".

Evidemment, VS converti les "$" en "." et tu n'y vois que du veux dans la pille d'appel donnée par VS...

Essaie sur FireFox + FireBug + breakOnError pour voir ;)

Date.test = function Date$Test() { throw ""; }

Date.test2 = function () { throw ""; }

Date.test(); Date.test2();

# décembre 18, 2006 13:16
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01