Comment utiliser Nginx pour configurer la même politique d'origine afin de protéger la sécurité frontale

Alors que la complexité des applications front-end ne cesse d'augmenter, les enjeux de sécurité des applications web deviennent de plus en plus importants. La politique de même origine est une mesure de sécurité importante pour éviter les problèmes de sécurité tels que les attaques de scripts intersites. Nginx est un puissant logiciel de serveur Web. Cet article explique comment utiliser Nginx pour configurer la politique de même origine afin de protéger la sécurité frontale.

1. Politique de même origine

La politique de même origine est un principe de sécurité dans le développement Web, qui est utilisé pour restreindre la façon dont les documents ou les scripts sous un nom de domaine interagissent avec les ressources sous un autre nom de domaine. L'homologie signifie que le protocole, le nom de domaine et le port sont tous identiques, ce qui est appelé « totalement cohérent ».

La même politique d'origine peut empêcher les attaques malveillantes entre sites Web. Par exemple, un pirate informatique peut écrire un programme JavaScript malveillant et l'intégrer dans certaines pages Web. Lorsque les utilisateurs visitent ces pages Web, le programme JavaScript vole des informations sensibles sur l'ordinateur de l'utilisateur.

2. Configuration de même origine de Nginx

L'une des façons de configurer la politique de même origine consiste à utiliser la fonction de proxy inverse de Nginx. Un proxy inverse est un serveur proxy situé côté serveur qui proxy la connexion entre le client et le serveur et isole les requêtes provenant de différentes sources.

Ce qui suit présente comment utiliser Nginx pour configurer la même politique d'origine afin de protéger la sécurité frontale :

1. Configuration de Nginx
   Tout d'abord, vous devez ajouter le contenu suivant au fichier de configuration Nginx :

emplacement / {

add_header 'Access-Control-Allow-Origin' 'http://localhost:8080';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

}

Ce fichier de configuration L'extrait nous donne les informations suivantes :

Access-Control-Allow-Origin : Spécifie l'URI du domaine étranger autorisé à accéder à la ressource, peut être défini sur *.

Access-Control-Allow-Credentials : spécifie si les demandes autorisant l'accès entre domaines sont autorisées à transporter des informations d'identité.

Access-Control-Allow-Methods : spécifiez les méthodes de requête HTTP autorisées.

Access-Control-Allow-Headers : spécifiez les champs d'en-tête de requête autorisés.

2. Configurez l'application front-end
   Ensuite, ajoutez le contenu suivant au code JavaScript de l'application front-end :

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http: //localhost:8080/ api/save', true);
xhr.withCredentials = true;
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {

if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
}

};
xhr. send(JSON.stringify({name: 'John', age: 26}));

Ce code utilise l'objet XMLHttpRequest pour lancer une requête POST. L'URI de la requête est http://localhost : 8080/api/save, où withCredentials L'attribut est défini sur true, indiquant que la demande peut transporter des informations d'identité.

3. Test de l'application
   Enfin, lancez l'application et visitez la page de l'application frontale. Dans les outils de développement du navigateur, vous pouvez voir que l'en-tête de la requête contient des informations telles que Access-Control-Allow-Origin et Access-Control-Allow-Credentials, qui vérifient l'exactitude de la configuration de Nginx.

Grâce aux étapes ci-dessus, vous pouvez utiliser Nginx pour configurer la politique de même origine afin de protéger la sécurité frontale.

3. Résumé

La même politique d'origine est une mesure de sécurité importante dans le développement Web, et Nginx peut nous aider à configurer la même politique d'origine. Dans les applications réelles, en plus de configurer la politique de même origine, nous devons également utiliser d'autres mesures de sécurité, telles que l'authentification unique SSO, la prévention CSRF, la prévention XSS, etc., pour garantir la sécurité des applications Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!