설명
외부 API 엔드포인트에 http:를 사용하면 요청이 실제로 전송되는 환경에서 TLS가 제공하는 기밀성, 무결성, 서버 인증을 받을 수 없습니다. 네트워크 경로에 접근할 수 있는 공격자는 요청과 응답을 읽거나 변조할 수 있습니다. 다만 HTTPS 페이지에서 실행되는 Axios 요청은 일반적으로 브라우저의 혼합 콘텐츠 정책에 의해 차단되므로, 이 경우에는 평문 전송 대신 요청 실패가 발생합니다.
요청과 응답의 민감 정보, 그리고 코드가 실행되는 브라우저나 서버 환경을 함께 검토해야 합니다.
잠재적 영향
- 요청이 평문으로 전송되면 자격 증명, 토큰, 개인정보 등 포함된 데이터가 노출될 수 있습니다.
- 공격자가 응답을 변조하여 잘못된 데이터나 악성 콘텐츠를 애플리케이션에 전달할 수 있습니다.
- HTTPS 페이지에서는 혼합 콘텐츠 차단으로 API 요청이 실패하여 기능 장애가 발생할 수 있습니다.
해결 방법
- 엔드포인트를
https:로 변경하고 API가 HTTPS에서 같은 리소스를 제공하는지 확인하세요. API 요청을 먼저 HTTP로 보낸 뒤 리다이렉트하는 방식에 의존하지 마세요. - 서버에 유효한 인증서와 최신 TLS 설정을 구성하고, API의 평문 HTTP 요청은 거부하세요. 브라우저용 HTTPS 출처에는 HSTS를 적용하세요.
- 로컬 개발 주소는 환경별 구성에만 두고 운영 번들에 포함되지 않도록 검증하세요. 인증서 검증이나 브라우저의 혼합 콘텐츠 보호 기능을 비활성화하지 마세요.
예시
변경 전
tsx
import axios from 'axios';
axios.post('http://api.example.com/login', credentials);
const api = axios.create({
baseURL: 'http://api.example.com/v1',
});
변경 후
tsx
import axios from 'axios';
axios.post('https://api.example.com/login', credentials);
const api = axios.create({
baseURL: 'https://api.example.com/v1',
});
설명:
- 변경 전: 비보안 컨텍스트나 브라우저 외 런타임에서는 요청과 응답이 평문 HTTP로 전송될 수 있습니다. HTTPS 페이지에서는 브라우저가 요청을 차단할 수 있습니다.
- 변경 후: API가 올바르게 구성된 HTTPS를 제공하면 TLS가 전송 중 기밀성, 무결성, 서버 인증을 보호합니다. 애플리케이션 코드의 URL 변경과 함께 서버의 TLS 설정도 검증해야 합니다.