CORS 이해: JavaScript의 안전한 교차 출처 리소스 공유-JS 튜토리얼-php.cn

CORS 이해: JavaScript의 안전한 교차 출처 리소스 공유

Susan Sarandon

풀어 주다： 2024-12-28 09:22:10

원래의

655명이 탐색했습니다.

Understanding CORS: Secure Cross-Origin Resource Sharing in JavaScript

CORS(교차 출처 리소스 공유)

CORS(Cross-Origin Resource Sharing)는 리소스가 원본이 아닌 다른 도메인(원본)에서 리소스를 요청할 수 있는 방법을 제어하기 위해 웹 브라우저에서 구현하는 보안 기능입니다. 이는 리소스에 대한 무단 액세스를 방지하고 안전한 데이터 교환을 보장하므로 현대 웹 개발, 특히 API 작업 시 매우 중요합니다.

1. 오리진이란 무엇인가요?

원산은 다음 조합으로 정의됩니다.

프로토콜: (예: http, https)
도메인: (예: example.com)
포트: (예::80, :443)

예:

https://example.com과 http://example.com은 출처가 다릅니다.
https://example.com:3000과 https://example.com:4000도 출처가 다릅니다.

2. 동일 출처 정책(SOP)

동일 출처 정책은 웹 페이지의 리소스가 다른 출처의 리소스와 상호 작용할 수 있는 방식을 제한하는 보안 조치입니다.

예: https://example.com에서 로드된 스크립트는 명시적인 허가 없이 https://api.otherdomain.com에서 데이터를 가져올 수 없습니다.

SOP는 보안을 보장하지만 CORS가 필요한 합법적인 교차 출처 요청을 제한합니다.

3. CORS란 무엇인가요?

CORS는 서버가 응답에 특정 HTTP 헤더를 포함하여 리소스에 액세스할 수 있는 사람을 지정할 수 있도록 하는 메커니즘입니다. 이러한 헤더는 브라우저가 클라이언트가 요청된 리소스에 액세스하도록 허용해야 하는지 여부를 나타냅니다.

4. CORS 작동 방식

브라우저는 교차 출처 요청을 할 때 서버의 응답 헤더를 확인하여 요청이 허용되는지 여부를 결정합니다.

주요 단계:

비행 전 요청(선택 사항):

특정 유형의 요청에 대해 브라우저는 실제 요청이 허용되는지 확인하기 위해 초기 OPTIONS 요청을 보냅니다.
서버 응답:

서버는 응답에 적절한 CORS 헤더를 포함합니다.
브라우저 결정:

헤더가 브라우저의 기대와 일치하면 리소스가 공유됩니다. 그렇지 않으면 브라우저가 요청을 차단합니다.

5. 중요한 CORS 헤더

요청 헤더:

원본: 요청의 출처를 지정합니다. 예: 출처: https://example.com

응답 헤더:

Access-Control-Allow-Origin: 리소스에 액세스할 수 있는 원본을 지정합니다.

예: Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: 허용되는 HTTP 메서드를 지정합니다.

예: 액세스 제어 허용 방법: GET, POST, PUT
Access-Control-Allow-Headers: 요청으로 보낼 수 있는 사용자 정의 헤더를 지정합니다.

예: Access-Control-Allow-Headers: 콘텐츠 유형, 승인
Access-Control-Allow-Credentials: 자격 증명(쿠키, HTTP 인증)을 보낼 수 있는지 여부를 나타냅니다.

예: Access-Control-Allow-Credentials: true

6. CORS 요청 유형

간단한 요청:
- 이러한 요청은 맞춤 헤더나 프리플라이트가 없는 간단한 요청(예: GET, POST)입니다.
실행 전 요청:
- 사용자 정의 헤더, 자격 증명 또는 GET 또는 POST 이외의 메서드가 포함된 요청의 경우 브라우저는 실행 전 OPTIONS 요청을 보내 서버가 이를 허용하는지 확인합니다.
인증된 요청:
- 쿠키와 같은 자격 증명을 포함하는 요청에는 Access-Control-Allow-Credentials 헤더가 필요합니다.

7. 예: CORS 실행

클라이언트측 JavaScript:

fetch("https://api.otherdomain.com/data", {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
  },
  credentials: "include", // For sending cookies or credentials
})
  .then(response => response.json())
  .then(data => console.log("Data:", data))
  .catch(error => console.error("Error:", error));

로그인 후 복사

서버 응답 헤더:

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true

로그인 후 복사

8. 서버 측 코드에서 CORS 처리

Express를 사용한 Node.js 예:

const express = require("express");
const cors = require("cors");
const app = express();

// Use the CORS middleware
app.use(cors({
  origin: "https://example.com", // Allow only this origin
  methods: ["GET", "POST"], // Allow these HTTP methods
  credentials: true, // Allow credentials
}));

app.get("/data", (req, res) => {
  res.json({ message: "CORS request successful" });
});

app.listen(3000, () => console.log("Server running on port 3000"));

로그인 후 복사

9. 일반적인 CORS 문제 및 수정 사항

오류: 요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.
- 수정: 서버에 Access-Control-Allow-Origin 헤더가 포함되어 있는지 확인하세요.
오류: 자격 증명 요청에는 'Access-Control-Allow-Credentials'가 true여야 합니다.
- 수정: Access-Control-Allow-Credentials를 true로 설정하고 Access-Control-Allow-Origin이 *가 아닌지 확인하세요.
실행 전 요청 실패:
- 수정: 서버가 필수 CORS 헤더가 포함된 OPTIONS 요청에 올바르게 응답하는지 확인하세요.

10. CORS의 장점

제어된 리소스 공유를 허용하여 보안을 강화합니다.
다양한 도메인 간의 API 통합을 촉진합니다.
애플리케이션 요구 사항을 충족하기 위해 다양한 구성을 지원합니다.

11. CORS의 한계

동적 출처가 필요한 API의 구성이 복잡합니다.
특정 API의 실행 전 요청에 대한 오버헤드가 증가했습니다.
브라우저 시행으로 인해 오류 디버깅이 어려운 경우가 많습니다.

12. 결론

CORS는 웹 애플리케이션에서 안전하고 기능적인 교차 출처 리소스 공유를 위한 필수 기능입니다. 서버의 CORS 헤더를 이해하고 적절하게 구성하면 웹 보안 표준을 준수하면서 도메인 간의 원활하고 안전한 통신을 보장할 수 있습니다.

안녕하세요. 저는 Abhay Singh Kathayat입니다!
저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어와 프레임워크를 사용하여 작업합니다.
제 비즈니스 이메일(kaashshorts28@gmail.com)로 언제든지 연락주세요.

위 내용은 CORS 이해: JavaScript의 안전한 교차 출처 리소스 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!