fonction encapsulée dans des parenthèses ?

Version imprimable

Bonjour,

Il y a une syntaxe javascript que j'ai un peu de mal à comprendre, et qu'on retrouve par exemple dans le code de suivi asynchrone de Google Analytics :
Code:

1 2 3 4 5 6 7 8 9 10 var _gaq=_gaq || []; _gaq.push(['_trackPageview]); (function() { console.log("analytics asynchrone function"); var ga=document.createElement('script'); ga.type=text/javascript'; ga.async=true; ga.src=('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s=document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
Il y a déclaration d'une fonction sans nom, encapsulées dans des parenthèses. Le code contenu à l'intérieur de la fonction est exécuté au chargement de la page (avant le DOM Ready).

Pourquoi dans ce cas, ne pas avoir écrit simplement :
Code:

1 2 3 4 5 6 7 8 var _gaq=_gaq || []; _gaq.push(['_trackPageview]); console.log("analytics asynchrone function"); var ga=document.createElement('script'); ga.type=text/javascript'; ga.async=true; ga.src=('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s=document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
?

Merci

09/02/2011, 23h14
NoSmoking

Bonsoir,
j'ai retrouvé le lien sur Les fonctions anonymes, sur ce site même.
Tout l'article, depuis le début, devrait répondre à toutes tes questions
10/02/2011, 09h46
RomainVALERI

C'est vraisemblablement pour limiter la portée des variables utilisées et éviter d'éventuelles "collisions" avec les autres scripts de la page ^^
10/02/2011, 10h49
Willpower

Citation:

Envoyé par RomainVALERI

C'est vraisemblablement pour limiter la portée des variables utilisées et éviter d'éventuelles "collisions" avec les autres scripts de la page ^^

Effectivement la seule différence entre les 2 exemples c'est que dans le premier les variables ga et s n'existent plus une fois l'exécution la fonction finie. Et dans le cas où il existait déjà des variables de ce nom, elles ne sont pas écrasées.

Perso je commence tjs mes fichiers js par " (function(){" et les fini tjs par "})()"
10/02/2011, 13h20
RomainVALERI

Citation:

Envoyé par Willpower

Perso je commence tjs mes fichiers js par " (function(){" et les fini tjs par "})()"

Je ne l'ai jamais ni fait ni même envisagé mais je trouve le concept très bon, je crois que je vais m'y mettre :)
10/02/2011, 14h28
Bovino

Les choses qui vont sans dire allant toujours mieux en les disant, autant préciser que cette méthode implique de placer ses scripts en fin de page, juste avant la balise </body> et non pas dans le head ;)

Citation:

Envoyé par Bovino

Les choses qui vont sans dire allant toujours mieux en les disant, autant préciser que cette méthode implique de placer ses scripts en fin de page, juste avant la balise </body> et non pas dans le head ;)

on peut également prévoir que tout ne sera prêt et le traiter, exemple
Code:

1 2 3 4 5 6 7 8 9 10 11 12 (function(){ function init(){ var oDiv = document.getElementById('the_div'); if( oDiv){ oDiv.innerHTML = 'document chargé'; } else{ addEvent( window, "load", init, false); } } init(); })();
l'avantage pour l'utilisateur est qu'il n'a pas à ce préoccuper de l'endroit ou il inclus le script.

10/02/2011, 23h36
Galdon

Merci pour vos réposnes.

Citation:

Envoyé par Bovino

Les choses qui vont sans dire allant toujours mieux en les disant, autant préciser que cette méthode implique de placer ses scripts en fin de page, juste avant la balise </body> et non pas dans le head ;)

Je ne comprend pas, pourquoi faudrait il forcément placer les JS en bas de la page et pas dans le head quand on utilise cette technique de fonction anonyme/namespace ?

Soit le code est indépendant du DOM, et on l'exécute le plus tôt possible (déclaration de fonction, de tableaux, d'objets, initialisations diverses...), soit on a besoin du DOM et dans ce cas en encapsule le code dans une fonction genre jQuery(document).ready(), non ?
11/02/2011, 10h26
Willpower

Citation:

Envoyé par Galdon

Merci pour vos réposnes.

Je ne comprend pas, pourquoi faudrait il forcément placer les JS en bas de la page et pas dans le head quand on utilise cette technique de fonction anonyme/namespace ?

Soit le code est indépendant du DOM, et on l'exécute le plus tôt possible (déclaration de fonction, de tableaux, d'objets, initialisations diverses...), soit on a besoin du DOM et dans ce cas en encapsule le code dans une fonction genre jQuery(document).ready(), non ?

Effectivement , je pense que bovino devait être fatigué en postant sa remarque. Ca arrive même aux meilleurs. ;)

Pour aller plus loin dans cette encapsulation de code. J'avais même penser à un moment de sauver les fonctions natives dans ma(mes) capsules et de supprimer leurs accès une fois toutes mes capsules définies. Cela bloquerait toutes tentatives d'attaques JS , qui avouons-le, sont quand même frequentes. Un peu dans ce genre-ci. ( bien que je ne l'ai jamais mis en œuvre ) : http://pastebin.com/bAekPv6a

:)
11/02/2011, 10h38
Loceka

Citation:

Envoyé par Willpower

http://pastebin.com/bAekPv6a

J'ai pas la possibilité de tester maintenant mais je suis convaincu qu'avec un javascript utilisateur c'est facilement contournable étant donné que les scripts utilisateurs sont lancés dès le début du chargement de la page. Il est donc possible d'empêcher ton code de s'exécuter ou, plus simplement, de se faire se propre binding avant ce script et de les restaurer par la suite.
11/02/2011, 11h08
Willpower

Citation:

Envoyé par Loceka

J'ai pas la possibilité de tester maintenant mais je suis convaincu qu'avec un javascript utilisateur c'est facilement contournable étant donné que les scripts utilisateurs sont lancés dès le début du chargement de la page. Il est donc possible d'empêcher ton code de s'exécuter ou, plus simplement, de se faire se propre binding avant ce script et de les restaurer par la suite.

Ouais ça dépend du type d'attaques bien sur. Mais en mettant directement ce.code dans le header. On pourrait éviter les attaques par url (javascript:...) et si ya un script dans le body (par exemple une injection via un profil ) il ne pourra non plus pas être exécuté si celui du head l'a précédé. Ça reste conceptuel vu que je ne pense pas que ça soit déjà mis en œuvre. Mais je reste convaincu de l'efficacité que ça pourrait avoir niveau protection des attaques js. :)
13/02/2011, 04h13
Willpower

UP:
Voila, une version d'usage hyper facile de ma protection totale de JS :
http://pastebin.com/eUVaSu4V

:D

(ce n'est qu'un exemple, il n'y a encore que alert qui est vraiment protégé.)
mais l'usage est vraiment ultra simple :

inclure un fichier secure_0 qui crée simplement un objet :

Code:

var secure = {s:"var alert = window.alert, document_getElementById = document.getElementById, d = {}; d.getElementById = function(){var r = document_getElementById.apply(document,arguments);return r;};",u:function(){},f:function(){ window.alert = this.u; document.getElementById = this.u;}};

encapsuler tous ses autres fichiers JS en les commençant par :

Code:

(function(){eval(secure.s);

et en les terminant par :

Code:

})();

une fois tous les JS encapsulés, finir par le fichier secure_1 qui appelle simplement la fonction de suppression :

Code:

secure.f();

Et pour moi, si vous incluez tout ça dans le header, la protection est vraiment top.
Bon, comme le dit Loceka, ça ne protège pas des script utilisateur (par exemple une fonction JS qui fixe une limite de char dans un textarea, l'utilisateur peut le bloquer, mais ce genre de chose doit de toute façon être vérifié du coté serveur et ne pourra jamais être empêché du coté client car le client peut envoyer les données qu'il veut au serveur sans même utiliser un navigateur.) Cette technique protégerait contre les "vraies" attaques JS du genre celles qui s’exécute chez un visiteur contre son gré pour lui voler ses cookies par exemple. (soit en passant par l'url : javascript:alert(document.cookie);, soit avec une injection via une page : par exemple un profil).

Perso, je trouve que ça a du potentiel énorme et que je devrais le développer et le publier. :D

edit: version online (vous ne pouvez pas faire de "alert" ni de "document.getElementById" mais la page a toujours accès a ces fonctions via des variables locales encapsulés.)
http://ulb.comli.com/secure.html

edit2: évidement faut faire gaffe, car comme l'auront remarqué ceux qui utilise IE (haha^^) après le document.onload, IE execute encore de son plein gré la fonction "onresize" qui elle même(lors de son premier appel. Il ne faut pas chercher à comprendre IE, ça me ferait trop peur) appelle "document.getElementById". (qu'on a supprimé) et donc IE est pas content content ! :mrgreen:

edit:3 faudra jusque que je prévois une fonction supplémentaire de chargement + encapsulation dynamique des script. autrement ils n'auront pas accès aux fonctions. Cette fonction qui ne pourra évidement être appelée qu'à partir d'une capsule existante pour garantir la sécurité.
14/02/2011, 09h21
Loceka

Citation:

Envoyé par Willpower

edit2: évidement faut faire gaffe, car comme l'auront remarqué ceux qui utilise IE (haha^^) après le document.onload, IE execute encore de son plein gré la fonction "onresize" qui elle même(lors de son premier appel. Il ne faut pas chercher à comprendre IE, ça me ferait trop peur) appelle "document.getElementById". (qu'on a supprimé) et donc IE est pas content content ! :mrgreen:

Du coup tout le moteur JS part en vrille ? :D
Au pire il suffit de réécrire la fonction onresize pour qu'elle ne fasse rien. ^_^
14/02/2011, 11h19
Willpower

Citation:

Envoyé par Loceka

Du coup tout le moteur JS part en vrille ? :D
Au pire il suffit de réécrire la fonction onresize pour qu'elle ne fasse rien. ^_^

Non. Y'a juste un averto dans la console quand je met "document.getElementById = null" disant que cette fonction n'existe pas.mais pas de problème quand je remplace par "document.getElementById = function(){};" mais je me dis que ça pourrait poser problème pour d'autres méthodes si IE se met à exécuter du js (redéfinissable) de son plein gré.
14/02/2011, 11h54
RomainVALERI

Allez les gars un petit effort, faites-nous un nouveau browser, vous êtes plus très loin :mrgreen:

Citation:

Envoyé par RomainVALERI

Allez les gars un petit effort, faites-nous un nouveau browser, vous êtes plus très loin :mrgreen:

J'y suis presque, j'en suis déjà à faire des

Code:

eval('eval("....");');

(pour l'instant je n'ai jamais vu un eval indispensable dans un code, les 2 ici servent juste à éviter de la duplication de code et donc à faciliter l'écriture et l'appel de mes fonctions.)
et des

Code:

function(){return function(){return function(){... }}};

un double return fonction
le premier servant à sauvergarder des variables qui n'existeront plus lors de l'execution du second.(appelé une fois au début)
le second servant à recréer une nouvelle fonction différente à chaque appel. (appelé plusieurs fois en fin)

et sinon en remontant les "caller" j'ai identifié les fonctions que IE execute après l'initialisation de la page. (après même l'éxecution de notre code du window.onload).
http://img688.imageshack.us/img688/3135/ieee.png
appelée elle-même par :
http://img89.imageshack.us/img89/3694/ieee2.png
appelée elle-même par :
http://img13.imageshack.us/img13/6/ieee3.png

arg.... javascript me rend complètement cinglé ! :aie:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test JS secure</title>
<!-- <script type="text/javascript" src="secure_0.js"></script> -->
<!-- <script type="text/javascript" src="jquery.js"></script> -->
<!-- <script type="text/javascript" src="myOwnFunctions.js"></script> -->
<!-- <script type="text/javascript" src="secure_1.js"></script> -->
<script type="text/javascript">
 
// SAMPLES SECURE #0 : secure_0.js
var secure = {s:"var w=['alert','back','blur','captureEvents','clearInterval','clearTimeout','close','confirm','disableExternalCapture','enableExternalCapture','find','focus','forward','handleEvent','home','moveBy','moveTo','open','print','prompt','releaseEvents','resizeBy','resizeTo','routeEvent','scroll','scrollBy','scrollTo','setInterval','setTimeout','stop','toSource','toString','unwatch','valueOf','watch'];for(var i in w) if(window[w[i]]!=undefined) eval('var '+w[i]+' = window[w[i]];');var document_getElementById = document.getElementById, d = {}; d.getElementById = function(){var r = document_getElementById.apply(document,arguments);return r;};",u:(function(){var alert=window.alert; return function(){return function(){if(typeof(window.wpaCommon)!="undefined" && wpaCommon.onPageLoaded==arguments.callee.caller)return;alert("[Security] You can't do it !");}; };})(),f:function(){var alert=window.alert;   window.alert = this.u(); document.getElementById = this.u();}};
 
 
// SAMPLES OF JS FILE #1 : jquery.js
(function(){eval(secure.s);
        
        // ----------
        // past all jQuery code here
        // ----------
})();
 
 
// SAMPLES OF JS FILE #2 : myOwnFunctions.js
(function(){eval(secure.s);
        
        // sample to use secure functions  
        window.onload = function(){
                d.getElementById("tt").onclick=function(){alert("d.getElementById('tt') : "+d.getElementById("tt"));this.innerHTML+="<br/>tayooooo";};  
        };
        
})();
 
 
        
// SAMPLES SECURE #1 : secure_1.js
secure.f();
 
</script>
</head>
 
<body>
 
	try to alert my span with id "tt", write in address url : <br/>
	<a href=javascript:alert(1);>javascript:alert(1);</a> // secure <br/>
	<a href=javascript:document.getElementById('tt'); >javascript:document.getElementById('tt');</a> // secure<br/>
	then <span id='tt'><b>CLICK HERE</b></span> and you'll see as the "alert" AND the "getElementById" are still working ... only protected from you^^
 
</body>
 
</html>

15/02/2011, 20h30
RomainVALERI

Citation:

Envoyé par Willpower

arg.... javascript me rend complètement cinglé ! :aie:

Ce soir chez Boris c'est..... soirée disco ! :yaisse1: