HTML 코드 crossorigin과 anonymous

crossorigin="anonymous" 속성은 HTML 요소에서 외부 리소스를 불러올 때 사용되는 속성입니다. 이 속성은 주로 <script>, <img>, <link>, <video>, <audio> 등의 태그에 사용되며, CORS(Cross-Origin Resource Sharing) 정책을 따르는 리소스 요청에 대한 설정을 명시합니다. crossorigin="anonymous" 속성의 주된 목적은 보안과 관련된 것으로, 외부 도메인에서 리소스를 가져올 때 사용자의 데이터를 보호하는 데 도움이 됩니다.

crossorigin="anonymous"

crossorigin="anonymous"의 의미

• 크로스 오리진 요청
  • 웹 페이지가 현재 페이지와 다른 출처(도메인, 프로토콜 또는 포트가 다름)의 리소스를 요청할 때, 이를 크로스 오리진(cross-origin) 요청이라고 합니다.
  • 이러한 요청은 보안상의 이유로 기본적으로 제한됩니다.
• 익명으로 처리
  • anonymous는 리소스 요청 시 사용자 자격증명(예: 쿠키, HTTP 인증 정보 등)을 포함하지 않겠다는 것을 의미합니다.
  • 즉, 리소스를 요청할 때 해당 리소스와 관련된 사용자의 세션 정보나 인증 정보를 전송하지 않습니다.
• CORS 정책 준수
  • crossorigin="anonymous" 속성을 사용하면, 리소스를 제공하는 서버 측에서도 해당 리소스에 대한 CORS 정책을 설정해야 합니다.
  • 서버는 Access-Control-Allow-Origin 헤더를 통해 해당 리소스에 대한 접근을 허용하는 출처를 지정할 수 있으며, * 를 사용하여 모든 출처에서의 접근을 허용할 수도 있습니다.

<!-- 이미지 리소스에 crossorigin="anonymous" 속성 적용 -->
<img src="https://example.com/image.png" crossorigin="anonymous">

<!-- 외부 스크립트에 crossorigin="anonymous" 속성 적용 -->
<script src="https://example.com/script.js" crossorigin="anonymous"></script>

 

이 속성을 사용하면 웹 애플리케이션의 보안을 강화할 수 있으며, 특히 외부 리소스를 사용할 때 중요한 역할을 합니다. 다만, 모든 외부 서버가 CORS를 지원하는 것은 아니므로, 외부 리소스를 사용하기 전에 해당 서버의 CORS 정책을 확인해야 합니다.