크롬 익스텐션의 CORS

CORS 란?

CORS 은 Cross-Origin Resource Sharing 의 축약어로 다른 출처의 리소스 공유라는 뜻이다.

 

더 정확히 하고자 MDN 의 내용을 인용하면 "교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다." 라고 한다.

 

일반적으로 크롬 브라우저에서는 Xhr 나 fetch api 를 통해 서버에서 데이터를 주고 받을 수 있지만 같은 출처가 아니라면 Same policy 정책에 의해 제한된다. Content Script(백그라운드 스크립트 또는 <script>를 의미함) 는 삽입된 웹의 출처로 요청을 시작하기 때문에 Content Script 에서도 똑같이 적용이 된다.

크롬 익스텐션에서의 CORS

하지만 크롬 익스텐션에서는 그렇게 엄격한 제한이 존재하지 않는다. 그냥 연결을 허용하고 싶은 사이트의 url 패턴 또는 url 에 대한 허용을 요청하기만 한다면, CORS 를 허용해준다.

// manifest.json V3
{    
    ...
    "host_permissions":[
        "https://www.kimhyun5u.com/"
    ],
    ...
}

위와 같이 manifest.json 을 추가해주면 된다.

 

참조

- https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

- https://developer.chrome.com/docs/extensions/mv3/xhr/