๐ https๋ก React ๋ก์ปฌ ํ ์คํ ํ๊ธฐ
๐งโโ๏ธ TL;DR
๋ก์ปฌ์์ https://dev.example.com
์ผ๋ก ํ
์คํ
ํ๊ธฐ
/etc/hosts
์์ ํ์ฌ ip์ ๊ฐ์ง url์ ๋งคํํด์ค๋ค
mkcert
๋ก ๊ฐ์ง url SSL ์ธ์ฆ์๋ฅผ ์์ฑํ๋ค
package.json
์์ npm start
์คํฌ๋ฆฝํธ์ SSL ์ธ์ฆ์ ์์น๋ฅผ ์ค์ ํด์ค๋ค
https://dev.example.com:3000
์ผ๋ก ์ ์ํ๋ค
https://dev.example.com
์ผ๋ก ํ
์คํ
ํ๊ธฐ/etc/hosts
์์ ํ์ฌ ip์ ๊ฐ์ง url์ ๋งคํํด์ค๋คmkcert
๋ก ๊ฐ์ง url SSL ์ธ์ฆ์๋ฅผ ์์ฑํ๋คpackage.json
์์ npm start
์คํฌ๋ฆฝํธ์ SSL ์ธ์ฆ์ ์์น๋ฅผ ์ค์ ํด์ค๋คhttps://dev.example.com:3000
์ผ๋ก ์ ์ํ๋ค2021๋
1์์ ์
๋ฐ์ดํธ๋ Chrome์(๋ฒ์ M88) ๊ฐ์ ๋๋ฉ์ธ์ http
์ฌ์ดํธ์ https
์ฌ์ดํธ๋ฅผ cross-site๋ก ์ทจ๊ธํ๋๋ก ์ ์ฑ
์ด ๋ณ๊ฒฝ๋์๋ค. ์ด๋ฅผ Schemeful same-site
์ ์ฑ
์ด๋ผ๊ณ ํ๋๋ฐ URL์์ http
, https
๋ถ๋ถ์ scheme์ด๋ผ๊ณ ๋ถ๋ฌ์ ๊ทธ๋ ๋ค. (์: https://google.com ์์ https ๋ถ๋ถ์ด scheme)
์ด์ ๋ธ๋ก๊ทธ ํฌ์คํธ์์ httpOnly, secure cookie
๋ฅผ ํตํด ์๋ฒ์ refreshToken
์ ์ฃผ๊ณ ๋ฐ์๋๋ฐ, M88 ์
๋ฐ์ดํธ๋ก ์ธํด ๋ก์ปฌ์์ ํ
์คํ
ํ ๋ ์๋ฒ API ๋๋ฉ์ธ๊ณผ ๊ฐ์ ๋๋ฉ์ธ์ ์ฌ์ฉํ๋๋ผ๋ ์๋ฒ API๊ฐ https
ํ๋กํ ์ฝ์ ์ฌ์ฉํ๋๋ฐ ํด๋ผ์ด์ธํธ ๋ก์ปฌ ํ๊ฒฝ์ http
๋ฉด ์๋ฒ์์ refreshToken
cookie๋ฅผ ์ ๋ฌ๋ฐ์ง ๋ชปํ๋ค๋ ์๋ฌ๊ฐ ๋ฌ๋ค.
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.
๋ก์ปฌ ํ
์คํ
์์ https
๋ฅผ ์ ์ฉํด ๋์ํด๋ณด์.
๐จ ์ฃผ์: ๋ชจ๋ ์์ ๋ mac์ฉ์ผ๋ก ์์ฑ๋์๋ค. windows์ linux์ฉ์
์ฐพ๊ธฐ ์กฐ๊ณฐ ๊ท์ฐฎ์์...์ง๋จ ์ง์ฑ๊ป์ ๋๊ธ๋ก ์๋ ค์ฃผ์๋ฉด ์ถ๊ฐํ๊ฒ ๋ค
๐ ๋ก์ปฌ์์ https
๋ก ํ
์คํ
ํ๊ธฐ
1. /etc/hosts
์์ ํ์ฌ ip์ ๊ฐ์ง url์ ๋งคํํด์ค๋ค
/etc/hosts
์์ ํ์ฌ ip์ ๊ฐ์ง url์ ๋งคํํด์ค๋ค1) ํฐ๋ฏธ๋์์ ifconfig
๋ก ํ์ฌ ip๋ฅผ ์ฐพ์ ์ ์๋ค.
$ ifconfig
ํ์ด๋ผ์ดํธ๋ 10.177.195.111
์ด ip๋ค.
2) /etc/hosts
ํ์ผ๋ก ๋ค์ด๊ฐ ip์ dev.example.com์ ๋งคํํด์ค๊ฑฐ๋ค. ์ด๋ ๊ฒ ์ฒ๋ฆฌํด์ฃผ๋ฉด ๋ธ๋ผ์ฐ์ ์ dev.example.com url์ ์
๋ ฅํด ์ ์ํ๋ คํ ๋ ๋ด ip์์ ๋์๊ฐ๋ ์๋ฒ๋ฅผ ๋์์ค๋ค.
sudo vi /etc/hosts
Password ๋ฌผ์ด๋ณด๋ฉด ์ปดํจํฐ ๋น๋ฒ์ ์ ์ด์ค๋ค. (/etc/hosts ์์ ์ ๋ฃจํธ๋ง ๊ฐ๋ฅํด์ sudo๊ฐ ํ์ํ๋ค)
#
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1 localhost
255.255.255.255 broadcasthost
::1 localhost
// ๐ ์๋ฅผ ์ถ๊ฐํ๋ค
10.177.195.111 dev.example.com
/etc/hosts
ํ์ผ์ ์ด๋ ๊ฒ ์์ ํด์ฃผ๊ณ , esc
ํค ๋๋ฅด๊ณ :x
์
๋ ฅํ๊ณ ์ํฐํ๋ฉด ํ์ผ ์ ์ฅ๋๊ณ vim์์ ๋์จ๋ค.
2. mkcert
๋ก ๊ฐ์ง url SSL ์ธ์ฆ์๋ฅผ ์์ฑํ๋ค
mkcert
๋ ๊ฐ๋ฐํ๊ฒฝ์ SSL ์ธ์ฆ์๋ฅผ ๋ง๋ค์ด์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค. ํฐ๋ฏธ๋์์ brew๋ก ๊ฐ๋จํ๊ฒ ๋ค์ด๋ฐ์ ์ ์๋ค.
brew install mkcert
React ์ดํ๋ฆฌ์ผ์ด์
๋ฃจํธ ํด๋๋ก ๋ค์ด๊ฐ mkcert
๋ฅผ ์คํํ๊ณ example.com SSL ์ธ์ฆ์๋ฅผ ๋ง๋ค์ด์ค๋ค.
$ mkcert -install
$ mkcert "*.example.com" 127.0.0.1 ::1
๊ทธ๋ผ ๋ฃจํธ ํด๋์ _wildcard.example.com-key.pem
_wildcard.example.com.pem
ํ์ผ๋ค์ด ์์ฑ๋๋ค.
3. package.json
์์ npm start
์คํฌ๋ฆฝํธ์ SSL ์ธ์ฆ์ ์์น๋ฅผ ์ค์ ํด์ค๋ค
package.json
scripts์ start๋ฅผ ์์ ํด์ค๋ค.
"scripts": {
...,
"start": "HTTPS=true SSL_CRT_FILE=_wildcard.example.com.pem SSL_KEY_FILE=_wildcard.example.com-key.pem HOST=0.0.0.0 start:react",
...
4. ๋!
ํฐ๋ฏธ๋์์ React ์ฑ์ ์คํํด์ค๋ค.
$ npm start
Chrome ๋ธ๋ผ์ฐ์ ์์ https://dev.example.com:3000
์ผ๋ก ์ ์ํ๋ค. (๋๋ ๋ค๋ฅธ ํฌํธ์ ์ด๋ ธ์ ๊ฒฝ์ฐ 3000 ๋์ ํฌํธ ๋๋ฒ๋ฅผ ๋ฃ์ด์ฃผ๋ฉด ๋๋ค)
โฑ ๋ฒ์ธ: localhost์ https ์ฒ๋ฆฌํ๊ธฐ
ํน์๋ ๊ฐ๋จํ๊ฒ localhost์์๋ง https ์ฒ๋ฆฌ๊ฐ ํ์ํ ๊ฒฝ์ฐ๋ฅผ ์ํด ์ ์ด๋ดค๋ค.
1. mkcert
๋ก localhost SSL ์ธ์ฆ์๋ฅผ ์์ฑํ๋ค
mkcert
๋ ๊ฐ๋ฐํ๊ฒฝ์ SSL ์ธ์ฆ์๋ฅผ ๋ง๋ค์ด์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค. ํฐ๋ฏธ๋์์ brew๋ก ๊ฐ๋จํ๊ฒ ๋ค์ด๋ฐ์ ์ ์๋ค.
brew install mkcert
React ์ดํ๋ฆฌ์ผ์ด์
๋ฃจํธ ํด๋๋ก ๋ค์ด๊ฐ mkcert
๋ฅผ ์คํํ๊ณ localhost SSL ์ธ์ฆ์๋ฅผ ๋ง๋ค์ด์ค๋ค.
$ mkcert -install
$ mkcert localhost 127.0.0.1 ::1
๊ทธ๋ผ ๋ฃจํธ ํด๋์ localhost-key.pem
localhost.pem
ํ์ผ๋ค์ด ์์ฑ๋๋ค.
2. package.json
์์ npm start
์คํฌ๋ฆฝํธ์ SSL ์ธ์ฆ์ ์์น๋ฅผ ์ค์ ํด์ค๋ค
package.json
scripts์ start๋ฅผ ์์ ํด์ค๋ค.
"scripts": {
...,
"start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem start:react",
...
3. ๋!
ํฐ๋ฏธ๋์์ React ์ฑ์ ์คํํด์ค๋ค.
$ npm start
Chrome ๋ธ๋ผ์ฐ์ ์์ https://localhost:3000
์ผ๋ก ์ ์ํ๋ค.
์ฐธ๊ณ ์๋ฃ
๐ parfumes๋์ด ๊ณต์ ํด์ค ๊ธ: kakao tech ๋ธ๋ก๊ทธ ๊ธ "FE๊ฐ๋ฐ์์ ์ฑ์ฅ ์คํ ๋ฆฌ 06 : 2021๋
Chrome์ ์๋ก์ด ๋ณํ โ Schemeful same-site์ ๋์ํ์"
๐ esinx๋์ด ๊ณต์ ํด์ค ๋ผ์ด๋ธ๋ฌ๋ฆฌ: mkcert github ํ์ด์ง
โ๏ธ Flavio Copes ๋ธ๋ก๊ทธ ๊ธ "How to configure HTTPS in a React app on localhost"
โ๏ธ Google web.dev ๊ธ "Schemeful Same-Site"
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐ https๋ก React ๋ก์ปฌ ํ ์คํ ํ๊ธฐ), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@yaytomato/React-์น์ฌ์ดํธ-https๋ก-๋ก์ปฌ-ํ ์คํ ํ๊ธฐ์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค