So konfigurieren Sie mit Nginx dieselbe Ursprungsrichtlinie zum Schutz der Front-End-Sicherheit

Da die Komplexität von Frontend-Anwendungen immer weiter zunimmt, werden die Sicherheitsaspekte von Webanwendungen immer wichtiger. Die Same-Origin-Richtlinie ist eine wichtige Sicherheitsmaßnahme, um Sicherheitsprobleme wie Cross-Site-Scripting-Angriffe zu vermeiden. Nginx ist eine leistungsstarke Webserver-Software. In diesem Artikel wird erläutert, wie Sie mit Nginx die Same-Origin-Richtlinie zum Schutz der Front-End-Sicherheit konfigurieren.

1. Same-Origin-Richtlinie

Die Same-Origin-Richtlinie ist ein Sicherheitsprinzip in der Webentwicklung, das dazu dient, die Interaktion von Dokumenten oder Skripten unter einem Domainnamen mit Ressourcen unter einem anderen Domainnamen einzuschränken. Homologie bedeutet, dass Protokoll, Domänenname und Port alle gleich sind, was als „völlig konsistent“ bezeichnet wird.

Die gleiche Ursprungsrichtlinie kann böswillige Angriffe zwischen Websites verhindern. Beispielsweise kann ein Hacker ein bösartiges JavaScript-Programm schreiben und es in einige Webseiten einbetten. Wenn Benutzer diese Webseiten besuchen, stiehlt das JavaScript-Programm vertrauliche Informationen vom Computer des Benutzers.

2. Die Same-Origin-Konfiguration von Nginx

Eine Möglichkeit, die Same-Origin-Richtlinie zu konfigurieren, ist die Verwendung der Reverse-Proxy-Funktion von Nginx. Ein Reverse-Proxy ist ein Proxy-Server auf der Serverseite, der die Verbindung zwischen dem Client und dem Server weiterleitet und Anfragen von verschiedenen Quellen isoliert.

Im Folgenden wird erläutert, wie Sie mit Nginx dieselbe Ursprungsrichtlinie konfigurieren, um die Front-End-Sicherheit zu schützen:

1. Nginx konfigurieren
   Zuerst müssen Sie der Nginx-Konfigurationsdatei den folgenden Inhalt hinzufügen:

location / {

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';

}

Diese Konfigurationsdatei Das Snippet gibt uns die folgenden Informationen:

Access-Control-Allow-Origin: Gibt den fremden Domänen-URI an, der auf die Ressource zugreifen darf, kann auf * gesetzt werden.

Access-Control-Allow-Credentials: Gibt an, ob Anfragen, die einen domänenübergreifenden Zugriff ermöglichen, Identitätsinformationen enthalten dürfen.

Access-Control-Allow-Methods: Geben Sie zulässige HTTP-Anfragemethoden an.

Access-Control-Allow-Headers: Geben Sie die zulässigen Anforderungsheaderfelder an.

2. Konfigurieren Sie die Front-End-Anwendung
   Fügen Sie als Nächstes den folgenden Inhalt zum JavaScript-Code der Front-End-Anwendung hinzu:

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}));

Dieser Code verwendet das XMLHttpRequest-Objekt, um eine POST-Anfrage zu initiieren. Der Anforderungs-URI ist http://localhost: 8080/api/save, wo withCredentials Das Attribut ist auf true gesetzt, was angibt, dass die Anforderung Identitätsinformationen enthalten kann.

3. Testen der App
   Zum Schluss starten Sie die App und besuchen die Seite der Frontend-App. In den Entwicklertools des Browsers können Sie sehen, dass der Anforderungsheader Informationen wie Access-Control-Allow-Origin und Access-Control-Allow-Credentials enthält, die die Richtigkeit der Nginx-Konfiguration überprüfen.

Durch die oben genannten Schritte können Sie Nginx verwenden, um die Same-Origin-Richtlinie zum Schutz der Front-End-Sicherheit zu konfigurieren.

3. Zusammenfassung

Die Same-Origin-Richtlinie ist eine wichtige Sicherheitsmaßnahme in der Webentwicklung, und Nginx kann uns bei der Implementierung der Konfiguration der Same-Origin-Richtlinie helfen. In tatsächlichen Anwendungen müssen wir neben der Konfiguration der Same-Origin-Richtlinie auch andere Sicherheitsmaßnahmen wie SSO-Single-Sign-On, CSRF-Prävention, XSS-Prävention usw. verwenden, um die Sicherheit von Webanwendungen zu gewährleisten.

Das obige ist der detaillierte Inhalt vonSo konfigurieren Sie mit Nginx dieselbe Ursprungsrichtlinie zum Schutz der Front-End-Sicherheit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!