similaires pour de nombreuses applis • Composants de haut-niveau réutilisables (faible couplage) • Règles de codage et d’architecture • Code sûr et efficace • Facilite les tests et la gestion de projets complexes complexes • Utilisation de Design Patterns dès que possible • Comportement par défaut • Extensible • Principe d’inversion de contrôle Différences entre framework et library sur Stack Overflow2 ou artima 3http://www.artima.com/forums/flat.jsp?forum=106&thread=152104 1 Design Patterns et webdev • Inversion de contrôle (IoC4) • Model View Controller – M : Accès aux données, logique métier – V : Templates des

CWE5 – Grande communauté d’experts – Formation, documentation et ressources – Outils d’audit, de tests et de formation Top 106 OWASP 2021 (fr7 - historique8) 1. Contrôle d’accès défaillants 2. Défaillances configuration de sécurité 6. Composants vulnérables et obsolètes 7. Identification & Authentification de mauvaise qualité 8. Manque d’intégrité des données et du logiciel 9. Carences des systèmes de contrôle contrôle et de journalisation 10. Falsification de requêtes côté serveur • Non exhaustif : ex. : risques liés à Node JS9 Injection de code • Données mal validées : possibilité d’exécuter du code • Passées

: invention www en 1990 (v0.9) – Connexion, GET, réponse, fermeture • HTTP 1.0 (1996) – Entêtes de requête (Host, Referer, User-Agent, …) et réponse (Content-Type, Set- Cookie, Location, …) • HTTP connexions, compression entêtes, push, … – Supporté par presque tous2 les navigateurs, une majorité de serveurs • HTTP 3.03 (2019) – UDP, correction erreur, contrôle congestion, multiplexage (0 RTT) ent#sl ide=id.p19 2https://caniuse.com/#feat=http2 3https://http3-explained.haxx.se/fr/ 1 Codes de réponse • 1xx : Information • 2xx : Succès • 3xx : Redirection • 4xx : Erreur Client • 5xx : Erreur

Couche Application : – Entre les couches transport et application – Pas besoin de modifier la pile TCP/IP • Possibilité de sécuriser d’autres protocoles : – HTTP, SMTP, SIP, … • Services offerts : – Délivré par une autorité de certification • Certificats clients Autorité de Certification • Tiers de confiance – enregistrée et certifiée par des autorités publiques ou de gouvernance de l’Internet • Rôle période de validité – Maintenir la liste des certificats valides/révoqués 2 • Certificats auto-signés : – usage interne – pas de tiers de confiance Contenu d’un certificat X509 • version de X.509 (v3

frameworks : Laravel, Django, Vue.js (ouvert à d’autres propositions) – Groupes de 3, 30h1 par personne et par projet – Présentation de 20min • Workshops intervenants externes 1https://rs.he-arc.ch/index.php ghpages5 (source6), partage fichiers : teams7 Projets • Faire pour apprendre • Les rôles dans une équipe de développement web, workflow • Ne pas réinventer la roue ou tout faire soi-même • Critères d’évaluation Avoir un compte github avec une clé SSH8 (indispensable au déploiement) – Constitution des équipes de 3 personnes – Choix du projet – Forge : Créer projet sur github dans l’entité HE-Arc9 – S’inscrire10

technologies du web, comme HTTP et XML : – indépendantes de la plateforme, éprouvées, largement utilisées • Système distribué importance de l’architecture : – orientée ressource1 : atome : ressource • Evolution de XML-RPC, format XML d’envoi de messages • Architecture Orientée Service (SOA) • Indépendant du langage et de la plateforme • Recommandation du w3c depuis 2003 • SOAP = abus de langage, service Introduction à SOAP10 (fr) • Créer un service web WS (SOAP) nécessite WSDL et UDDI : – SOAP : Echange de messages XML sur le réseau – WSDL : Web Service Description Language – UDDI : Universal Description

(1995, Brendan Eich) – Petites applications exécutées par le navigateur – DHTML : rollovers, validation de formulaires, … JavaScript aujourd’hui • Page web = HTML + CSS + JavaScript • Compilation JIT • HTML5 hors-browser – Node.js, Spidermonkey, Rhino – script d’app (Qt, Notepad++, …) 1 • Langage cible de compilateurs : emscripten1, WebAssembly2 • Embarqué : Espruino3, robotique : Node Bots4, CylonJS5 parfois offline • Langage de script généraliste (paquets npm) Caractéristiques du langage • Orienté Objet par prototype • Syntaxe proche de C, Java • Faiblement typé : – Pas de déclaration, type déterminé

Responsive Web Design Conception de sites web adaptatifs HE-Arc (DGR) 2022 Site adaptatif ? • Surfer depuis : PC, mobiles, tablettes, tv, … • UX : navigation avec un minimum de zoom, pan, scroll • S’adapter tactile, hover, …) – … • 1 seul site à gérer : m.cool.com ni de cool.com/mobile • Le même contenu pour tous • Souvent basé sur la largeur de l’écran • CSS3 • Responsive Web Design (1), Exemple1 1https://alistapart io/code-samples/responsive-web-design/ex/ex-site-FINAL.html 1 Techniques • Media queries : Taille de l’écran (ou sortie) • UNITES RELATIVES • Fonts : Dimensions en em • Fluid Grids : Disposition et taille

fonctionnalités • Routes RESTful • ORM (Eloquent, implémentation du pattern Active Record) • Migrations • Moteur de templates (Blade) • Pagination • Authentification, sessions • Mail • Tests unitaires • Extensible par Requête/Reponse9 • Modèle : Eloquent ORM • Vue : Blade Engine • Contrôleur : hérite de BaseController Pratique • Conventions de codage : Laravel respecte PSR-210 – Vous aussi avec StyleCI11 • Editeurs et 15http://emmet.io/ 2 Figure 1: Rôle du front controller 3 Figure 2: Architecture de Laravel – Documentation officielle16 de Laravel – Cheat Sheet Laravel 817, Artisan18 • Tutoriels – Pour un tuto à jour

Syndication • Principe de vendre un contenu à plusieurs médias • Dans les journaux : dépêches, bandes dessinées, … • Télévision : jeux, séries • Web : Flux RSS / Atom – 1 source de donnée, plusieurs abonnés sources d’informations – Mises à jour fréquentes Historique • Feed (fil ou flux) RSS • Format d’échange de données en XML – fournir ou recueillir des données structurées • Utilisation d’un lecteur (agrégateur) Winer (Harvard) en 2002 • Atom v1.0 en 2005 (développement communautaire) 1 Il y a neuf versions de RSS généralement incompatibles entre elles. Lire The myth of RSS compatibility1 Applications • Récupérer