img 태그의 src 속성과 자동 GET 요청 [Dreamhack csrf-1 참고]

1. 개요

• HTML의 <img> 태그는 웹 페이지에 이미지를 삽입하기 위해 사용되며, src 속성을 통해 불러올 이미지의 URL을 지정한다.
  • 이 과정에서 브라우저는 src 속성에 지정된 URL로 자동으로 GET 요청을 보낸다.

 

---

2. src 속성의 동작 방식

• 사용자가 <img> 태그를 포함한 HTML 문서를 요청하면, 브라우저는 해당 문서를 파싱하면서 img 태그를 발견한다.
  • src 속성에 지정된 URL이 유효하면, 브라우저는 자동으로 해당 URL에 대한 HTTP GET 요청을 보낸다.
  • 웹 서버는 요청을 처리하고, 응답으로 이미지 파일을 반환하면 브라우저가 이를 다운로드하여 페이지에 표시한다.

2.1 예제 코드

<img src="https://example.com/image.jpg" alt="Example Image">

• 위 코드가 실행되면 브라우저는 https://example.com/image.jpg에 대해 자동으로 GET 요청을 보낸다.
• 요청 헤더에는 User-Agent, Referer 등의 정보가 포함될 수 있다.

 

---

3. 자동 GET 요청의 특징

3.1 사용자 입력 없이 자동 요청 발생

• img 태그가 HTML에 포함되면 사용자의 추가적인 입력 없이 즉시 요청이 발생한다.
• 이는 일반적인 리소스 로딩 과정과 동일하며, JavaScript 없이도 작동한다.

 

3.2 CORS 정책 영향

• img 태그의 GET 요청은 Cross-Origin Resource Sharing (CORS) 정책의 영향을 받지 않는다.
• 예를 들어, 다른 도메인의 이미지를 직접 불러올 수 있지만, fetch나 XMLHttpRequest를 사용할 때처럼 CORS 제한이 적용되지 않는다.
• 따라서 외부 서버의 이미지를 쉽게 불러올 수 있지만, JavaScript에서 해당 응답을 직접 읽을 수는 없다.

 

3.3 HTTP 캐싱 적용

• 브라우저는 이미지 요청 시 캐싱 정책을 따른다.
• 서버에서 Cache-Control, ETag 등의 응답 헤더를 설정하면 브라우저가 이미지를 캐시하여 불필요한 네트워크 요청을 방지한다.

 

---

4. 보안 및 악용 사례

4.1 CSRF (Cross-Site Request Forgery)

• img 태그의 src 속성을 악용하여 공격자가 특정 사이트로 비정상적인 요청을 보낼 수 있다.
  • 예를 들어, 사용자의 로그인 세션을 이용하여 악성 요청을 보내는 방식이 가능하다.
  • 서버에서 요청을 차단하려면 Referer 검사, CSRF 토큰 검증 등의 보안 조치를 적용해야 한다.

 

4.1.1 방어법

• 요청 시 POST 요청을 요구하거나 CSRF 토큰을 검증해야 한다.
  • GET 요청만으로 중요한 작업(예: 계정 삭제, 설정 변경 등)이 수행되지 않도록 해야 한다.