Développer la partie dynamique des interfaces utilisateur web ou web mobile

Question 1

Quel(s) intéret(s) y a-til de protéger les champs d’un formulaire côté frontend (taille max d’un champ, complexité d’un password, …) étant donné qu’un utilisateur peut modifier tout le code html/javascript sur son navigateur web ? (et donc faire sauter les protections ainsi mises en place)

Answer 1

Protéger les champs d’un formulaire côté frontend a plusieurs intérêts, même si ces protections peuvent être contournées:

1. Amélioration de l’expérience utilisateur : Les validations côté frontend fournissent des retours immédiats à l’utilisateur, réduisant la frustration et évitant des soumissions inutiles.
2. Réduction de la charge serveur : Empêcher les erreurs simples (comme des champs vides ou mal formatés) côté frontend diminue les requêtes inutiles envoyées au serveur.

Question 2

Quel(s) protocole(s) peut(vent) être utilisé(s) entre le frontend et le backend d’une application Web ?

Answer 2

L’HTTP et l’HTTPS

Question 3

Expliquez la différence entre HTTP et HTTPS ?

Answer 3

Le protocole HTTPS est plus sécurisé que le protocole HTTP.
En HTTPS, les données sont chiffrées.

Question 4

C’est quoi un protocole en informatique ? Pouvez vous citer quelques exemples de protocoles ?

Answer 4

Un protocole en informatique est un ensemble de règles définissant la manière dont les données sont échangées entre différents systèmes ou appareils . Par exemple, HTTP/HTTPS pour le web, SMTP pour les emails ou SSH pour se connecter de manière sécurisée sur un serveur distant (Hébergeur mutualisé, VPS, …).

Question 5

Lors d’une comparaison en javascript, qu’elle est la différence entre “===” et “==” ? pourquoi privilégier “===” ?

Answer 5

Le “==” compare deux valeurs tandis que le “===” compare deux valeurs ET vérifie si le type des valeurs est le même. Il est vivement conseillé d’utilisé “===” pour plus de fiabilité.

Question 6

En javascript, j’ai une variable nommée ‘toto’ qui contient un tableau d’entiers. Comment puis-je afficher le premier élément du tableau ? comment puis-je afficher le nombre d’éléments contenus dans le tableau ?

Answer 6

console.log(toto[0]);
puis
console.log(toto.length);

Question 7

Si je veux additionner tous les nombres allant de 1 à 1000 (compris) en javascript et afficher le résultat, je peux faire comment ?

Answer 7

let sum = 0;
for (let i = 1; i <= 1000; i++) {
sum += i;
}
console.log(sum);

Question 8

Qu’est-ce que le json ? Quels sont les avantages du json ?

Answer 8

Le JSON (JavaScript Object Notation) est un format léger qui structure des données, facile à lire pour les humains et à traiter par les machines, largement utilisé dans les API.

Question 9

Quel est l’acronyme de XSS ? (attaque XSS)

Answer 9

XSS : CROSS-Site Scripting

Question 10

En quoi consiste une attaque XSS ?

Answer 10

Une attaque XSS consiste à injecter du code malveillant dans une page web, permettant à un attaquant de voler des données, usurper des sessions ou modifier l’apparence la page, par exemple en affichant un faux formulaire pour recueillir des informations sensibles.

Question 11

Quel est l’acronyme de CSRF ? (attaque CSRF)

Answer 11

CSRF : Cross-Site Request Forgery

Question 12

En quoi consiste une attaque CSRF ?

Answer 12

Une attaque CSRF consiste à tromper un utilisateur authentifié pour qu’il exécute à son insu des actions malveillantes sur un site web où il est connecté, comme changer un mot de passe ou effectuer une transaction sans son consentement. C’est souvent via un lien ou un formulaire.

Question 13

Différence XSS et CSRF ?

Answer 13

Nature de l’attaque :

1. XSS : L’attaquant injecte du code malveillant directement dans une page web visitée par l’utilisateur, ce qui permet d’exécuter des scripts dans le contexte du navigateur.
   CSRF : L’attaquant exploite la session authentifiée de l’utilisateur pour le manipuler et l’inciter à exécuter des actions involontaires sur un site web légitime.

Cible principale :
XSS : Vise principalement l’utilisateur (pour voler ses données ou manipuler l’affichage d’une page).
CSRF : S’attaque au serveur en profitant des droits de l’utilisateur connecté.

Méthode d’attaque :
XSS : L’attaquant injecte directement du code malveillant dans le site via des entrées non sécurisées (comme un champ de commentaire).
CSRF : L’attaquant utilise des requêtes (lien ou formulaire) déguisées pour forcer l’utilisateur à exécuter des actions.

Exemple :
XSS : Afficher un faux formulaire sur une page web pour voler des identifiants ou injecter un script pour voler des cookies.
CSRF : Faire en sorte qu’un utilisateur connecté effectue à son insu un virement bancaire en cliquant sur un lien malveillant.

Question 14

Qu’est-ce qu’une API Web ?

Answer 14

Une API Web est un moyen de faciliter la communication entre des applications en échangeant des données via Internet à l’aide de protocoles comme HTTP.

Question 15

C’est quoi un paradigme de programmation événementiel en javascript ?

Answer 15

C’est une approche où le programme réagit à des événements, comme un clic sur un bouton. EX GEN : addEventListener()

Question 16

C’est quoi le DOM ?

Answer 16

Le DOM (Document Object Model) permet d’ajouter, supprimer ou modifier de manière dynamique.du HTML et DU CSS avec JavaScript.

Question 17

C’est quoi un hook dans React ?

Answer 17

Un hook dans React est une fonction qui permet d’ajouter des fonctionnalités comme par exemple le useState et le useEffect.

Question 18

C’est quoi les props React ?

Answer 18

Les props permettent de passer des données d’un composant parent à un composant enfant. Les props sont immutables, c’est-à-dire qu’un composant enfant ne peut pas les modifier.

Question 19

C’est quoi les states React ?

Answer 19

Les states dans React sont des objets qui permettent de gérer et de stocker des données dynamiques. Lorsqu’un state est mis à jour, React actualise automatiquement le composant pour afficher les nouvelles données.

Question 20

C’est quoi le useState ?

Answer 20

Le useState est utilisé dans React pour gérer et stocker des données dynamiques comme des compteurs ou des entrées utilisateur. Lorsque les données sont modifiées, il y a un re-rendu du composant pour afficher les changements.

Question 21

C’est quoi le useEffect ?

Answer 21

Le useEffect permet d’ajouter des comportements dynamiques comme réagir à des changements de données, effectuer des appels API pour récupérer ou envoyer des données ou des modifications du DOM.

Question 22

C’est quoi le useLoaderdata ?

Answer 22

Le useLoaderData permet d’accéder aux données d’un loader dans une route.

Question 23

Pourquoi utiliser TypeScript ?

Answer 23

TypeScript ajoute un typage statique à JavaScript, aidant à prévenir les erreurs de type et à améliorer la maintenabilité.

Question 24

Citer trois manières de boucle sur un tableau en JS

Answer 24

For, While, Map

Question 25

Quelle est la différence entre les props et le state dans React ?

Answer 25

Les props sont des données passées de parent à enfant , tandis que le state est interne au composant et ne peut être modifié que par ce dernier.

Question 26

Qu’est-ce qu’un composant ?

Answer 26

Un composant est une unité autonome réutilisable.

Question 27

A quoi sert une API ?

Answer 27

Une API (Application Programming Interface) permet la communication entre une application et une base de données.
L’application demande des données, l’API va les récupérer dans la base de données et les fournit à l’application.