웹 개발을 하다 보면, 자바스크립트를 사용하여 다른 도메인의 데이터를 가져와야 할 때가 있습니다. 하지만 보안 상의 이유로 동일 출처 정책(Same Origin Policy)에 의해 다른 도메인 간의 리소스 공유가 제한됩니다. 이러한 제약을 우회하고자, Cross-Origin Resource Sharing (CORS)를 사용하여 다른 도메인의 타임라인을 제어하는 방법에 대해 알아보겠습니다.

1. CORS란?

CORS는 웹 애플리케이션에서 다른 도메인의 리소스에 접근하기 위한 메커니즘을 제공하는 방식입니다. 일반적으로 웹 애플리케이션은 동일한 출처에서 온 리소스에만 접근할 수 있습니다. 하지만, 서로 다른 출처에 있는 리소스에 접근하기 위해서는 서버 측에서 CORS 정책을 설정해야 합니다.

2. CORS 사용하기

CORS를 사용하여 타임라인을 제어하기 위해서는 서버 측과 클라이언트 측에서 각각 설정을 해주어야 합니다.

2.1 서버 측 설정

서버 측에서는 응답에 Access-Control-Allow-Origin 헤더를 설정하여 허용할 도메인을 명시해야 합니다. 이 헤더는 클라이언트 측에서 요청을 보낼 때, 해당 도메인이 허용된 도메인인지 확인하는 역할을 수행합니다.

예를 들어, 서버 측 코드에서 아래와 같이 헤더를 설정할 수 있습니다.

response.setHeader("Access-Control-Allow-Origin", "https://your-domain.com");

2.2 클라이언트 측 설정

클라이언트에서는 JavaScript를 사용하여 다른 도메인의 타임라인을 제어할 수 있습니다. fetch 함수를 사용하여 AJAX 요청을 보낼 때, mode 옵션을 설정하여 CORS 요청을 보낼 수 있습니다.

fetch('https://other-domain.com/timeline', {
  method: 'GET',
  mode: 'cors',
})
.then(response => response.json())
.then(data => {
  // 타임라인 데이터 처리
})
.catch(error => {
  console.error('Error:', error);
});

위의 예제 코드에서 mode 옵션은 ‘cors’로 설정됩니다. 이를 통해 서버로의 요청이 CORS 요청임을 명시적으로 나타내게 됩니다.

3. 보안 고려 사항

CORS를 사용하여 다른 도메인의 타임라인을 제어할 때, 보안에 주의해야 합니다. 모든 도메인에 대해 CORS를 허용하는 것은 보안상 취약할 수 있으므로, 필요한 도메인만 허용하는 것이 좋습니다.

또한, 서버 측에서는 불필요한 요청을 막기 위해 요청을 검증하는 로직을 추가해야 합니다. 예를 들어, 요청 헤더에 인증 토큰을 포함하여 검증하거나, 허용된 도메인 목록을 확인하여 허용된 도메인만 응답하도록 구현할 수 있습니다.

4. 결론

CORS를 사용하여 자바스크립트에서 다른 도메인의 타임라인을 제어할 수 있습니다. 서버 측에서는 Access-Control-Allow-Origin 헤더를 설정하여 허용할 도메인을 명시해야 하며, 클라이언트 측에서는 mode 옵션을 ‘cors’로 설정하여 CORS 요청을 보내야 합니다. 보안 고려 사항에 주의하여 CORS를 사용하는 것이 좋습니다.

게시글에 사용된 이미지는 Creative Commons 라이선스를 따르며, 출처는 아래와 같습니다.

Image: Freepik

#CORS #자바스크립트