로컬에서 https 적용하기

문제

회사에서 인증 구조를 개편하기로 하면서 cookie를 사용하게 되었는데 이때 필요한 보안 옵션인 HttpOnly, Secure 옵션을 설정하는 것이 필요했으나 이 두 옵션은 프론트에서 설정할 수 없고 백엔드(서버)에서 설정해야 했습니다.

따라서 로그인 후 쿠키를 만드는 것을 프론트에서 하지 않고 백엔드에 로그인 api 요청을 보냈을 때 쿠키를 만들어 내려주기로 결정했습니다.

하지만 백엔드 서버를 배포해 사용하고 프론트는 로컬 환경 http://localhost:3000 이었기 때문에 samesite 이슈로 인해 쿠키가 생성되지 않는 이슈가 있었습니다.

원인

• This attempt to set a cookie via a Set-Cookie header was blocked because it had the "SameSite=Lax" attribute but came from a cross-site response which was not the response to a top-level navigation.
• This Set-Cookie didn't specify a "SameSite" attribute and was defaulted to "SameSite=Lax", and was blocked because it came from a cross-site response which was not the response to a top-level navigation. This response is considered cross-site because the URL has a different scheme than the current site.

해결

HttpsOnly 옵션 적용, SameSite 이슈 해결을 위해 백엔드 서버와 동일한 도메인을 가지는 로컬 https 서브 도메인을 생성했습니다.

방법(mac)

1. ifconfig 로 ip 확인

2. sudo vim /private/etc/hosts 의 하단에 아래 내용 추가

   ip주소   [생성할 서브도메인 주소]

3. mkcert 설치
   a. brew install mkcert
   b. 프로젝트 루트에서 아래 명령어 입력

   ```bash
   mkcert -install
   mkcert "*.도메인주소" 127.0.0.1 ::1
   ```

   c. .pem 파일 생성
   d. 커스텀 서버 생성(server.js)
   e. package.json에 명령어 입력 후 실행 node server.js

   
   
   

커스텀 서버 생성

const { createServer } = require('https');
const { parse } = require('url');
const fs = require('fs');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const hostname = 'localhost';
const port = 3000;

const app = next({ dev, hostname, port });
const handle = app.getRequestHandler();
const options = {
  key: fs.readFileSync('./_wildcard.[도메인]-key.pem'),
  cert: fs.readFileSync('./_wildcard.[도메인].pem'),
};

app.prepare().then(() => {
  createServer(options, async (req, res) => {
    try {
      const parsedUrl = parse(req.url, true);

      await handle(req, res, parsedUrl);
    } catch (err) {
      console.error('Error occurred handling', req.url, err);
      res.statusCode = 500;
      res.end('internal server error');
    }
  }).listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on http://${hostname}:${port}`);
  });
});

참고 자료

Advanced Features: Custom Server | Next.js

[Nextjs] 로컬 개발 환경(localhost)에 https 적용하기

로컬환경 Samesite 이슈 간단하게 해결(React)

🔐 https로 React 로컬 테스팅하기