crossorigin 속성이란 무엇인가?
HTML5에서 도입된 crossorigin 속성은 외부 도메인(교차 출처)에서 불러온 리소스를 안전하게 처리하기 위한 CORS 설정 속성(CORS settings attribute)입니다. 주로 <img>, <script>, <link> 등의 요소와 함께 사용되며, 특히 캔버스(canvas)에서 외부 이미지를 다룰 때 필수적인 역할을 합니다.
공식 명세의 정의
W3C/WHATWG 공식 명세는 crossorigin 속성을 다음과 같이 설명하고 있습니다.
The crossorigin attribute is a CORS settings attribute.
Its purpose is to allow images from third-party sites that allow
cross-origin access to be used with canvas.
즉, 이 속성의 핵심 목적은 교차 출처 접근을 허용하는 서드파티 사이트의 이미지를 canvas에서 활용할 수 있도록 하는 것입니다.
CORS 헤더와 함께 동작하는 원리
crossorigin 속성은 서버 측의 CORS(Cross-Origin Resource Sharing) 헤더와 결합하여 작동합니다. 두 요소가 올바르게 구성되면, 외부 출처(origin)에서 로드한 이미지가 마치 현재 출처에서 로드된 것처럼 취급되어 canvas에 그대로 그릴 수 있습니다.
만약 이 속성 없이 외부 이미지를 canvas에 사용하면, 브라우저는 해당 캔버스를 '오염된(tainted)' 상태로 표시하며 toDataURL()이나 getImageData() 같은 메서드 호출 시 보안 오류(SecurityError)가 발생합니다.
crossorigin 속성의 값
- anonymous – 자격 증명(쿠키, 인증 정보) 없이 교차 출처 요청을 보냅니다. 기본값입니다.
- use-credentials – 쿠키 및 인증 정보를 포함하여 교차 출처 요청을 보냅니다.
사용 예시는 다음과 같습니다.
<img src="https://example.com/image.png" crossorigin="anonymous">
자바스크립트 오류 로깅에 활용하기
crossorigin 속성은 외부 스크립트에서 발생하는 자바스크립트 오류를 상세히 로깅할 때도 유용합니다. 일반적으로 교차 출처 스크립트의 오류는 보안상의 이유로 "Script error."로만 표시되지만, 이 속성을 적용하면 실제 오류 메시지와 줄 번호를 확인할 수 있습니다.
if (securityOrigin()->canRequest(targetUrl)) {
msg = myError;
line = myLineNumber;
source = sourceURL;
} else {
msg = "Error!";
source = String();
line = 0;
}위 코드에서 볼 수 있듯이, 대상 URL에 대한 요청 권한이 있는 경우에는 실제 오류 정보를 그대로 전달하고, 그렇지 않은 경우에는 최소한의 정보만 노출하여 보안을 유지합니다.
정리
crossorigin 속성은 외부 리소스를 안전하게 활용하기 위한 필수 도구입니다. canvas 조작, 폰트 로딩, 스크립트 오류 추적 등 교차 출처 리소스를 다루는 모든 상황에서 CORS 헤더와 함께 올바르게 설정하면 보안 문제 없이 원활한 개발이 가능합니다.