<div id="readability-page-1" class="page"><div><p data-ke-size="size16">CORS와 웹 보안과 관련된 용어로 서버 어플리케이션을 개발하다 보면 관련된 설정을 만나 볼 수 있습니다. CORS는 서로 다른 Host(Domain)에서 접근했을 때의 보안 문제와 관련된 설정입니다. 데이터 엔지니어로 전향한 후에 오랜만에 서버 개발을 하려고 했더니 개념이 정확히 기억도 안 나고 k8s의 Ingress → Load Balancer → Deployment로 배포했더니 Client Host가 바뀌어서 <span data-token-index="1">ALLOWED_HOSTS</span> 관련 설정에서 삽질하고… CORS, CSRF, 인증… 오랜만에 보니 머리아파서 넘겼던 부분들을 정리해보려고 합니다.</p>

<h2 data-ke-size="size26"><b><b>CORS (Cross-Origin Resource Sharing)</b></b></h2>
<p data-ke-size="size16">CORS는 다른 출처(origin)의 웹 페이지가 해당 출처의 자원에 접근할 수 있도록 하는 메커니즘입니다. 기본적으로 웹 브라우저는 동일 출처 정책(Same-Origin Policy)을 따르기 때문에 다른 출처의 자원에 접근하는 것이 제한되게 하는데 이를 제한합니다. 하지만, Front와 Backend Application은 보통 다른 Host를 갖게 되기 때문에 HTTP 통신 시 <b>서버</b>에서 관련 Header의 값을 설정해야 합니다.</p>
<p data-ke-size="size16">서버 측에서 HTTP 응답 헤더에 다음과 같은 내용을 포함시키면 CORS 문제를 해결할 수 있습니다.</p>
<pre><code>Access-Control-Allow-Origin: 통신할 Front Host
</code></pre>
<p data-ke-size="size16">모든 Host에서 요청을 허용하려면 아래와 처럼 HTTP 응답 헤어데 다음과 같은 내용을 포함시키면 모든 도메인에서 요청을 허용할 수 있습니다. → 하지만, 보안적으로 좋지 않기 때문에 추천 드리지 않습니다.</p>
<pre><code>Access-Control-Allow-Origin: *
</code></pre>

<h2 data-ke-size="size26"><b>응답 헤더에 Access-Control-Allow-Origin 추가하기</b></h2>
<p data-ke-size="size16"><b>1. 직접 Middleware를 추가해서 해당 Header를 추가하기 (추천하지 않음.)</b></p>
<p data-ke-size="size16">직접 middleware class를 정의한 후 setting.py에 MIDDLEWARE에 추가해주는 방법 있습니다.</p>
<p data-ke-size="size16"><a href="http://xn--www-oh3mj2qw2au57e9lb.doosikbae.com/">대략적으로 www.doosikbae.com이라는</a> 도메인에서 요청을 허용하려면 아래처럼 응답 HEADER를 변경할 수 있습니다.</p>
<pre><code>class SimpleCorsMiddleware:
    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        response = self.get_response(request)

        if request.method == 'OPTIONS' and "HTTP_ACCESS_CONTROL_REQUEST_METHOD" in request.META:
            response = self.preflight_response(request)
            return response

        response["Access-Control-Allow-Origin"] = "&lt;https://www.doosikbae.com&gt;"
        return response

    def preflight_response(self, request):
        response = HttpResponse()
        response["Access-Control-Allow-Origin"] = "&lt;https://www.doosikbae.com&gt;"
        response["Access-Control-Allow-Methods"] = "GET,POST,OPTIONS"
        response["Access-Control-Allow-Headers"] = "content-type,accept"
        response["Access-Control-Max-Age"] = "1800"  # 30 minutes cached
        return response

# settings
MIDDLEWARE = [
    ...
    'middleware.SimpleCorsMiddleware',
    ...
]
</code></pre>

<p data-ke-size="size16"><b><b>2. django-cors-headers 이용하기 (추천)</b></b></p>
<p data-ke-size="size16">Python의 가장 큰 장점인 풍부한 라이브러리 생태계를 활용하는 것이 보안 및 생산성 측면에서는 추천하는 방법입니다.</p>
<p data-ke-size="size16">해당 라이브러리를 활용하는 방법은 <a href="https://pypi.org/project/django-cors-headers/">공식 문서</a>에 정말 잘 설명이 되어 있기 때문에 생략하겠습니다.</p>
<p data-ke-size="size16">한 가지만 이야기해 보면 모든 도메인의 요청을 허용하지 말고 허용할 도메인을 설정하는 것을 추천드립니다.</p>
<pre><code>CORS_ALLOW_ALL_ORIGINS = True # 추천 하지 않음.

CORS_ALLOWED_ORIGINS = [
    "&lt;https://blog.doosikbae.com&gt;", # 추천
]
</code></pre>

<h3 data-ke-size="size23"><b>CORS 간단하게 브라우저 콘솔에서 테스트해 보기</b></h3>
<pre><code>fetch('test할 사이트')
.then(response =&gt; response.json())
.then(data =&gt; console.log(data))
.catch(error =&gt; console.error('Error:', error));
</code></pre>

<p data-ke-size="size16">CORS 관련 설정 테스트</p>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="1790" data-origin-height="628"><span data-url="https://blog.kakaocdn.net/dn/NVvKm/btszqepdXya/lAt9KH145rM92uKgMNbcf1/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/NVvKm/btszqepdXya/lAt9KH145rM92uKgMNbcf1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="1790" data-origin-height="628"></span></figure>



<p data-ke-size="size16">다음에는 CSRF Token관련 글 k8s에 Django를 배포하면서 겪었던 어려움등에 대해서 포스팅 해보겠습니다.</p></div></div>

DB for the ordinary traveler

CORS와 웹 보안과 관련된 용어로 서버 어플리케이션을 개발하다 보면 관련된 설정을 만나 볼 수 있습니다. CORS는 서로 다른 Host(Domain)에서 접근했을 때의 보안 문제와 관련된 설정입니다. 데이터 엔지니어로 전향한 후에 오랜만에 서버 개발을 하려고 했더니 개념이 정확히 기억도 안 나고 k8s의 Ingress → Load Balancer → Deployment로 배포했더니 Client Host가 바뀌어서 ALLOWED_HOSTS 관련 설정에서 삽질하고… CORS, CSRF, 인증… 오랜만에 보니 머리아파서 넘겼던 부분들을 정리해보려고 합니다.
 
CORS (Cross-Origin Resource Sharing)
CORS는 다른 출처(origin)의 웹 페이지가 해당 출처의 자원에 접근할 수 있도록 하는 메커니즘입니다. 기본적으로 웹 브라우저는 동일 출처 정책(Same-Origin Policy)을 따르기 때문에 다른 출처의 자원에 접근하는 것이 제한되게 하는데 이를 제한합니다. 하지만, Front와 Backend Application은 보통 다른 Host를 갖게 되기 때문에 HTTP 통신 시 서버에서 관련 Header의 값을 설정해야 합니다.
서버 측에서 HTTP 응답 헤더에 다음과 같은 내용을 포함시키면 CORS 문제를 해결할 수 있습니다.
Access-Control-Allow-Origin: 통신할 Front Host
모든 Host에서 요청을 허용하려면 아래와 처럼 HTTP 응답 헤어데 다음과 같은 내용을 포함시키면 모든 도메인에서 요청을 허용할 수 있습니다. → 하지만, 보안적으로 좋지 않기 때문에 추천 드리지 않습니다.
Access-Control-Allow-Origin: *
 
응답 헤더에 Access-Control-Allow-Origin 추가하기
1. 직접 Middleware를 추가해서 해당 Header를 추가하기 (추천하지 않음.)
직접 middleware class를 정의한 후 setting.py에 MIDDLEWARE에 추가해주는 방법 있습니다.
대략적으로 www.doosikbae.com이라는 도메인에서 요청을 허용하려면 아래처럼 응답 HEADER를 변경할 수 있습니다.
class SimpleCorsMiddleware:
    def __init__(self, get_response):
        self.get_response = get_response
    def __call__(self, request):
        response = self.get_response(request)
        if request.method == 'OPTIONS' and "HTTP_ACCESS_CONTROL_REQUEST_METHOD" in request.META:
            response = self.preflight_response(request)
            return response
        response["Access-Control-Allow-Origin"] = "<https://www.doosikbae.com>"
        return response
    def preflight_response(self, request):
        response = HttpResponse()
        response["Access-Control-Allow-Origin"] = "<https://www.doosikbae.com>"
        response["Access-Control-Allow-Methods"] = "GET,POST,OPTIONS"
        response["Access-Control-Allow-Headers"] = "content-type,accept"
        response["Access-Control-Max-Age"] = "1800"  # 30 minutes cached
        return response
# settings
MIDDLEWARE = [
    ...
    'middleware.SimpleCorsMiddleware',
    ...
]
 
2. django-cors-headers 이용하기 (추천)
Python의 가장 큰 장점인 풍부한 라이브러리 생태계를 활용하는 것이 보안 및 생산성 측면에서는 추천하는 방법입니다.
해당 라이브러리를 활용하는 방법은 공식 문서에 정말 잘 설명이 되어 있기 때문에 생략하겠습니다.
한 가지만 이야기해 보면 모든 도메인의 요청을 허용하지 말고 허용할 도메인을 설정하는 것을 추천드립니다.
CORS_ALLOW_ALL_ORIGINS = True # 추천 하지 않음.
CORS_ALLOWED_ORIGINS = [
    "<https://blog.doosikbae.com>", # 추천
]
 
CORS 간단하게 브라우저 콘솔에서 테스트해 보기
fetch('test할 사이트')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
 
CORS 관련 설정 테스트
 
 
다음에는 CSRF Token관련 글 k8s에 Django를 배포하면서 겪었던 어려움등에 대해서 포스팅 해보겠습니다.

Django CORS 관련 설정하기 / django-cors-headers

댓글