HTML5의 crossorigin(교차 출처) 속성이란 무엇일까?

HTML5 crossorigin 속성의 정의

네, 존재합니다. HTML5 공식 명세에서는 crossorigin 속성을 다음과 같이 정의하고 있습니다.

"crossorigin 속성은 CORS 설정 속성(CORS settings attribute)입니다. 이 속성의 목적은 교차 출처 접근을 허용하는 서드파티 사이트의 이미지를 canvas와 함께 사용할 수 있도록 하는 것입니다."

즉, crossorigin 속성을 사용하면 외부 도메인에서 불러온 이미지 등의 리소스를 <canvas> 요소에서 안전하게 활용할 수 있습니다. 이 속성이 없으면 교차 출처 리소스를 canvas에 그릴 때 해당 canvas는 '오염(tainted)' 상태가 되어 getImageData()나 toDataURL() 같은 메서드 호출이 차단됩니다.

JavaScript 오류 로깅 문제 해결에 활용하기

crossorigin 속성은 스크립트 태그에서도 유용하게 사용됩니다. 외부 CDN에서 로드한 JavaScript 파일에서 오류가 발생하면, 기본적으로 브라우저는 보안 정책에 따라 "Script error."라는 모호한 메시지만 전달합니다. 하지만 crossorigin="anonymous" 속성을 추가하면 상세한 오류 정보를 받을 수 있습니다.

브라우저 내부적으로는 다음과 같은 방식으로 출처를 검사하여 오류 정보 노출 여부를 결정합니다.

if (securityOrigin()->canRequest(targetUrl)) {
    msg = myError;
    line = myLineNumber;
    source = sourceURL;
} else {
    msg = "Error!";
    source = String();
    line = 0;
}

위 코드에서 볼 수 있듯이, 요청 대상 URL에 대한 접근 권한이 있는 경우에는 실제 오류 메시지, 줄 번호, 소스 URL이 전달되지만, 그렇지 않은 경우에는 일반화된 "Error!" 메시지만 노출됩니다.

사용 예시

<script src="https://cdn.example.com/app.js" crossorigin="anonymous"></script>
<img src="https://other-site.com/image.png" crossorigin="anonymous">

crossorigin 속성 값으로는 anonymous(쿠키나 인증 정보 없이 요청) 또는 use-credentials(쿠키 및 인증 정보 포함 요청)를 지정할 수 있습니다. 단, 서버 측에서도 적절한 CORS 헤더(Access-Control-Allow-Origin)를 응답해야 정상적으로 동작한다는 점을 기억하세요.