[Web] CORS의 '동일 출처 원칙 정책 위반(Same-orgin policy)' 에러 대응

정말 오랜만에 개인 프로젝트를 켰는데 화면단과 서버가 연결되지 않았다.

내 흐린 기억 속 분명 정상적으로 돌았는데 (...)

Access to XMLHttpRequest at 'http://localhost:8081/api/diary/selectAll' 
from origin 'http://localhost:8080' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

열심히 구글링을 해보니 SOP 정책을 위반하여 그렇다고 한다. 

SOP 정책이란 무엇일까 ㅡ.ㅡ

---

■ SOP (Same-origin policy)

SOP는 '동일 출처 정책'의 약자로, 보안 메커니즘이다.

동일 출처(origin)란, 두 개의 URL이 있을 때, 프로토콜 + 호스트 + 포트가 동일한 경우를 말한다

즉, 동일 출처인 녀석들끼리만 연결을 시킨다는 정책이므로 API를 호출 시, 이를 위반하면 데이터 전송을 막는다.

해당 정책은 (데이터 송수신 시, 해커가 개입할 수 있는 여지가 있으므로) 보완상의 이유로 만들어졌다.

 

⚠️ 
1. https://www.domain.com:5000 에서  'https://'가 프로토콜,  'www.domain.com'이 호스트, '5000'이 포트이다.
2. 막는 것은 서버가 아닌 브라우저고, same-policy도 브라우저의 보안 정책이다.
3  몇 가지 상황에서는 SOP을 적용하지 않는다.   
    HTML 내부 호출은 SOP 정책을 무시한다. XHR (js에서의 요청)만 SOP이 걸린다.   
    <script src...> , <link...> 등의 태그에서 타 서버 데이터를 불러와도 아무런 문제가 없었던 것이 이 때문이다.

엥 근데, API 서버는 당연히 동일 호스트가 아닐 확률이 높은데 어쩌란 말이냐

이럴 때 쓰는 것이 바로 CORS 플러그인이다. 

그럼 CORS란 무엇일까

---

■ CORS (Cross-Origin Resource Sharing)

CORS는 '교차 출처 자원 공유'의 약자이다. 동일 출처가 아닌 Cross Origin에서 오는 데이터도 허용해 준다는 의미이다.

CORS의 기본적 원리는 이렇다.

✅
 클라이언트가 다른 origin으로 요청을 보냄 ▶  보낼 때 HTTP 요청 'Origin' 헤더에 자신의 origin 설정 ▶  서버로부터 응답받을 때, 'Access-Control-Allow-Origin' 헤더에 자신의 origin이 있는지 확인

* 이때, Origin 헤더에 와일드카드(*)를 쓰면 모든 origin을 허용한다는 의미가 된다.

응? 근데 HTTP 요청을 보낼 때, Origin이라는 헤더가 있었던가

사실 브라우저는 요청을 보내기 전, '예비 요청'이라는 것을 보낸 뒤 '본 요청'을 보낸다. (100%는 아니고, 대부분)

그것을 Preflight라고 부르며, 이 때 HTTP 메소드가 GET/POST가 아닌 OPTION이라는 요청을 사용한다.

본 요청을 xhr 라고 칭하고, 예비 요청을 preflight라고 칭한다.

⚠️
 1. 외에 '단순 요청'이라는 것도 있는데 '예비 요청'을 생략하고 바로 '본 요청'을 보내는 것이다.
 몇 가지 조건을 만족해야만 한다.
 2. '인증된 요청'이라는 것도 있다.
 이는 자격 인증 정보를 실어 요청하는 경우로, 쿠키나 토큰 값을 보낼 때를 의미한다. 약간 방식이 다르다.

* 대부분의 API 요청이 Preflight이므로, 여기서는 생략생략

---

예 그래서 해결하려면 어떻게 해야하는데요

 

■ 클라이언트단에서 해결

 

 1. 브라우저 플러그인 사용

크롬의 경우 'Allow CORS: Access-Control-Allow-Origin'이라 하여 해당 문제를 해결해 주는 확장 프로그램이 있다.

로컬 환경에서 잠깐 테스트할 때 편할 듯

 

2. http-proxy-middleware 사용

 마찬가지로, 로컬인 경우에 한정하여 해당 라이브러리를 통해 클라이언트 단에서 해결할 수 있다.

 

 2. 프록시 사용하기

프록시(proxy)는 클라이언트와 서버 사이의 대리자 역할을 해주는 중계 서버이다.

모든 출처를 허용하는 프록시 서버를 가운데에 끼우면 된다. SOP을 우회하는 방법.

표면 상으로는, 클라이언트의 IP로 요청이 날아가는 것처럼 보이지만 프록시를 거친다.

다만, 무료 프록시 서버는 API 요청 횟수에 제한이 있으므로 이것 또한 테스트 용도로 몇 번 사용하는 것이 좋다.

아니면 직접 프록시 서버를 구현해야 한다.

 

아래 예시는 프록스 서버 중 하나인 cors proxy app 프록시 서버이다.

<script src='https://cdnjs.cloudflare.com/ajax/libs/axios/1.1.3/axios.min.js'></script>
<script>
    axios({
        url: 'https://cors-proxy.org/api/',
        method: 'get',
        headers: {
            'cors-proxy-url' : 'https://localhost:8000/' //사용할 URL로 변경
        },
    }).then((res) => {
        console.log(res.data);
    })
</script>

---

■ 서버단에서 해결

 

정석적인 해결 방안은 서버에서 셋팅하는 것이다.  방법은 총 3가지이다.

 

 1. Controller에 @CrossOrigin 어노테이션 사용하기

@RequestMapping("api/test")
@RestController
@RequiredArgsConstructor
@CrossOrigin
public class TestController {
   ...
}

 

2. WebConfig 파일 생성

 (1) 첫번째 방법

  WebMvcConfigurer을 상속받는 WebConfig 클래스를 만들어 다음과 같이 셋팅해준다. 

  클래스를 이렇게 따로 만들거면, @Configuration 어노테이션을 붙여준다.

  allowedOrigins에 응답을 전해줄 origin을 적으면 된다.

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8080/");
    }
}

 

 (2) 두번째 방법

  @SpringBootApplication 어노테이션이 붙은 main 파일에 @Bean 으로 등록해주어도 된다.

package com.eaproj.one;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;
import org.springframework.context.annotation.Bean;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@SpringBootApplication
public class Application extends SpringBootServletInitializer {

    protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
        return application.sources(Application.class);
    }

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }


    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedOrigins("http://localhost:8080/");
            }
        };
    }
}

 

 3. CorsFilter를 만들어 Access-Control-Allow-Origin 헤더 세팅

 Filter를 만들어준다. 

response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");

이 부분에서 origin을 * 로 바꾸면

특정 origin이 아닌, 모든 origin에게 응답할 수 있는데 당연히 보안상 취약할 수 밖에 없다.

package com.eaproj.one.config;

import org.springframework.core.Ordered;
import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;

        response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods","*");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers",
                "Origin, X-Requested-With, Content-Type, Accept, Authorization");

        if("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        }else {
            chain.doFilter(req, res);
        }
    }

    @Override
    public void destroy() {

    }
}

 

 

▶  글을 작성하는 도중, CORS의 문제가 아니라는 것을 알았다. 해당 컨트롤러에는 @CorssOrigin이 잘 붙어있었는데, 컨트롤러 자체를 찾지 못하니 SOP 정책 위반이라는 에러가 뜬 것

 

  패키지를 옮기면서 파일을 정리한 적이 있었는데 그때 컨트롤러 관련 어노테이션이 빠진 듯 함

  그래 원래 됐었다니까 .. TT 그래도 더 자세하게 공부하게 되어서 좋았다.

 

난 Controller 마다 어노테이션을 붙이는 것은 비효율적인 것 같아서 CorsFilter를 만들었다.

 3가지 방법 다 테스트 해보았고 모두 정상 동작한다. 

 

끝-!!