{"time":1747229377181,"blocks":[{"id":"ROA50E0i6-","type":"warning","data":{"title":"Next.js 기반의 프론트엔드 애플리케이션이 Nginx를 통해 백엔드 API와 통신하는 구조에서, 로그인 후 세션 쿠키가 예상대로 설정되지 않는 문제가 발생했습니다. 아키텍처 구상부터 6개월 가까이 진행해 왔던 프로젝트에 3일 가까이 나를 붙잡고,,,, 피폐하게 만들었던 녀석에 대해서 해결 방법 과정을 공유하려 합니다.","message":""}},{"id":"tXJbDZykvo","type":"paragraph","data":{"text":"이전 버전의 개발 블로그 였던 '부엉이 개발자' 사이트는 Front, Backend 서버를 활용한 시스템으로 비록 서버는 단일 RaspberryPi4 에서 돌아가지만, 도메인은 각각 다르게 가져가도록 구성한 시스템 입니다. "}},{"id":"8MjY8Gitk0","type":"paragraph","data":{"text":"개발 당시 \"Nginx proxy_cookie_header not working\" 해당 에러가 발생했었고, 해당 이슈를 잡기위해서 각 서버간 다른 도메인을 사용하는 시스템에서는 어떻게 Cookie 를 서로 공유하는 지에 대한 글 입니다."}},{"id":"8zARtblndM","type":"delimiter","data":{}},{"id":"QgjI-q8g2n","type":"customHeader","data":{"text":"환경 구성 "}},{"id":"IsdrsjpQbl","type":"paragraph","data":{"text":"개발 블로그의 프론트엔드와 백엔드는 아래처럼 구성되어 있고, Nginx 리버스 프록시를 통해 backend.owl-dev.me 로 요청을 보내는 구조였습니다. "}},{"id":"EkNRM2KmNL","type":"image","data":{"caption":"","withBorder":true,"withBackground":false,"stretched":true,"file":{"url":"https://backend.owl-dev.me/images/owl-dev.me.png"}}},{"id":"yz1kaD80oa","type":"header","data":{"text":"프론트엔드 ","level":3}},{"id":"7Ubbw3wwPl","type":"list","data":{"style":"unordered","meta":{},"items":[{"content":"프레임워크: Next.js","meta":{},"items":[]},{"content":"도메인: owl-dev.me","meta":{},"items":[]},{"content":"SSL 인증서: Let's Encrypt 를 통해 발금된 `owl-dev.me` 인증서 사용 ","meta":{},"items":[]}]}},{"id":"TYwDHi6Of4","type":"header","data":{"text":"백엔드 ","level":3}},{"id":"_dFbXJ-3WB","type":"list","data":{"style":"unordered","meta":{},"items":[{"content":"프레임워크: .NET Core","meta":{},"items":[]},{"content":"도메인: backend.owl-dev.me","meta":{},"items":[]},{"content":"SSL 인증서: Let's Encrypt 를 통해 발금된 `backend.owl-dev.me` 인증서 사용 ","meta":{},"items":[]}]}},{"id":"0YhEkODuMe","type":"delimiter","data":{}},{"id":"7gJWDai2DH","type":"customHeader","data":{"text":"이슈 "}},{"id":"Iz5LRebR_S","type":"paragraph","data":{"text":"API 를 통해 Front -> Backend 로 Login 요청을 보내면 Backend 에서 Secure Cookie 를 생성 후 다시 Front 서버로 보내주지만, 받아온 쿠키의 Domain Name 이 Client 브라우저의 도메인과 동일하지 않아서, Next.js 의 SSR 시에 해당 쿠키를 저장하거나 가져오지를 못하는 이슈가 발생 했습니다."}},{"id":"CPJ_m_uz_M","type":"paragraph","data":{"text":"즉, 백엔드에서 전달된 쿠키의 도메인이 원래 발급된 백엔드 도메인으로 고정되어 있어, '프론트엔드에서 쿠키를 인식하지 못하는 상황' 이었습니다. "}},{"id":"YQt2R1BBBd","type":"image","data":{"caption":"","withBorder":false,"withBackground":false,"stretched":false,"file":{"url":"https://backend.owl-dev.me/images/Cookie_Issue1.png"}}},{"id":"FfxRHKTX9G","type":"header","data":{"text":"Nginx 구성 ","level":3}},{"id":"RU5qoZNgUd","type":"list","data":{"style":"unordered","meta":{},"items":[{"content":"Nginx 구성은 각 프론트와 백엔드에서 사용하는 도메인 이름으로 SSL 인증서를 발급 받았습니다.","meta":{},"items":[]},{"content":"그리고 'ssl_certificate' , 'ssl_certificate_key' 파라미터에 각각 인증서 경로를 명시함으로써, 클라이언트 -> Nginx (미들웨어) -> 내부 서버 (Next.js 또는 Spring) 를 통해 암호화를 이루어지도록 했습니다. ","meta":{},"items":[]}]}},{"id":"WIoitpLwgO","type":"code","data":{"code":"server {\n # SSL configuration\n #\n listen 443 ssl http2 default_server;\n listen [::]:443 ssl http2 default_server;\n client_max_body_size 10M;\n\n ssl_certificate \"/etc/letsencrypt/live/www.owl-dev.me/fullchain.pem\";\n ssl_certificate_key \"/etc/letsencrypt/live/www.owl-dev.me/privkey.pem\";\n ssl_dhparam \"/etc/nginx/ssl/dhparams.pem\";\n\n add_header Strict-Transport-Security \"max-age=31536000\";\n\n # Add index.php to the list if you are using PHP\n\n server_name owl.dev.me www.owl-dev.me;\n\n location / {\n proxy_set_header Host $host;\n proxy_pass http://localhost:3000;\n } \n}\n\nserver {\n # SSL configuration\n #\n listen 443 ssl http2;\n listen [::]:443 ssl http2 ;\n client_max_body_size 10M;\n\n ssl_certificate \"/etc/letsencrypt/live/backend.owl-dev.me/fullchain.pem\";\n ssl_certificate_key \"/etc/letsencrypt/live/backend.owl-dev.me/privkey.pem\";\n ssl_dhparam \"/etc/nginx/ssl/dhparams.pem\";\n\n server_name backend.owl-dev.me;\n\n location / {\n proxy_cookie_domain ~^(.*)$ \"$1; Domain=backend.owl-dev.me\";\n proxy_set_header Host www.owl-dev.me;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n proxy_set_header X-Forwarded-Proto $scheme;\n proxy_set_header Upgrade $http_upgrade;\n proxy_set_header Connection \"upgrade\";\n proxy_set_header X-Real-IP $remote_addr;\n proxy_pass https://localhost:5001;\n }\n}\n"}},{"id":"1ZK2oqQnHy","type":"delimiter","data":{}},{"id":"MYrkuvkDjZ","type":"customHeader","data":{"text":"What i tried"}},{"id":"SeH9xOi9Qi","type":"header","data":{"text":"1. Nginx 매뉴얼 탐색 ","level":3}},{"id":"DKuZlOw7Ic","type":"paragraph","data":{"text":"처음에 쿠키 관련 이슈가, 받아온 Cookie 의 domain 이 달라서 발생한 것임을 알기까지도 시간이 많이 소요되었으나, 해당 이슈를 해결하기 위해 거의 Nginx 의 모든 StackOverflow 글 및 Nginx 가이드 문서를 찾아본 것으로 기억합니다."}},{"id":"XcUmNS9Har","type":"paragraph","data":{"text":"이 중 Nginx 의 proxy_cookie_domain 이 녀석을 건드리면 proxy_pass 하는 과정에서 쿠키의 도메인을 변경할 수 있었을 것으로 기대했었지만,,, 아래 여러 시도 및 구글링에서도 아무런 변화가 없었습니다. (이때부터 정신이 피폐해짐이 느껴졌지 아마..)"}},{"id":"U__CtH3Ptz","type":"code","data":{"code":"server {\n listen 443 ssl http2;\n server_name backend.owl-dev.me;\n\n ssl_certificate \"/etc/letsencrypt/live/backend.owl-dev.me/fullchain.pem\";\n ssl_certificate_key \"/etc/letsencrypt/live/backend.owl-dev.me/privkey.pem\";\n\n location / {\n proxy_pass https://localhost:5001;\n\n # 명시적 도메인 변경 방법\n proxy_cookie_domain backend.owl-dev.me owl-dev.me;\n proxy_cookie_domain backend.owl-dev.me www.owl-dev.me;\n\n # 정규식 활용 도메인 변경 방법\n proxy_cookie_domain ~^(.*)$ \"$1; Domain=backend.owl-dev.me\";\n }\n}"}},{"id":"skN4Ac1TKI","type":"header","data":{"text":"2. Community 문의","level":3}},{"id":"0s5YQYeRBO","type":"paragraph","data":{"text":"결국 직접 Stackoverflow 형님들의 도움을 받고자 글을 올리게 되었고, Comment 에서 영양가 있는 내용을 확인하게 되었습니다. "}},{"id":"DoBRHqtDRC","type":"warning","data":{"title":"하위 도메인의 쿠키를 상위 도메인 이름으로 설정할 수 없습니다.","message":""}},{"id":"r4WkdGWxz8","type":"image","data":{"caption":"","withBorder":false,"withBackground":false,"stretched":false,"file":{"url":"https://backend.owl-dev.me/images/domain_issue.png"}}},{"id":"m3ewm7vZj8","type":"customLink","data":{"url":"https://stackoverflow.com/questions/72087524/nginx-proxy-cookie-header-not-working-domain-sub-domain ","title":"cookies - Nginx proxy_cookie_header not working (domain<-> sub domain) - Stack Overflow","description":"i'm exhausted about this issue.. for 2days... I believe that there are someone who can catch the bug.. \nNowadays i'm make a website. it totally ok in local system.. but this error happend. when rel...","image":"https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=73d79a89bded"}},{"id":"ciCLXRM7lj","type":"header","data":{"text":"3. Domain 에 대한 고찰 ","level":3}},{"id":"HY20WfHvGS","type":"paragraph","data":{"text":"기존에 제가 알던 지식은, 도메인은 단순히 네임서버에서 IP를 매핑해 주는 것으로 간혹 HTTPS 를 통신할 때 필요한 것으로 알았지만, 1개의 도메인으로 여러 서브 도메인을 생성할 수 있었고, 여러 다른 문의 글에서 서브 도메인 간의 쿠키 전송에 대한 문의가 있었던 것을 확앤했습니다."}},{"id":"CyJ6rNbyGV","type":"paragraph","data":{"text":"사실 삼성 반도체 쪽 여러 시스템도 SSO 로그인 인증을 위해 여러 서브 도메인을 활용하고 있었고, 직접 다웠던 시스템도 AD ( Active Directory ) 전환 및 HTTPS 전환까지 도맡아 한 상황에서, 이런 글을 보니 뭔가 머릿속을 스쳐 지나가는 느낌이 들었습니다."}},{"id":"2fH-ZHZiEJ","type":"list","data":{"style":"unordered","meta":{},"items":[{"content":"이건 Nginx 가 아니라 Backend 쪽 소스를 건드려야 해!!!!","meta":{},"items":[]}]}},{"id":"TChhISbMFy","type":"delimiter","data":{}},{"id":"N6d0Kbcxue","type":"customHeader","data":{"text":"Solved"}},{"id":"JSjQPD5p4M","type":"paragraph","data":{"text":"Microsoft 에서 제공해주는 MSDN 문서를 보면 아래와 같이 ASP.NET 앱간의 인증 쿠키 공유에 대한 글이 있습니다. "}},{"id":"YZe-PHxeG3","type":"paragraph","data":{"text":"간략하게 요약하면, 메인 도메인과 서브 도메인 간에는 기본적으로 쿠키 공유가 가능하다 의미였고. 아래 이미지와 같이 메인 도메인과 contoso.com 이라면 앞에 '.' 을 부텨줌으로서 서브도메인 간에 쿠키 공유가 가능하다는 얘기입니다."}},{"id":"nQoxV4pU2q","type":"image","data":{"caption":"","withBorder":true,"withBackground":false,"stretched":true,"file":{"url":"https://backend.owl-dev.me/images/ShareCookie(2).png"}}},{"id":"FpHiYzkTzF","type":"customLink","data":{"url":"https://learn.microsoft.com/en-us/aspnet/core/security/cookie-sharing?view=aspnetcore-6.0","title":"Share authentication cookies among ASP.NET apps | Microsoft Learn","description":"Learn how to share authentication cookies among ASP.NET 4.x and ASP.NET Core apps.","image":"https://learn.microsoft.com/dotnet/media/dotnet-logo.png"}},{"id":"yI0hAbP6ah","type":"header","data":{"text":"Backend 코드 수정 ","level":3}},{"id":"zPW34OoeJA","type":"paragraph","data":{"text":"결국 Nginx 의 `proxy_cookie_domain` 지시어로는 문제 해결이 되지 않았고, 백엔드에서 직접 쿠키 설정을 변경하여 문제를 해결했습니다. "}},{"id":"Dt1wilxq4w","type":"list","data":{"style":"unordered","meta":{},"items":[{"content":".Net core Startup.cs 인증 부분 options.Cookie.Domain 추가 ","meta":{},"items":[]}]}},{"id":"rfhRKJhrsa","type":"code","data":{"code":"// Cookie Setting\nbuilder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)\n .AddCookie(CookieAuthenticationDefaults.AuthenticationScheme, options =>\n {\n options.Cookie.Name = \"UserLoginCookie\";\n options.SlidingExpiration = true;\n options.ExpireTimeSpan = new TimeSpan(6, 0, 0); // 6 hour\n options.Cookie.HttpOnly = true;\n options.Cookie.SameSite = SameSiteMode.None;\n options.Cookie.Domain = \".owl-dev.me\";\n });"}},{"id":"BkXLOt4x9w","type":"list","data":{"style":"unordered","meta":{},"items":[{"content":"Spring 이라면 마찬가지로 아래처럼 처리할 수 있습니다. ","meta":{},"items":[]}]}},{"id":"Qw2bdk_rek","type":"code","data":{"code":"options.Cookie.SameSite = SameSiteMode.None;\n"}},{"id":"dRIBWR-ONV","type":"header","data":{"text":"정상적으로 동작하는 Cookie ","level":2}},{"id":"NF-pREM9_0","type":"image","data":{"caption":"","withBorder":true,"withBackground":false,"stretched":true,"file":{"url":"https://backend.owl-dev.me/images/Cookie_Issue2.png"}}},{"id":"AxjNo_dzDK","type":"delimiter","data":{}},{"id":"EzumDjrX8r","type":"customHeader","data":{"text":"정리"}},{"id":"4snWt6YqOA","type":"paragraph","data":{"text":"Cookie 는 속성으로 아래 4가지가 존재합니다. 이 4가지는 쿠키가 SSR 환경 (서버 측 렌더링) 이나 CSR 환경 (클라이언트 측 요청) 에서 정상적으로 동작하기 위해 상호간에 매우 정교하게 일치해야 합니다. 처음 제가 웹 사이트를 만들었을 당시에는 Secure 속성으로 구현되었었고, Secure 쿠키는 브라우저 보안 정책에 따라 도메인 기준으로 제한되었습니다. "}},{"id":"zQE3R-hKeZ","type":"paragraph","data":{"text":"제 경우에는 아래 2개 설정을 했었지만, 'options.Cookie.Domain' 을 생략했었는데요, 도메인 명시 생략 시, `쿠키는 응답을 보낸 정확한 호스트 이름 (FQDN)` 에만 바인딩 됩니다. 그래서 'None' 으로 설정했음에도, 타 도메인 간 전송이 불가능 했었습니다."}},{"id":"jsMNT2fA0R","type":"code","data":{"code":"options.Cookie.HttpOnly = true;\noptions.Cookie.SameSite = SameSiteMode.None;\n// options.Cookie.Domain = \".owl-dev.me\";"}},{"id":"TVAe5TcE6y","type":"table","data":{"withHeadings":false,"stretched":false,"content":[["속성","설명","주의사항"],["Domain","쿠키가 전송될 도메인 범위 지정","클라이언트 도메인과 정확히 맞거나 상위 도메인으로 설정해야함"],["Secure","HTTPS 에서만 쿠키 전송 허용","HTTPS 연결일 때만 사용해야 하며, SameSite=None 이면 필수 "],["SameSite","쿠키의 크로스 사이트 전송 허용 여부","None 은 타 도메인 전송 허용, 이 경우 Secure 필수"],["credentials","JS fetch/axios 요청 시 쿠키 포함 여부 (withCredentials)","이걸 true로 하지 않으면 JS에서는 쿠키 안 보내짐"]]}},{"id":"u15haNDLFs","type":"paragraph","data":{"text":"추가로 SameSite 속성은 쿠키의 크로스 사이트요청 (다른 도메인에서 API 호출)을 브라우저가 허용할지 여부를 결정하는 중요한 보안정책입니다. "}},{"id":"HtRXzsrDcI","type":"table","data":{"withHeadings":false,"stretched":false,"content":[["SameSite 값","설명","크로스 도메인 요청","사용 예시"],["Lax (기본값)","자동 GET 요청만 허용 POST 나 JS 요청을 차단","제한적 허용 (GET만)","일반 사이트 접ㄱ근, 로그인 후 리디렉션 등"],["Strict","모든 크로스 사이트 요청 차단","완전 차단","보안이 매우 민감한 사이트"],["None","모든 요청 허용 (크로스 도메인 포함) 단, Secure 필수","허용","프론트-백엔드 도메인이 다른 SPA, OAuth 등"],["(생략 또는 Unspecified)","브라우저에 따라 Lax로 해석됨구버전 브라우저는 아예 포함 안함","동작 불명확 (브라우저 정책 의존)","사용 지양"]]}}],"version":"2.31.0-rc.7"}

Tag List