2020 재 논의 크로스 오 버

도 메 인 을 뛰 어 넘 는 이 화 제 는 이미 여러 해 동안 이 야 기 를 나 누 었 는데, 왜 지금 또 이 문 제 를 이야기 하려 고 합 니까?더 이상 언급 할 필요 가 없 었 지만 Chrome 86 버 전 이후 에 많은 제한 이 추가 되 었 기 때문에 우 리 는 다시 언급 할 수 밖 에 없 었 다.
CORS
전단 개발 에 있어 서 크로스 도 메 인 은 보통 두 가지 방식 이 있 는데 하 나 는 서버 에서 nginx 설정 을 수정 하고 response headers 에 CORS 설정 을 추가 하 는 것 이 고 다른 하 나 는 로 컬 에 대 리 를 설치 하 는 것 이다.첫 번 째 얘 기 부터 하 자.
원래 nginx 에 추가 CORS 하 는 것 은 일반적인 조작 으로 더 이상 할 수 없 을 정도 로 간단 하 다.

    location /somewhere/ {
        if ($request_method = OPTIONS) {
            add_header Access-Control-Allow-Origin "$http_origin";
            add_header Access-Control-Allow-Credentials "true";
            add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
            add_header Access-Control-Allow-Headers "sitessubid,Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since";
            add_header Content-Length 0;
            add_header Content-Type text/plain;
            return 200;
        }
        if ($request_method = POST) {
            add_header Access-Control-Allow-Origin "$http_origin";
            add_header Access-Control-Allow-Credentials "true";
        }
    }

그리고 우 리 는 모든 axios 또는 fetch 요청 에 withCredentials 를 추가 하면 자동 으로 해당 서버 cookies 에 대한 요청 을 함께 보 낼 수 있 습 니 다.
그러나 문 제 는 Chrome 86 버 전 이후 Chrome 서버 에서 보 낸 모든 cookie 에 게 결 성 된 SameSite 속성 을 강제로 추가 하고 이 속성 을 Lax 로 강제로 설정 하여 우리 withCredentials 가 역할 을 하지 못 하고 도 메 인 을 뛰 어 넘 는 경우 cookies 에 도 취 할 수 없 으 며 보 내 는 것 은 말 할 것 도 없다.여기 서 나 는 더 이상 SameSite 의 원 리 를 상세 하 게 설명 하고 싶 지 않다. 관심 있 는 것 은 가서 알 수 있다 여기, 이곳.
이것 은 우리 가 반드시 서버 에서 시작 하여 nginx 하 발 cookies 시의 SameSite 속성 을 수정 해 야 한다.
SameSite 와 secure
수정 SameSite 은 두 가지 상황 으로 나 뉜 다. 만약 에 네가 낮은 버 전의 nginx 을 사용한다 면 문 제 를 완전히 해결 할 수 없 을 것 이다. 현재 유일 하 게 수정 할 수 있 는 변통 방법 은 수정 cookie 의 path 을 사용 하여 그 뒤에 SameSite 속성 을 가지 게 하 는 것 이다. 예 를 들 어 다음 과 같다.

proxy_cookie_path ~(.*) "$1; SameSite=none";

여기 서 실제 수 정 된 것 은 cookie 리 의 path 값 이지 만 ; 이 추가 되 었 기 때문에 브 라 우 저 는 ; 이후 의 새로운 속성 이 라 고 생각 하기 때문에 이 SameSite 설정 도 받 아들 일 것 이다.
그러나 이것 만 으로 는 부족 하 다. Chrome 또한 SameSite 값 이 none 이면 secure 속성 을 설정 해 야 한다. 즉, 모든 하 발 cookie 도 메 인 이름 에 https 협 의 를 사용 해 야 하기 때문에 최종 적 으로 수 정 된 결 과 는 다음 과 같다.

proxy_cookie_path ~(.*) "$1; SameSite=none; secure";

그러나 이런 상황 은 cookie 이 path 로 끝 나 는 것 과 유사 한 상황 을 해결 할 수 밖 에 없다. 상류 서버 에서 cookie 을 내 릴 때 path 만 있 는 것 이 아니 라 path 마지막 에 다른 SameSite 을 지정 하면 어 쩔 수 없다. 이렇게 수정 path 한 후에 cookie 는

path=/; SameSite=none; secure; SameSite=Lax

브 라 우 저 는 여전히 마지막 SameSite=Lax 을 기준 으로 한다.현재 저 버 전 nginx 은 이 문제 에 대해 풀 리 지 않 는 다.
그러나 만약 당신 이 nginx 1.19.3 이상 이 라면 하나의 속성 을 추가 하면 이 문 제 를 더욱 잘 해결 할 수 있 습 니 다.

proxy_cookie_flags one samesite=none;

secure 로 고 를 추가 하 는 방법 은 유사 하 며 참고 공식 문서, 군말 하지 않 습 니 다.
localhost https
위 에서 알 수 있 듯 이 우 리 는 수정 nginx 방법 을 통 해 크로스 도 메 인 cookies 의 발송 을 개조 할 수 있다.그러나 이때 만약 에 당신 이 도 메 인 을 뛰 어 넘 고 싶 지 않 으 면 현지 대리 의 방식 으로 해결 하려 고 한다 면 또 하나의 문제 가 발생 할 것 입 니 다. 왜냐하면 우리 가 위 에서 아래 cookies 를 보 낼 때 부족 하 게 모든 cookie 속성 을 가 져 왔 기 때문에 우 리 는 본 지역 대 리 를 사용 할 때 오히려 설정 할 수 없습니다 secure.우리 지역 의 개발 서버 는 흔히 cookies 와 같은 주 소 를 사용 하기 때문에 http://localhost:8080 프로 토 콜 이 아니 기 때문에 https secure 을 설정 할 수 없습니다. 그러면 어떻게 합 니까?
우 리 는 우리 의 로 컬 서버 를 개조 해서 그것 도 cookies 프로 토 콜 을 지원 할 수 밖 에 없다.
첫 번 째 단 계 는 우리 남편 이 루트 인증 서 를 만 듭 니 다.

openssl genrsa -des3 -out rootCA.key 2048
openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem

이때 우 리 는 두 개의 서 류 를 얻 을 것 이다. 하 나 는 https 이 고 하 나 는 rootCA.key 이다.
우 리 는 rootCA.pem 파일 을 시스템 의 열쇠 고리 에 가 져 와 완전한 신뢰 를 주 었 습 니 다. 그래 야 나중에 인증 서 를 발급 해 야 시스템 에서 인 정 받 을 수 있 습 니 다. 그렇지 않 으 면 인증 서 를 발급 하 더 라 도 브 라 우 저 는 거부 할 것 입 니 다.
두 번 째 단계, 인증서 생 성 pem:
우 리 는 먼저 localhost 라 는 파일 을 만 듭 니 다.

[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = dn

[dn]
C=US
ST=RandomState
L=RandomCity
O=RandomOrganization
OU=RandomOrganizationUnit
[email protected]
CN = localhost

그리고 다음 명령 을 실행 하여 파일 생 성 server.csr.cnf

openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config 

파일 하나 더 만 들 기 server.key:

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost

그리고 다음 명령 을 실행 하여 파일 생 성 v3.ext:

openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext

자, 여기까지 입 니 다. 이 server.crt 과 server.key 파일 은 우리 가 진정 으로 필요 로 하 는 두 개의 파일 입 니 다. 우 리 는 그것들 을 시스템 에 도입 합 니 다. 서로 다른 시스템 은 서로 다른 도입 방법 이 있 습 니 다. 다음 의 예 는 server.crt 방법 으로 하나의 react 파일 을 만 드 는 것 입 니 다.

SSL_CRT_FILE=server.crt
SSL_KEY_FILE=server.key
HTTPS=true

이때 당신 의 공 사 를 다시 시작 하면 .env 협 의 를 가지 게 됩 니 다.
도 메 인 을 뛰 어 넘 는 것 은 이렇게 번 거 롭 지만, 아무리 번 거 로 워 도 우 리 는 번 거 로 움 을 마다 하지 않 고 반드시 그것 을 해결 해 야 한다!