HTML5 Canvas의 교차 출처 데이터란?
HTML5 Canvas에 외부 출처(다른 도메인)의 이미지나 영상을 그릴 때는 보안 정책 때문에 제약이 따릅니다. 다른 출처의 리소스를 Canvas에 그리면 해당 Canvas는 '오염(tainted)' 상태가 되어 toDataURL()이나 getImageData() 같은 메서드를 호출할 수 없게 됩니다. 이를 해결하려면 교차 출처 리소스 공유(CORS) 설정을 올바르게 적용해야 합니다.
1. crossorigin 속성 사용하기
교차 출처 데이터를 안전하게 사용하려면 <img>, <video>, <audio> 요소에 crossorigin 속성을 추가합니다. 이 속성은 리소스를 요청할 때 CORS 방식으로 불러오도록 브라우저에 지시합니다.
<img src="..." crossorigin="Anonymous" />
<video src="..." crossorigin="Anonymous"></video>
crossorigin="Anonymous"로 설정하면 쿠키나 인증 정보 없이 익명 방식으로 리소스를 요청하며, 서버가 CORS 헤더를 통해 응답을 허용하는 경우에만 리소스를 사용할 수 있습니다.
2. 서버에서 CORS 헤더 설정하기
클라이언트 측 준비와 함께, 이미지를 제공하는 서버도 HTTP 응답 헤더에 아래와 같은 CORS 헤더를 포함해야 합니다. 이 헤더가 있으면 이미지 응답이 교차 출처 요청을 허용하게 되어 Canvas에서 자유롭게 활용할 수 있습니다.
Access-Control-Allow-Origin: *
보안을 강화하고 싶다면 와일드카드(*) 대신 특정 도메인을 명시하는 것이 좋습니다. 예를 들어 Access-Control-Allow-Origin: https://example.com처럼 지정하면 해당 도메인에서만 리소스에 접근할 수 있습니다.
3. 로컬 개발 환경에서의 해결 방법
로컬 파일 시스템(file:// 프로토콜)에서 테스트할 때 발생하는 교차 출처 문제는 Chrome 실행 시 다음 파라미터를 추가하여 임시로 해결할 수 있습니다.
--allow-file-access-from-files
다만 이 옵션은 보안상 위험할 수 있으므로 개발 및 테스트 목적으로만 사용해야 하며, 실제 운영 환경에서는 반드시 CORS 헤더 기반의 정식 방법을 사용하는 것이 바람직합니다.
정리
HTML5 Canvas에서 교차 출처 데이터를 다룰 때는 ① 리소스 요소에 crossorigin="Anonymous" 속성을 추가하고, ② 서버가 Access-Control-Allow-Origin 헤더를 반환하도록 설정하면 됩니다. 로컬 개발 중이라면 --allow-file-access-from-files 파라미터를 활용할 수 있지만, 운영 환경에서는 CORS 표준 방식을 사용하는 것이 안전합니다.