Web Engineering M1 IL ISTIC === 10 cours d'1h30 + 12 Séance de TP d'1h30 + 1 CC d'1h30 ## Cours - Cours 1 et 2 Base du WEB (redit par rapport à l'intro en L3 facultatif pour les premiers) - Cours 3 et 4. Pattern par Noel - Cours 5 et 6 Angular - Cours 7 VueJS - Cours 8 React - Cours 9 Déploiement et JamStack - Cours 10 Test (Ajoutez intro au test) - Cours 10 (Concept avancées Service Worker, ...) ## TPs - TP 1 et 2 (base du WEB, du JS à l'ancienne) ou les deux TPs sur TS. - TP 3 et 4 angular - TP 5 et 6 Vue ou React - TP 7 Déploiement et Jamstack - TP 8 Test - TP 9 Web assembly (Rust + angular + Service Worker) - TP 10 - 11 - 12 Projet # Programme - base du Web - Angular - Vue/React - Service Worker, Web Worker, OPFS, and Polyglot programming in the Web - JamStack/Test/Sécurité/Déploiement/ - ## Cours Voici les slides: - [intro](https://olivier.barais.fr/web.intro) - [js](https://olivier.barais.fr/web.javascript) - [nodejs](https://olivier.barais.fr/web.nodejs/) - [dev tooling](https://olivier.barais.fr/web.tooling/) - [Typescript](https://olivier.barais.fr/web.typescript) - [Web component and angular](https://olivier.barais.fr/web.angular/) - [react](https://olivier.barais.fr/web.react/) - [vuejs](https://olivier.barais.fr/web.vuejs/) - [test](https://olivier.barais.fr/web.test/) - [jamestack](https://olivier.barais.fr/jamstack/) - [advanced feature](https://olivier.barais.fr/web.advanced/) - [conslusion](https://olivier.barais.fr/web.conclusion/) ### Cours n°1 - Introduction - [intro générale](https://drive.google.com/file/d/1DNMa9-YdZ9aZdxsD0WV5KmNPUagekUWU/preview) - [intro Web](https://drive.google.com/file/d/1xFU2t28oRijXIzBUWWtLkimvu57rONBW/preview) - [intro: vers la notion de framwork](https://drive.google.com/file/d/1DYnwk_ocy7PZFscSX4VXGMl2_y4WrNqD/preview) - [intro Le front end: c'est quoi](https://drive.google.com/file/d/1avNgh7T7UqkwAfJGFDInqvp3BOcBCKWc/preview) - JS - [Introduction JavaScript](https://drive.google.com/file/d/18p4_GabiyAsUPgNMd3qUmukvCVSJaDEJ/preview) - [La syntaxe](https://drive.google.com/file/d/1jerBQV989gQWl02vV29bCFSwQl5W8TSv/preview) - [La notion d'objet](https://drive.google.com/file/d/1b07Eml5fQ9Ooha9AHiNf0vAE9_-S3aqd/preview) - [Les évènements](https://drive.google.com/file/d/1jFlFpWp3wch3-U-ziG6Ubv30aECMIJ-w/preview) - Outils pour le dévelopement - [Les éditeurs](https://drive.google.com/file/d/1TTayeAeKjcm8235YoB3OtXw-9KJs0XWo/preview) - [Gestion de dépendances et build](https://drive.google.com/file/d/1iuldx09Wjm3vPANkGP-EWOAYi1GICCsW/preview) ### Cours n°2 - [NodeJS: développement JS côté serveur](https://drive.google.com/file/d/1wK3db7_BumymRrdI-Kf6GGJLc7jMU3mC/preview) - [TypeScript: un langage statiquement typé pour le développement Web (mais pas que)](https://drive.google.com/open?id=1f0vE16veBvl3hH2f-G6DT_IhlYrshIXI ) ### Cours n°3 - [6. Angular un exemple de framwork moderne](https://drive.google.com/file/d/1SJFwpXXNzilJ5aVGydhijyzqzM52MT29/preview) - [Des framworks Web pourquoi](https://drive.google.com/file/d/1myOAU0p2n02Z68dkItFABK01SgJ5Nj5b/preview) - [Notion de composant Web](https://drive.google.com/file/d/1JbZQkz8eQmFwbH0M-7c4vdJ36gyrlg30/preview) - [Angular: les concepts principaux](https://drive.google.com/file/d/1HkSRBaPRmezxBWaesNKTGskUk_y0sLB_/preview) - [Angular: la notion de composant et de binding bidirectionnel](https://drive.google.com/file/d/1Rq7OTELKMx8hORlrVxohHh5SIICqKRL0/preview) - [Angular: Routing, injection de dépendances, formulaires, Pipe](https://drive.google.com/file/d/1eGRMIOzvkY7kdI6gW8mT2i6qQ1ezm6AP/preview) - [Angular: Les modules](https://drive.google.com/file/d/1Kx-XWkYwITHJrQOajVTkrvSLMVYcvYJC/preview) ### Cours n°4 - [7. VueJS, populaire et très bien documenté](https://drive.google.com/file/d/1oC-JPwMA8dauS-NJHpBpEsG0T2Ex2s9_/preview) - [8. React, le Web fonctionnel vue par facebook](https://drive.google.com/file/d/1CiJhGVEUtsuUyM2xSp4bF4W2nSUtMR6k/preview) - [Conclusion sur la partie Front](https://drive.google.com/file/d/179Ys0mX7UchI5NYogoORm9ARVLj_vO_D/preview) ### Cours n°5 Le but de ce cours est de se familiariser avec les problématiques de déploiement d'une application Web, comprendre la notion de : - Reverse proxy - dns - server security, - ... 0. [Plan de ces démos](https://drive.google.com/file/d/12ndvauRaEocWS6uPGbEN2zbaNrS47PXm/preview) 1. [Compilation / Optimisation de son application Web](https://drive.google.com/file/d/1IN0Ygq5XA0VWMn0UGd7MrGvT_GROH-dy/preview) 2. [Déploiement du JS/HTML/CSS sur votre serveur](https://drive.google.com/file/d/1j4N7s54AZHA6dHtsjMQjW6AtUbupt6f0/preview) 3. [Configuration du serveur Web (Nginx)](https://drive.google.com/file/d/1w3AagsKqCwyRq1Nk1yimKb9L0GL1XLwO/preview) 4. [Configuration du nom de domaine (sous domaine)](https://drive.google.com/file/d/166Q7vx4pju8GI4yUFkTnF-LNT3eP2AjR/preview) 5. [Mise en place des certificats pour la connexion https (letsencrypt)](https://drive.google.com/file/d/1Cn2g7TOinhLSdRY9FcuUiKEehm6F-Q32/preview) 6. [Mise en place du reverse proxy pour le back (si nécessaire)](https://drive.google.com/file/d/1njBb9ktsercTzOgo7stA-sv0SVWywQNL/preview) 7. [Mise en place d'un firewall (UFW)](https://drive.google.com/file/d/1-dk0nB3XG2IIa9KtJmAwyl1tRf8VRJFV/preview) 8. [Mise en place de fail2ban](https://drive.google.com/file/d/1e7yRrD66QVjYMdONAvqvpB9ATdhgTOsN/preview) 9. [Automatisation à l'aide de bunkerized nginx](https://drive.google.com/file/d/15xZbO07X8cPuvImilXsKcGKkfpzVYmdY/preview) https://github.com/bunkerity/bunkerized-nginx Je vous rappelle d'autres vidéos bien faite sur le sujet pour compléter ce cours - [Mettre en place un serveur Web](https://www.youtube.com/watch?v=cfJh8vdKuQU&list=PLjwdMgw5TTLUnvhOKLcpCG8ORQsfE7uB4&ab_channel=Grafikart.fr) - [Configurer nginx](https://www.youtube.com/watch?v=YD_exb9aPZU&ab_channel=Grafikart.fr) - [Nginx: Mettre en place letsencrypt](https://www.youtube.com/watch?v=NXyE3mayrtg&ab_channel=Grafikart.fr) - [Nginx : Se protéger des attaques Flood](https://www.youtube.com/watch?v=ge768xOLQJs&list=PLjwdMgw5TTLUnvhOKLcpCG8ORQsfE7uB4&index=22&ab_channel=Grafikart.fr) - [Fail2ban c'est quoi](https://www.youtube.com/watch?v=-rmK50PbqCY&ab_channel=Grafikart.fr) - [un firewall c'est quoi: configuration de ufw](https://www.grafikart.fr/tutoriels/ufw-696), [vidéo](https://www.youtube.com/watch?v=XnfMAU3zIew&ab_channel=Grafikart.fr) ### Cours n°6 Pour illustrer la partie sécurité Web, nous passons rapidement autour des grandes familles de failles les plus classiques que l'on retrouve dans une application WEB, nous montrerons un certains nombre de bonnes pratiques permettant dans un dévelopement moderne de limiter le risque en utilisant des technologies embarquant par construction un certain nombre de contre-mesure. Comme ce cours se concentre sur la partie front, nous illustrons surtout les problémetiques de failles qui concernent aussi les développements front. #### Qui a recensé ces failles? L’Open Web Application Security (OWASP) est un organisme à but non lucratif mondial qui milite pour l’amélioration de la sécurité des logiciels. L’objectif est d’informer les individus ainsi que les entreprises sur les risques liés à la sécurité des systèmes d’information. L’organisation fonctionne comme une communauté de professionnels qui partagent la même vision des choses. L’OWASP propose un guide de développement pour les applications web dans lequel se trouve les bonnes pratiques à adopter lors de la phase de développement d’un projet web. Des outils d'audite sont aussi mis à disposition des internautes par cette même organisation. #### Quelles sont ces failles? Chaque année OWASP publie un classement qui recence les failles de sécurité les plus critiques. Voici le classement 2017 : - *Injections* : correspond au risque d’injection de commande (Système, SQL, Shellcode, ...) - *Broken Authentification and Session Management* : correspond au risque de casser ou de contourner la gestion de l’authentification et de la session. Comprend notamment le vol de session ou la récupération de mots de passe. - *Cross-Site Scripting* : correspond au XSS soit l’injection de code HTML dans une page, ce qui provoquent des actions non désirées sur une page Web. Les failles XSS sont particulièrement répandues parmi les failles de sécurités Web. - *Broken Access Control* : correspond aux failles de sécurité sur les droits des utilisateurs authentifiés. Les attaquants peuvent exploiter ces défauts pour accéder à d'autres utilisateurs. - *Security Misconfiguration* : correspond aux failles liées à une mauvaise configuration des serveurs Web, applications, base de données ou framework. - *Sensitive Data Exposure* : correspond aux failles de sécurité exposant des données sensibles comme les mots de passe, les numéros de carte de paiement ou encore les données personnelles et la nécessité de chiffrer ces données. - *Insufficient Attack Protection* : correspond à un manque de respect des bonnes pratiques de sécurité. - *Cross-Site Request Forgery (CSRF)* : correspond aux failles liées à l’exécution de requêtes à l’insu de l’utilisateur. - *Using Components with Known Vulnerabilities* : correspond aux failles liées à l’utilisation de composants tiers vulnérables. - *Underprotected APIs* : correspond au manque de sécurité d'applications utilisant des API (Applications Programming Interface). En 2020, ils ont aussi ajouté - *Insecure Deserialization*. Insecure deserialization often leads to remote code execution. Even if deserialization flaws do not result in remote code execution, they can be used to perform attacks, including replay attacks, injection attacks, and privilege escalation attacks. - *Insufficient Logging & Monitoring*. Insufficient logging and monitoring, coupled with missing or ineffective integration with incident response, allows attackers to further attack systems, maintain persistence, pivot to more systems, and tamper, extract, or destroy data. Most breach studies show time to detect a breach is over 200 days, typically detected by external parties rather than internal processes or monitoring. - [Sécurité Web: comprendre les grandes familles de failles](https://drive.google.com/file/d/1dGy9HHnnuDoHKkdM2-FIXL-gnLxfG5aK/preview) - Comprendre la notion de supply chain - [Réutilisation massive de composants open source dans le monde des aaplications Web](https://drive.google.com/file/d/1w3qAAzkF4LBQMPozJMZCJFyD9CIJlwA4/preview) - [Intégration continue](https://drive.google.com/file/d/1-Vr-ehJul7SaORQ1tuVnT2WD1eztcVsA/preview) - [Demo Jenkins + gitlab](https://drive.google.com/file/d/1Y0qq7Ypzv2Pkt8vzvVwqJRlGI2BkObAr/preview) - [Secure Supply chain](https://drive.google.com/file/d/19au5D5XWbW7cWg7M3UDuTlM3-0J8ZZoi/preview) ## Cours n°7 JamStack - [slides](https://olivier.barais.fr/jamstack/1) ## TPs ### TP 0 Pour ceux qui n'ont pas fait la mineur secuWeb en L3 - [à la découverte de TS](https://hackmd.diverse-team.fr/s/BJrdniw-p) - [TS et manipulation du DOM](https://hackmd.diverse-team.fr/s/rkrBvwLWT) ### TP Web (TP1) - [à la découverte de Js](https://docs.google.com/document/d/1bgGhG9ZVWwf_K9euPAJ9xq8PJsT_zZiJFpPVtc_cW8o/edit?usp=sharing) - Vidéos de wrapup - [Objectifs](https://drive.google.com/file/d/1tx3ItL8MOx_8vLieD2HDWFhPenfVWvU6/preview) - [Q1-Q5](https://drive.google.com/file/d/1tIgL9a2b2e5ygbeY7bbOcTnYqqQTpZsu/preview) - [Q6](https://drive.google.com/file/d/10ETytC1_s4X4H8gvZHygq-iaN6OkSOby/preview) - [Q7-Q8](https://drive.google.com/file/d/1OS1YSCIVb-MZIEbfzwhMI-am3vQGLDtc/preview) - [Q9-Q10](https://drive.google.com/file/d/1CNYmcC2TKUZlA7cNA38rKwbYktafdsmk/preview) - [Q11](https://drive.google.com/file/d/1vS9DrnxC5uPJ2A30Nnj5YiJCmHzESK06/preview) - [Q12-Q13](https://drive.google.com/file/d/1i1TCFn6znx2lWeRzLzdU6CxjeTthJmsI/preview) ### TP Angular (TP2) - [énoncé](https://github.com/barais/teaching-jxs-angular/) - [Step1: setup](https://drive.google.com/file/d/1CXf46e0X2u-hGYxg5uewbMKM0oKS39f4/preview) - [Q1-Q3](https://drive.google.com/file/d/1hb9p-6kARa6W5L7koXbyPdIfksY0eZQd/preview) - [Q4-Q7](https://drive.google.com/file/d/1588s2tb2GnhWVjwVGLNnl45sKCXPp6WY/preview) - [Q8](https://drive.google.com/file/d/1O8CRn3Dsy5PEQBFdWWrw9muaj-Sum5hc/preview) - [Q9](https://drive.google.com/file/d/19nL13V8g9aFIu5TMS73CWCQbJebwAjCb/preview) - [Q10-Q12](https://drive.google.com/file/d/1nw1-EaIP5hHV-5wlGT_ldDZWT_zm7fjq/preview) - [Q13-Q14](https://drive.google.com/file/d/1FH76r3z-N9uziZPbJGdMwbUn2HHgabl2/preview) - [Q15](https://drive.google.com/file/d/1415ByiF9rBvY9S4m1awNUBZqxPU71r9z/preview) - [Q16](https://drive.google.com/file/d/1CVRZmZe_iCQ4-oSHq8Zrw-n0R7KRCO2b/preview) - [Intégration de librairie tierces](https://drive.google.com/file/d/1UdABPCS21JSE9sZ3Ex5gPD_y7_-2bhLo/preview) - [Build final: avant déploiement](https://drive.google.com/file/d/13lHSDvurP7LpNNQ4hOp24sXm0YhSEQmF/preview) ### TP VueJS (TP3) https://hackmd.diverse-team.fr/s/SJWuJKvBD ### TP React (TP4) https://hackmd.diverse-team.fr/s/HkpQ2YdHw ### TP Déploiement d'une application Web sur une VM de l'ISTIC (TP5) Créer une machine virtuelle (https://vm.istic.univ-rennes1.fr/ séléctionner **ubuntu20** comme image de base) et demandez l'accès externe vers le port *80* (http) et *443* (https) de votre machine virtuelle par le [helpdesk, catégorie ISTIC-ESIR - Tous problèmes informatiques](https://assistance.univ-rennes1.fr/), l'accès au port 22 se fera au travers du [VPN](https://istic.univ-rennes1.fr/intranet/services#section-4). Le nom de votre VM sera *nomdelavm.istic.univ-rennes1.fr*. En s'inspirant du cours n°6, déployez un des TPs sur votre machine virtuelle, configurez nginx, fail2ban, ufw pour obtenir un accès en https à votre application Web. Un lab un peu détaillé est disponible ici https://hackmd.diverse-team.fr/s/HyGpoZpm_ ### TP Test front https://hackmd.diverse-team.fr/s/ryBOx3Jfye ### Projet ;) L'idée du projet est de partir d'une application Web existante front est d'y ajouter une fonctionnalité. plusieurs possibilités (en choisir une seule. - le front de doodle accessible [ici] (https://github.com/barais/doodlestudent/tree/main/front) - le projet open source (realworld)[https://medium.com/@ericsimons/introducing-realworld-6016654d36b5]. Une application de blog simple implantée dans un ensemble de technologie. Pour ce projet la liste des front-ends et backends accessible est [ici](https://github.com/gothinkster/realworld). - un de vos projets perso dans lequel vous avez un front Web existant et vous souhaiteriez ajouter une fonctionnalité. On ne cherche dans ce projet à ne travailler que sur le front. Donc visez une modification qui n'impacte que le front et consomme par exemple un autre service Web back existant sur le net que vous appelerez depuis votre front. Vous pouvez trouver des exemples d'API Web accessibles [ici](https://any-api.com/) ou [ici](https://public-apis.io/) ou [là](https://publicapis.sznm.dev/). Sur doodle, si vous avez besoin d'une nouvelle fonctionnalité côté back. Votre serviteur est là pour vous servir ;). ## Evaluations Un premier rendu des TPs Web sera à faire pour **le 1er novembre 2024**, uniquement le TP1 et Angular. Le reste des TPs et en partie projet sera à rendre pour le **2/01/2025**. Je souhaite récupérer l'ensemble de vos réalisations qui se composeront au minimum du TP JS, du TP sur Angular, de deux autres des TP au choix sur react vue ou le déploiement et enfin la partie projet. En formule mathématique cela donne - **TP JS && TP Angular && ((TP Vue JS && TP React) || (TP Vue JS && TP Déploiement) || (TP React && TP Déploiement)) && Projet** Chaque repo doit contenir un fichier readme.md servant de compte rendu ou un fichier pdf dans le repo si vous préférez pour le compte rendu. Dans ce rendu, pensez à bien détaillez le processus pour lancer vos TPs. Pensez aussi à indisquer si vous avez utiliser des branches particulières pour les différents TPs. Pour le rendu, vous passerez par le [formulaire suivant](https://docs.google.com/forms/d/e/1FAIpQLSeH0wC0AmkotPuA9n_Gaj8g8BBR31cF9U_8RWdBOwUfcSdRTQ/viewform?usp=pp_url) pour mettre à disposition vos urls de vos dépots gitlab. https://docs.google.com/forms/d/e/1FAIpQLSeH0wC0AmkotPuA9n_Gaj8g8BBR31cF9U_8RWdBOwUfcSdRTQ/viewform?usp=pp_url N’hésitez pas pour les questions.