11. HTTPS 19 décembre 2023 Développement web il3 HTTPS HE-Arc (DGR) 2022 Sécuriser un site web • Authentification du serveur – Assurer que le serveur est celui qu’il prétend être • Intégrité des est celui qu’il prétend être • Pour un site web, ces services sont fournis par https – HTTPS : HTTP sécurisé par SSL/TLS, par défaut sur le port 443 1 Secure Socket Layer –> Transport Layer Security 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 : –

Framework1 • Fonctionnalités 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 les tests et la gestion de projets 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 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 pages à générer – C : Orchestration

OWASP1 • Open Web Application Security Project 1https://owasp.org/ 1 • Fondation pour améliorer la sécurité des webapps • Fondée en 2004, internationale, sans but lucratif • Référence principale dans le – 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 cryptographiques 3. Injections 4. Conception non sécurisée 5. Mauvaise 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

Webservices : REST vs SOAP • Sécurité : Technologies, prévention des risques courants • (Responsive) Web Design • (Syndication : RSS, Atom) • Vos souhaits ? Contenu, activités • Cours théorique • 2 Projets 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

(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 maintenable – Design Patterns14 – Bonnes pratiques15 • Interface pour scripter le navigateur – Accès et modification du contenu via DOM 1https://emscripten.org/ 2http://webassembly.org/ 3http://www.espruino

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 Service web • 2 visions : – Utiliser les technos web pour développer des applis distribuées – Accès pour une application aux services offerts aux humains • Service web = webapp pour une autre application • 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

: 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) 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 Serveur Méthodes HTTP

jQuery() • Utilisation de sélecteurs CSS, id ou classes $(document); // retourne le DOM $("h3").hide(); // cache tous les éléments h3 $(".post"); // sélectionne les éléments de classe "post" var node noeud • Pour être sûr que le document est chargé : $(document).ready(function(){ console.log("prêt!") }); ou $(function() { console.log("prêt!") }); Sélection dans le DOM • Sélection $("h1"); // Tous les fils (sélecteur descendant) $("#intro li"); • Que les fils directs (sélecteur d’enfants) 2 $("#intro > li"); • Sélecteur multiple $(".post, #main "); • D’autres exemples2 de sélecteurs Parcours

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 aux spécifités des appareils 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

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 – Contenu Contenu : news, blogs, podcast, … – Accès unique à plusieurs sources d’informations – Mises à jour fréquentes Historique • Feed (fil ou flux) RSS • Format d’échange de données en XML – fournir ou recueillir 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