Comment créer un site Web sécurisé avec CloudFront Password Protect

Publié: 2023-01-15

Détenant la part du lion du marché du cloud computing à 41,5 %, Amazon Web Service (AWS) est le service de cloud computing le plus populaire de nos jours. Il permet aux entreprises et aux particuliers d'héberger leurs applications et sites Web sur les serveurs d'Amazon à moindre coût.

L'un des composants critiques d'AWS est Amazon CloudFront. Il s'agit d'un réseau de diffusion de contenu (CDN) conçu pour optimiser la vitesse de chargement de tout visiteur de votre site Web hébergé par AWS.

Mais savez-vous que vous pouvez utiliser CloudFront pour verrouiller votre site Web derrière une invite de mot de passe ? Ce guide vous montrera comment utiliser la fonction de protection par mot de passe AWS CloudFront pour sécuriser votre site Web.

  • Qu'est-ce que la protection par mot de passe CloudFront ?
  • Comment sécuriser un site Web CloudFront avec un mot de passe
    • Utilisation de [e-mail protégé]
    • Tirer parti d'AWS S3 et de Lambda pour ajouter une authentification de base

Qu'est-ce que la protection par mot de passe CloudFront ?

Amazon CloudFront accélère l'accès des utilisateurs à votre application et à votre site Web en diffusant du contenu via divers centres de données dans le monde. Lorsqu'un utilisateur accède à votre site Web, le contenu est délivré depuis le centre le plus proche de sa position géographique. Ceci, par conséquent, accélère la vitesse de chargement.

Tant que vous utilisez Amazon CloudFront pour distribuer du contenu, vous pouvez utiliser la fonction de protection par mot de passe du système. Le système fonctionne toujours si votre site Web est hébergé dans un compartiment S3 ou une instance EC2.

Voici le schéma d'un système CloudFront standard. Il décrit comment une demande des visiteurs Web (à droite) transite par CloudFront et d'autres sous-systèmes pour arriver à l'origine (où le contenu est stocké). A l'origine, les données sont récupérées et refluées vers les visiteurs.

ppwp-cloudfront-password-protect-system

Cela peut sembler déroutant, en particulier pour les personnes qui viennent d'entendre parler de CloudFront pour la première fois. Mais comprendre ce tableau et ses composants est crucial pour les sections suivantes.

Comment sécuriser un site Web CloudFront avec un mot de passe

Vous pouvez utiliser plusieurs méthodes pour pousser une invite de mot de passe sur votre site Web servi par CloudFront. Nous allons vous montrer 2 façons dans ce guide.

Utilisation de [e-mail protégé]

[email protected] est une fonctionnalité de CloudFront qui vous permet d'exécuter des codes personnalisés plus près des clients. De cette façon, les performances de chargement sont améliorées. Si vous choisissez de déployer [email protected], chaque fois qu'un visiteur demande à récupérer du contenu pour votre site Web, il devra d'abord passer par cette fonction.

Si vous deviez modifier [email protected] pour qu'il ne fonctionne que si l'utilisateur fournit un mot de passe correct, vous disposez plus ou moins d'une couche de protection par mot de passe pour votre site Web.

C'est l'idée de base derrière cette méthode de sécurité CloudFront.

ppwp-lambda-bord

Étape 1 : Déployer la fonction [email protected]

[email protected] est une fonction Lambda déployée uniquement dans la région us-east-1 (Virginie du Nord). Ainsi, pour le déployer, vous devrez vous connecter dans la bonne région :

  1. Connectez-vous à votre compte AWS, puis cliquez sur Créer une fonction .
  2. Vous serez invité à entrer le nom de la fonction. Choisissez quelque chose de basique comme BasicAuth . En tant qu'environnement d'exécution, choisissez Node.js 12.x .
  3. Finalisez la création en appuyant sur le bouton Créer une fonction .
  4. Vous verrez maintenant un fichier appelé index.js dans la fenêtre Function Code . Cliquez dessus et vous verrez un code Lambda par défaut. Remplacez-le par ce code personnalisé :
 'utiliser strictement';

exports.handler = (événement, contexte, rappel) => {

// identifiants d'authentification
var i = 0, authStrings = [], authCredentials = [
'user1:userpassword',
] ;

// construit des chaînes d'authentification de base
authCredentials.forEach(element => {
authStrings[i] = "Basic " + new Buffer(element).toString('base64');
je++ ;
}
);

// récupère les en-têtes de requête et de requête
const request = event.Records[0].cf.request;
en-têtes constants = request.headers ;

// nécessite une authentification de base
if (typeof headers.authorization == 'undefined' ||
!authStrings.includes(headers.authorization[0].value)) {

réponse constante = {
état : '401',
statusDescription : 'Non autorisé',
corps : 'Non autorisé',
en-têtes : {
'www-authenticate' : [ {clé : 'WWW-Authenticate',
valeur : 'Basic realm="Authentication"'} ]
},
} ;

rappel (null, réponse);
}

// continue le traitement de la requête si l'authentification est réussie
rappel (null, demande);
} ;

L'identifiant de connexion par défaut est stocké dans cette fonction dans la ligne :

 'user1:userpassword',

Le format est "compte : mot de passe" . Vous pouvez le changer en ce que vous voulez. De plus, vous pouvez également ajouter d'autres identifiants de connexion en dupliquant cette ligne.

5. Une fois le code personnalisé remplacé, cliquez sur Déployer pour pousser le code.

6. Accédez au menu Actions en haut, cliquez sur Publier la nouvelle version , puis sélectionnez Publier . N'y modifiez aucun paramètre.

7. Localisez la chaîne ARN en haut à droite de l'écran et copiez-la. Cette étape est cruciale. La chaîne ARN ressemble à ceci :

 arn:aws:lambda:us-east-1:XXXXXXXXXXXX:function:basicAuth:1

Étape 2 : Configurer la relation d'approbation

  1. Accédez à la console IAM et connectez-vous.
  2. Entrez le nom de votre fonction [email protected] ( BasicAuth à l'étape précédente).
  3. Recherchez l'onglet Relations d'approbation et cliquez sur Modifier . Remplacez le code à l'intérieur par ceci :
 {
"Version": "2012-10-17",
"Déclaration": [
{
"Effet": "Autoriser",
"Directeur": {
"Un service": [
"lambda.amazonaws.com",
"edgelambda.amazonaws.com"
]
},
"Action": "sts:AssumeRole"
}
]
}

4. Finalisez le processus en cliquant sur Mettre à jour la politique de confiance .

Étape 3 : Configurer le comportement du cache

  1. Accédez à CloudFront et connectez-vous. Cliquez sur le site Web servi par CloudFront que vous souhaitez verrouiller avec un mot de passe.
  2. Choisissez Behaviors , recherchez la case à cocher URL Path Pattern et cochez-la. Continuez à cliquer sur Modifier .
  3. Recherchez une section intitulée Lambda Function Associations . Trouvez un menu déroulant et recherchez Select Event Type , puis Viewer Request . Collez la chaîne ARN que vous avez copiée précédemment à l'étape 1.
  4. Appuyez sur Oui, Modifier . Après cela, CloudFront prendra environ 5 minutes pour redémarrer et recharger les nouveaux paramètres.

Étape 4 : Revérifier le site Web

Visitez votre site Web après le redémarrage de CloudFront. Si vous êtes accueilli par une invite de connexion, vous avez réussi.

Ça devrait ressembler a quelque chose comme ca:

ppwp-lambda-cloudfront-password-protect

Tirer parti d'AWS S3 et de Lambda pour ajouter une authentification de base

Dans cette méthode, nous utiliserons une approche combinée d'AWS S3 et de Lambda pour accomplir la même chose que ci-dessus : créer un formulaire d'authentification de base pour le site Web.

Étape 1 : créer un compartiment S3

AWS S3 (Simple Storage Service) est la solution de stockage dans le cloud d'AWS. Il vous donne la possibilité de stocker tout type de données sur les serveurs d'Amazon. Dans S3, un « compartiment » contient et contrôle l'accès aux objets (les données de votre contenu).

  1. Vous pouvez créer un compartiment via AWS Management Console. Cliquez sur l'onglet S3 puis sur Créer un bucket.
  2. Entrez le nom et la région d'hébergement (choisissez celle qui est la plus proche de vous pour faciliter les tests). Cliquez sur Créer , et c'est tout !

Étape 2 : créer un fichier de test

  1. Créez un fichier de test comme un simple fichier index.html contenant le code de démarrage.
 <h2>Bonjour le monde</h2>

2. Vous pouvez charger ce fichier dans le bucket nouvellement créé via le menu Objets .

Étape 3 : Générer une distribution CloudFront

  1. Accédez au tableau de bord de CloudFront et appuyez sur Créer une distribution .
  2. Choisissez le domaine d'origine comme compartiment S3 que vous venez de créer. Mettez à jour la stratégie du bucket et le paramètre OAI (Origin Access Identity) à votre convenance.
  3. Entrez le nom du fichier que vous souhaitez protéger ( index.html ) dans la case facultative Objet racine par défaut .
  4. Créez la distribution CloudFront et le tour est joué ! Vous avez maintenant un point de terminaison CloudFront.

Étape 4 : Créer une fonction Lambda personnalisée

  1. Maintenant, depuis votre AWS Management Console, accédez à l'onglet Lambda et appuyez sur Create function .
  2. Sélectionnez l'option Use a blueprint et recherchez CloudFront , puis choisissez le modèle CloudFront-response-generation . Cliquez sur Configurer une fois que vous l'avez sélectionné.
  3. Dans l'écran suivant, entrez le nom de la fonction (AuthenticationTest) et le nom du rôle (S3-Auth). Choisissez Execution Role as Create the new role from AWS Policy templates .
  4. Ensuite, collez les détails du point de terminaison CloudFront que vous venez de créer dans la zone Distribution . Dans Comportement du cache , laissez - le comme * . Et enfin, dans CloudFront event , sélectionnez Viewer request .
  5. Cliquez sur Déployer pour créer la nouvelle fonction.

Étape 5 : Modifier la fonction Lambda

  1. Remplacez le code Lambda par défaut par ce code personnalisé.
 'utiliser strictement';
exports.handler = (événement, contexte, rappel) => {

// Récupère la requête et les en-têtes de requête
const request = event.Records[0].cf.request;
en-têtes constants = request.headers ;

// Configurer l'authentification
const authUser = 'nom d'utilisateur';
const authPass = 'mot de passe';

// Construire la chaîne d'authentification de base
const authString = 'Basic ' + new Buffer(authUser + ':' + authPass).toString('base64');

// Nécessite une authentification de base
if (typeof headers.authorization == 'undefined' || headers.authorization[0].value != authString) {
const body = 'Non autorisé' ;
réponse constante = {
état : '401',
statusDescription : 'Non autorisé',
corps corps,
en-têtes : {
'www-authenticate' : [{clé : 'WWW-Authenticate', valeur : 'Basic'}]
},
} ;
rappel (null, réponse);
}

// Continuer le traitement de la requête si l'authentification a réussi
rappel (null, demande);
} ;

Vous pouvez modifier le nom d'utilisateur et le mot de passe selon vos préférences.

2. Cliquez sur Déployer en haut pour enregistrer le code. Ensuite, allez dans Actions et Deploy to [email protected] pour pousser le code.

3. Collez l'adresse du point de terminaison CloudFront dans la zone Distribution , laissez Comportement du cache sur * et sélectionnez Événement CloudFront sur Demande de l'utilisateur. Une fois cela fait, un nouveau déclencheur CloudFront sera créé.

4. Ensuite, déployez-le et attendez 5 minutes.

5. Visitez à nouveau votre site Web. Il devrait maintenant vous présenter une invite de connexion, grâce au système d'authentification CloudFront.

Tirez pleinement parti de la fonctionnalité de protection par mot de passe de CloudFront

Il existe de nombreuses raisons pour lesquelles un administrateur Web voudrait verrouiller son site Web. Cela peut être dû au fait que leur site Web nécessite une maintenance, une sécurité renforcée ou une protection contre les accès non autorisés.

Quel que soit le cas, espérons que ce guide pourra vous aider à déployer avec succès un schéma de mot de passe à l'aide de la protection par mot de passe CloudFront.

Il existe un autre moyen de protéger un site Web par mot de passe : en utilisant PPWP Pro. Vérifiez-le!