[230817] Header에서 Authorization 추출이 안되는 안되는 문제

Header에 담겨있는 토큰이 추출 안 되는 문제

💬 Front에서 Header에 담겨 있는 토큰 값을 추출할 수 없다고 했습니다. 요청에 대한 응답에는 담겨 있었지만, React에서 추출하려고 하면 문제가 되는 것이었습니다.

 

✔ 원인

💬 Front에서 Cookies, Authorization headers, TLS Client Certificates 같은 자격증명을 위해 사용하는 withCredential 옵션을 True 사용해서 요청을 보내고 있었습니다. 이 옵션이 활성화되어 있는 경우 Access-Control-Allow-Origin에는 와일드 카드(*)을 사용하지 못합니다.

 

✔ 해결

💬 해결 방법은 두 가지라고 MDN에서 설명을 해주고 있었습니다. 첫 번째는 Front에서 withCredential 옵션을 False로 설정하는 것이었습니다. 두 번째는 Back에서 Access-Control-Allow-Origin 값을 와일드카드(*)가 아닌 명시적으로 지정하는 것이었습니다.

✅ Access-Control-Allow-Origin에서 와일드카드(*) 값은 보안적으로 좋은 방법이 아니라는 생각이 들었습니다. 해당 Front 도메인이 아닌 다른 도메인도 허락을 하는 옵션이기 때문입니다. 그래서 와일드카드(*) 사용 대신 Back에서 정확하게 명시해 주기로 했습니다.

 

✔ 참고 링크

Reason: Credential is not supported if the CORS header 'Access-Control-Allow-Origin' is '*' - HTTP | MDN

XMLHttpRequest: withCredentials property - Web APIs | MDN