문제 인식:
vue에서 외부 페이지로 리다이렉트를 시켜야하는데 이 때 header를 넣어서 보낼 수 있는지 확인이 필요하다.
과정:
1. vue-router로 외부 url에 리다이렉션이 가능한가?
To redirect to an external url in Vue, we can use the window.location.href property.
(참고: https://reactgo.com/vue-redirect-to-external-url/)
2. $window.location.href에 header을 실어서 보낼 수 있는가?
Adding http headers to window.location.href in Angular app
I have a angular app that I needed to redirect outside to a non angular html page, so I thought I could just use the $window.location.hrefto redirect the angular app to my external site. This actua...
stackoverflow.com
$window.location.href를 사용하는 경우 브라우저는 자바스크립트 코드가 아닌 HTTP 요청을 하고 있습니다.
따라서 토큰 값을 사용하여 Authorization과 같은 커스텀헤더를 추가할 수 없습니다.
JavaScript를 통해 쿠키를 추가하고 인증 토큰을 넣을 수 있습니다.
쿠키는 브라우저에서 자동으로 전송됩니다.
단, 쿠키와 헤더를 사용하는 보안상의 영향을 검토해야 합니다.
둘 다 JavaScript를 통해 액세스할 수 있으므로 추가 공격 벡터는 없습니다.
새로운 페이지가 로드된 후에 cookie를 삭제하지 않으면 CSRF 부정이용을 이용할 수 있습니다.
결론: 프런트에서 요청을 서버로 보내고 서버에서 리다이렉트 요청을 보내는 방식을 사용해야한다.
'TIL(Today I Learned)' 카테고리의 다른 글
| [TIL] (0) | 2022.06.24 |
|---|---|
| [TIL]immer (0) | 2022.06.22 |
| 외부에서 local서버로 접속하기(with ngrok) (0) | 2022.06.21 |
| VScode에서 클러스터 포트 포워딩하기 (0) | 2022.06.08 |
| 엘라스틱 서치 (0) | 2022.05.31 |