프런트엔드 보안을 보호하기 위해 Nginx를 사용하여 동일 원본 정책을 구성하는 방법

프런트 엔드 애플리케이션의 복잡성이 계속 증가함에 따라 웹 애플리케이션의 보안 문제가 점점 더 중요해지고 있습니다. 동일 출처 정책은 크로스 사이트 스크립팅 공격과 같은 보안 문제를 방지하기 위한 중요한 보안 조치입니다. Nginx는 강력한 웹 서버 소프트웨어입니다. 이 기사에서는 Nginx를 사용하여 프런트 엔드 보안을 보호하기 위해 동일 출처 정책을 구성하는 방법을 소개합니다.

1. 동일 출처 정책

동일 출처 정책은 웹 개발의 보안 원칙으로, 한 도메인 이름의 문서나 스크립트가 다른 도메인 이름의 리소스와 상호 작용하는 방식을 제한하는 데 사용됩니다. 상동성은 프로토콜, 도메인 이름, 포트가 모두 동일한 것을 의미하며, 이를 "완전히 일관성"이라고 합니다.

동일 출처 정책으로 웹사이트 간 악의적인 공격을 예방할 수 있습니다. 예를 들어, 해커는 악성 JavaScript 프로그램을 작성하여 일부 웹 페이지에 삽입할 수 있습니다. 사용자가 이러한 웹 페이지를 방문하면 JavaScript 프로그램이 사용자 컴퓨터에서 중요한 정보를 훔칠 수 있습니다.

2. Nginx의 동일 출처 구성

동일 출처 정책을 구성하는 방법 중 하나는 Nginx의 역방향 프록시 기능을 사용하는 것입니다. 역방향 프록시는 클라이언트와 서버 간의 연결을 프록시하고 다른 소스의 요청을 격리하는 서버 측에 위치한 프록시 서버입니다.

다음은 Nginx를 사용하여 프런트 엔드 보안을 보호하기 위해 동일한 원본 정책을 구성하는 방법을 소개합니다.

1. Nginx 구성
   먼저 Nginx 구성 파일에 다음 콘텐츠를 추가해야 합니다.

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

}

이 구성 파일은 다음 정보를 제공합니다.

Access-Control-Allow-Origin: 리소스에 액세스할 수 있는 외부 도메인 URI를 지정하며 *로 설정할 수 있습니다.

Access-Control-Allow-Credentials: 도메인 간 액세스를 허용하는 요청에 ID 정보 전달이 허용되는지 여부를 지정합니다.

Access-Control-Allow-Methods: 허용되는 HTTP 요청 방법을 지정합니다.

Access-Control-Allow-Headers: 허용되는 요청 헤더 필드를 지정합니다.

2. 프런트 엔드 애플리케이션 구성
   다음으로 프런트 엔드 애플리케이션의 JavaScript 코드에 다음 콘텐츠를 추가합니다.

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

이 코드는 XMLHttpRequest 객체를 사용하여 POST 요청을 시작합니다. 8080/api/save, 여기서 withCredentials 속성은 true로 설정되어 요청이 ID 정보를 전달할 수 있음을 나타냅니다.

3. 앱 테스트
   마지막으로 앱을 실행하고 프런트 엔드 앱 페이지를 방문하세요. 브라우저의 개발자 도구에서 요청 헤더에 Nginx 구성의 정확성을 확인하는 Access-Control-Allow-Origin 및 Access-Control-Allow-Credentials와 같은 정보가 포함되어 있음을 확인할 수 있습니다.

위 단계를 통해 Nginx를 사용하여 동일 출처 정책을 구성하여 프런트엔드 보안을 보호할 수 있습니다.

3. 요약

동일 출처 정책은 웹 개발에 있어 중요한 보안 조치이며, Nginx는 동일 출처 정책을 구성하는 데 도움을 줄 수 있습니다. 실제 애플리케이션에서는 동일 출처 정책을 구성하는 것 외에도 SSO 싱글 사인온, CSRF 방지, XSS 방지 등과 같은 다른 보안 조치를 사용하여 웹 애플리케이션의 보안을 보장해야 합니다.

위 내용은 프런트엔드 보안을 보호하기 위해 Nginx를 사용하여 동일 원본 정책을 구성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!