CORS 를 아시나요...?

내가 API를 만들고 프론트 하시는 분이 내 API를 사용해서 react에서 사용하시는데 갑자기 오류가 났다. 

프론트 하는 사람들이 처음 만나는 난관이라고 하는데 해결은 백엔드에서 하는거였더라고요..? 물론 해결 방법은 굉장히 간단하지만 CORS가 뭔지 알아야 해결할 수 있으니까 CORS를 알아보도록,,

 

우선 CORS (cross-origin resource sharing)는 SOP의 해결책이라고 볼 수 있다. 근데 왜 오류가 날 때 CORS 라고 뜨는지,,모를일,,,

이지만 궁금해서 찾아봄. 

- > SOP 위반 오류가 맞지만 SOP오류인 것을 더 구체적으로 보고하여 개발자들이 CORS 설정을 통해 해결할 수 있도록 돕는 것이랍니다,,

 

암튼 CORS를 알기 위해서는  SOP를 알아야한다. 

 

SOP는 대부분의 웹브라우저가 준수하는 보안 정책이다. CSRF/XSS등은 막을 수 없지만

• Cross-Origin Data Theft
• Cross-Origin AJAX Requests
• Cross-Origin Cookie Access
• Cross-Origin Frame Access

위와 같은 공격은 막을 수 있다. 

이렇게 막을 수 있는 이유는 SOP는 다른 origin에서 온 자원들을 사용할 수 없게 차단해놓기 때문이다. 

SOP의 특정 HTML Tag는 다른 origin으로부터 온 임베딩을 허용한다. 하지만 데이터 읽는 것은 허용하지 않는다.

 

SOP로 인해 다른 출처에서 온 자원들을 사용할 수 없어서 CORS 오류가 나는 것이다. 

여기서 궁금한 것은 다른 출처인지 어떻게 알 수 있는가? 이다. 

 

동일출처를 판단하는 방법은 ? 

https://www.naver.com/

네이버

예를 들어 이러한 URL이 있다고 하자. 

 

1. https/http는 프로토콜이라고 부른다.

2. www.naver.com  은 호스트라고 부른다.

3. :80 / :443은 포트 번호라고 부른다. 물론 이 포트번호는 생략이 가능하다. 위의 예에서도 생략했다. 

 -> http의 기본 포트 번호: 80, https의 기본 포트 번호 : 443

 

위의 3가지만 동일하면 동일 출처로 판단한다. 

 

 

그렇다면 해결 방법은? 나는 C# .net을 사용해서 오류 해결을 했는데 

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAll",
        builder => builder.AllowAnyOrigin()
                          .AllowAnyHeader()
                          .AllowAnyMethod());
});

app.UseCors("AllowAll");

program.cs에서 해당 설정을 해주면 된다. 

 

물론 allowAll은 굉장히 보안적으로 위험한 방법이라 나중에 실제 배포할 때는 이렇게 하면 큰일난다.. 나는 개발할 때 편하게 해려고 이렇게 설정했다.