window.location.href 헤더요청

문제 인식:

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을 실어서 보낼 수 있는가?

https://stackoverflow.com/questions/24130004/adding-http-headers-to-window-location-href-in-angular-app?answertab=active#tab-top 

Adding http headers to window.location.href in Angular app

 

$window.location.href를 사용하는 경우 브라우저는 자바스크립트 코드가 아닌 HTTP 요청을 하고 있습니다.

따라서 토큰 값을 사용하여 Authorization과 같은 커스텀헤더를 추가할 수 없습니다.
JavaScript를 통해 쿠키를 추가하고 인증 토큰을 넣을 수 있습니다. 

쿠키는 브라우저에서 자동으로 전송됩니다. 

단, 쿠키와 헤더를 사용하는 보안상의 영향을 검토해야 합니다. 

둘 다 JavaScript를 통해 액세스할 수 있으므로 추가 공격 벡터는 없습니다. 

새로운 페이지가 로드된 후에 cookie를 삭제하지 않으면 CSRF 부정이용을 이용할 수 있습니다.

 

결론: 프런트에서 요청을 서버로 보내고 서버에서 리다이렉트 요청을 보내는 방식을 사용해야한다.