🍬 a) Autoriser des origines pour une API

Autorisation d'origines & les CORS

A cette partie-ci, nous allons voir comment mettre à jour une API afin que dans chaque réponse faite à un client, on ajoute un header permettant d'autoriser une ou plusieurs origines.

C'est un moyen de relâcher la sécurité d'une API tout en restant vigilant sur les origines autorisées.

Pour ce nouveau tutoriel, nous allons partir de la dernière version de la RESTful API de pizzas.

Veuillez créer un nouveau projet nommé /web2/tutorials/back/api/cors sur base d'un copié collé de services.

Dans ce projet, veuillez installer le package cors et les types associés :

bash
npm i cors
npm i @types/cors -D

Nous allons configurer les headers de la RESTful API à l'aide du middleware cors offert par la librairie cors.

Pour configurer et utiliser les CORS, veuillez mettre à jour le fichier /app.ts :

ts
1
import express, { ErrorRequestHandler } from "express";
2
import cors from "cors";
3

4
import usersRouter from "./routes/users";
5
import pizzaRouter from "./routes/pizzas";
6
import drinkRouter from "./routes/drinks";
7

8
const app = express();
9

10
const corsOptions = {
11
  origin: [/^http:\/\/localhost/, "http://amazing.you.com"],
12
};
13

14
app.use(cors(corsOptions));
15

16
app.use((_req, _res, next) => {
17
  console.log(
18
    "Time:",
19
    new Date().toLocaleString("fr-FR", { timeZone: "Europe/Brussels" })
20
  );
21
  next();
22
});
23

24
app.use(express.json());
25
app.use(express.urlencoded({ extended: false }));
26

27
app.use("/users", usersRouter);
28
app.use("/pizzas", pizzaRouter);
29
app.use("/drinks", drinkRouter);
30

31
const errorHandler: ErrorRequestHandler = (err, _req, res, _next) => {
32
  console.error(err.stack);
33
  return res.status(500).send("Something broke!");
34
};
35

36
app.use(errorHandler);
37
export default app;

Via /^http:\/\/localhost/, nous précisons que l'API doit autoriser toutes les origines locales (REGEX qui accepte toutes les URL qui commencent par http://localhost).

Il reste à s'assurer que votre frontend (/web2/tutorials/pizzeria/front/fetch-no-proxy) est lui aussi bien démarré et peut réaliser ses "fetch" vers l'API.

Tout fonctionne correctement ?

Normalement oui, vous devriez avoir le site de la pizzeria qui affiche le menu des pizzas suite à un appel à l'API.

En cas de souci, vous pouvez accéder au code du tutoriel ici :

• pour l'API : cors.
• pour le frontend : fetch-no-proxy.

💭 OK, ça fonctionne bien... Mais cela est possible seulement si nous sommes les propriétaires de la RESTful API. Maintenant, que faire si une API tierce doit être intégrée dans notre frontend ?
Imaginez que vous souhaitez intégrer une opération d'une API offerte par Google...
Pensez-vous que vous pouvez leur donner un coup de fil et dire : "Google, peux-tu STP autoriser l'origine associée à mon site web ?"...

Il y a une solution pour cela : le proxy qui est vu ailleurs dans ce cours.