도메인이 다른 프론트엔드와 백엔드 쿠키 공유

개요

현재 내 상황은 위 이미지와 같이 프론트엔드와 백엔드가 분리되어있는 상태다.
중요한 점은 로그인시 JWT 를 발급한다는 것인데 JWT 가 쿠키에 저장되어 다른 도메인에선 사용할 수 없다.

도메인 통일하기

다행히도 쿠키는 동일한 하위도메인에 한하여 공유할 수 있다.

https://front.myproject.com/
https://backend.myproject.com/

도메인을 위처럼 설정하고 백엔드에서 쿠키를 발급할 때 Domain 을 myproject.com 으로 설정한다면 front 에서도 해당 쿠키를 사용할 수 있게된다.

DuckDNS
위 사이트에서 무료 도메인 2개를 발급받는다.
그리고 EC2 에 접근할 수 있도록 current ip 를 설정해준다.

  
// 기존 코드
Cookie cookie = new Cookie("Authorization", token);
cookie.setMaxAge(3600);
cookie.setHttpOnly(true);
cookie.setPath("/");
cookie.setDomain(".duckdns.org");
cookie.setSecure(true);
cookie.samesite("none"); // 없는 메서드
response.addCookie(cookie);

  
String cookieString = "Authorization="+token+";" +
        "Max-Age=3600;" +
        "HttpOnly;" +
        "Path=/;" +
        "Domain=.duckdns.org;" +
        "Secure;" +
        "SameSite=None";

response.addHeader("Set-Cookie", cookieString);

Domain 을 통일하기 위해선 Domain 과 SameSite = None 를 설정해줘야한다.
또, SameSite 를 None 으로하면 반드시 Secure = true 로 해야한다. 안하면 브라우저에서 거절한다.

기존 코드에 Domain, Secure, SameSite 를 설정하고자 했는데, Servlet 의 Cookie 표준에는 SameSite 가 없다.
그래서 Cookie 를 직접 만들어 header 에 추가했다.

SSL 발급

Cookie 에 Secure = true 로 설정했다.
이 말은 HTTPS 즉 SSL 을 사용한다는 의미다.
SSL 을 발급받자.

SSLForFree
위 사이트에서 회원가입 하면 로그인되며 Dashboard 로 이동하게된다.

Dashboard 에서 New Certificate 클릭

HTTPS 를 적용할 도메인의 이름을 입력하고 다음단계로 넘어간다.

유효기간은 90일로 선택한다.

애드온은 유료기능이다 생략하고 넘어간다.<br.

검증(Validation)을 진행하기 전에, 우리는 인증서(Certificate)를 위해 연락처 정보와 CSR을 자동으로 생성할 것입니다. 직접 정보를 입력하거나 기존 CSR을 붙여넣으려면, 아래의 체크박스를 해제하세요.

실제 서비스를 위한것이 아니므로 자동 생성으로 한다.

이 단계에서는 SSL 인증서에 사용할 암호화 유형을 선택하게 됩니다. CSR에서 키 크기(key size)는 CSR을 서명하는 데 사용되는 RSA 암호화 키의 길이를 의미합니다.

기본적으로 RSA 2048이 선택되어 있으며, 이는 호환성과 성능 측면에서 가장 널리 사용되는 옵션입니다. 만약 ECC 암호화를 선호한다면, 이전 단계에서 직접 생성한 CSR을 붙여넣으세요 (OpenSSL이나 기타 도구를 사용해 CSR을 생성할 수 있습니다).

무료 플랜을 선택한다.

File Upload 방식의 진행과정은 다음과 같다.

SSL For Free 사이트에서 제공하는 Auth File 을 다운받는다.
SSL 을 발급받을때 입력했던 도메인/.well-known/pki-validation/ 경로에서 Auth File 이 출력될 수 있도록 한다.
Next Step 버튼을 누른다.
SSL For Free 에서 해당 도메인/.well-known/pki-validation/ 경로에 직접 들어가 확인한다.
성공하면 해당 도메인이 내가 관리하는 도메인이라는걸 확인받게된다.

Vue 기준으로 정적페이지는 public 경로에서 서빙할 수 있다.
위 사진을 참고해서 /public/.well-known/pki-validation/ 디렉토리를 만들고 다운받은 Auth File 을 넣는다.

local 에서 위 파일이 잘 나오는지 테스트한다.
잘 나오면 빌드 후 서버에 배포한다.

다음 단계를 진행하면 SSL 발급 사이트에서 unichat.duckdns.org/.well-known/pki-validation/AuthFile.txt 파일에 접근을 시도해보고 잘 나오는걸 확인하면 인증이 완료된다.

인증완료!

SSL 적용

인증이 완료되면 SSL 파일을 다운로드 받을 수 있다. 난 vue 가 nginx 를 통해 서빙되므로 nginx 를 선택했다.
Spring 이라면 tomcat 을 선택하거나, 자신이 사용하는것에 맞게 선택하면된다.
다운을 받았다면 홈페이지에서 제공하는 튜토리얼을 따라가면 된다.
nginx 튜토리얼
tomcat 튜토리얼

nginx에 SSL 파일 업로드

SSL 파일을 서버로 올린다. 현재 AWS EC2 를 사용하고 있으므로 EC2 에 올리는 방법을 설명한다.
빌드 파일에 포함시켜 CI/CD 로 올리면 편하지만 SSL 파일이 노출되는 것을 막기위해 다른 방법을 사용한다.

EC2 파일 업로드

scp -i [키페어] [업로드할파일경로] [계정명]@[퍼블릭 DNS]:[저장할경로]

scp -i UnichatServerKey.pem private.key ubuntu@ec2-13-125-206-120.ap-northeast-2.compute.amazonaws.com:/home/ubuntu

로컬 터미널에서 scp 명령어를 수행하여 옮긴다. 편의를 위해 SSL 파일과 키페어 파일을 한곳에 두고 진행했다.
키페어는 EC2 생성할 때 만들었을것이다.

퍼블릭 DNS 는 EC2 -> 인스턴스 -> 세부정보 -> 퍼블릭 DNS 에서 확인이 가능하다.
(민감 정보가 어떤건지 몰라서 다 가렸다.)

nginx

사진19
nginx 가 설치된 server 에 다운받은 파일을 업로드한다. 나는 바로 위에서 했다.

사진20
사진21

cat ca_bundle.crt >> certificate.crt 명령어로 두 파일을 합친다.
(혹시 모르니 백업본을 만드는건 필수)

사진22
사진23
Edit Virtual Hosts File 나의 virtual hosts file 위치는 /etc/nginx/nginx.conf 다.

http {

        ##
        # Basic Settings
        ##

        sendfile on;
        tcp_nopush on;
        types_hash_max_size 2048;
        # server_tokens off;

        # server_names_hash_bucket_size 64;
        # server_name_in_redirect off;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        ##
        # SSL Settings
        ##

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
        ssl_prefer_server_ciphers on;

        ##
        # Logging Settings
        ##

        access_log /var/log/nginx/access.log;

        ##
        # Gzip Settings
        ##

        gzip on;

        # gzip_vary on;
        # gzip_proxied any;
        # gzip_comp_level 6;
        # gzip_buffers 16 8k;
        # gzip_http_version 1.1;
        # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

        ##
        # Virtual Host Configs
        ##

        # 여기 보세요
        server {
          이런식으로 작성
        }
        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;
}

해당 파일을 열어보면 http 항목이 있다. 여기에 server { } 를 작성해주면 된다.
근데 잘 보면 제일 아래 /etc/nginx/sites-enabled/*; 가 있다.

cd sites-available
sudo touch unichat
sudo vi unichat

server {

    listen               443 ssl;
    
    
    ssl                  on;
    ssl_certificate      /etc/nginx/ssl/certificate.crt; 
    ssl_certificate_key  /etc/nginx/ssl/private.key;
    
    
    server_name  unichat.duckdns.org;
    access_log   /var/log/nginx/nginx.vhost.access.log;
    error_log    /var/log/nginx/nginx.vhost.error.log;
    location     / {
    root         /var/www/html/dist;
    index        index.html;
    try_files    $uri $uri/ /index.html;
    }

}

튜토리얼에 샘플로 제공되는 파일을 나에게 맞게 수정해주면 된다.
ssl 인증서 경로를 변경한 이유는 이미 /etc/ssl 에 어떤 파일이 있어서 새로운 경로(/etc/nginx/ssl)를 만들어서 지정했다.
server_name, location 등을 프로젝트에 맞게 작성한다.

cd ../sites-enabled/
sudo ln -s /etc/nginx/sites-available/unichat /etc/nginx/sites-enabled/
ls -l 로 확인

만약 sites-available 에 파일을 만들지 않고, nginx.conf 에 바로 server { }를 작성했다면 심볼릭 링크를 만드는 것은 하지않는다.

cd ~
sudo mkdir /etc/nginx/ssl/
sudo cp certificate.crt /etc/nginx/ssl/
sudo cp private.key /etc/nginx/ssl/

/home/ubuntu 로 가져온 인증서 파일들을 server { } 블록에 작성한 경로로 옮긴다.

sudo systemctl restart nginx

모든 설정이 완료되었다. nginx 를 재시작하고 https://unichat.duckdns.org 로 접속을 시도해본다. 접속이 잘 되면 성공한것이다.
근데 아마 접속이 안될것이다. EC2 의 인바운드 규칙 편집으로 가서 HTTPS(443) 포트를 열어줘야한다.
그럼 이제 진짜 접속이 될 것이다.

References 프론트와 백엔드 분리했을 때 쿠키 공유 안되는 이유
쿠키 요청 범위를 설정하는 법. Domain, Path | HTTP 쿠키 #2
웹 브라우저의 Cookie 헤더 다루기
무료 SSL 인증서 발급받아 HTTPS 적용하기
AWS EC2와 로컬 간의 파일 전송

도메인이 다른 프론트엔드와 백엔드 쿠키 공유

개요

도메인 통일하기

SSL 발급

SSL 적용

nginx에 SSL 파일 업로드

EC2 파일 업로드

nginx

Further Reading

이미지 파일 저장경로를 S3 로 변경

JWT 적용

AWS 환경변수 설정