🤔 새로운 탭에서 URL 링크를 열게 하고 싶을 때 어떻게 구현하지?
How to Open a link in a new tab in React
<a> 태그를 사용하되, target prop을 _blank로 설정해준다.
여기서 _blank 는 이동할 주소나 화면을 새창으로 열어주는 기능을 한다.
export default function App() {
return (
<div>
{/* 👇️ open link in new tab */}
<a href="https://bobbyhadz.com" target="_blank" rel="noopener noreferrer">
bobbyhadz
</a>
</div>
);
}rel prop을 noopener noreferrer 로 설정해주는 부분은 보안상의 이유다.
1️⃣ noopener
특정 URL로 이동할 때 기존 페이지의 window.opener속성을 사용할 수 없게 한다.
이는 새 창에서 window.opener 속성이 null 값을 반환하는 것과 같다.
여기서 window.opener는 기존 창의 window 객체를 참조하여 페이지를 접근할 수 있도록 해준다.
즉 이 권한을 주지 않음으로써 기존 창의 페이지 조작을 못하도록 해준다.
2️⃣ noreferrer
HTTP 프로토콜에는 referrer 라는 헤더값이 있는데, 이는 해당 페이지를 요청한 이전 페이지가 무엇인지를 알려주는 정보로, 링크를 이동할 때 브라우저가 웹 서버에게 전송한다.
즉 noreferrer는 사용자가 하이퍼링크를 클릭할 때 브라우저가 HTTP referrer header를 전송하지 못하도록 해준다.
📌
noreferrer는noopener을 포함하는 의미라고 한다.
따라서 사실상noreferrer만 지정해주면noopener도 활성화시켜준다.
(참고 링크)
window.open()
내가 필요한 상황은 특정 버튼을 클릭했을 때 새로운 탭을 열도록 하는 것이다.
window.open() 함수를 사용할 수 있는데, 아래처럼 사용 가능하다.
window.open(url, '_blank', 'noopenner, noreferrer');근데 무슨 이유에선지, 로컬에서 테스트할 때는 정상적으로 새로운 탭에서 열렸는데 배포한 뒤에는 새로운 창에서 열렸다. 검색해보니, window.open() 이 Window object을 return하기 때문인 것 같았다.
그리고 찾은 가장 이상적인 방법. (참고 stackoverflow)
noopener, noreferrer, 과 window.opener = null을 사용하는 것.
const openInNewTab = (url) => {
const newWindow = window.open(url, '_blank', 'noopener,noreferrer')
if (newWindow) newWindow.opener = null
}위처럼 함수를 만들고 아래처럼 함수를 사용하면 된다.
openInNewTab('https://stackoverflow.com')참고
