외부 링크 새탭으로 열어보자

 

 

 

 

 

일단 메인페이지 하단에 푸터와 간단한 컨텐츠를 내 식대로 변경을 했습니다. 그리고 이제 인스타링크를 누르면 새탭에 열리게끔 해야하는데, 뭐 간단히 a 태그와 target="_blank" 로 열어재꼇습니다. 그런데 제가 학습하면서 기억하기로는 보안을 위해서 다른 어트리뷰트를 추가해줬던 기억이 있어서 서치를 해보았습니다. 

 

 

 

 

 

 

 

 

 

https://www.freecodecamp.org/news/how-to-use-html-to-open-link-in-new-tab/

How to Use HTML to Open a Link in a New Tab

 

 

이 사이트를 참고하면서 다시 공부한 내용을 적어보려고 합니다. 

 

The Anchor Element

To create a link on a web page, you need to wrap an element (text, a picture, and so on) in an anchor (<a>) element and set its href attribute to the URL you want to link to.

<p>Check out <a href="https://www.freecodecamp.org/">freeCodeCamp</a>.</p>

If you click on the link above, the browser will open the link in the current window or tab. This is the default behavior in every browser.

To open a link in a new tab, we'll need to look at some of the other attributes of the anchor element's other attributes.

웹페이지에 링크를 생성하려면 a 태그로 요소들을 감싸고 href 어트리뷰트를 가고자하는 링크를 설정하면 됩니다.

링크를 클릭하게되면, 브라우저는 링크를 현재 탭에서 열게됩니다. 모든 브라우저의 기본 동작입니다,

새탭에서 열기위해서는, anchor 요소의 다른 어트리뷰트를 살펴봐야합니다. 

 

The Target Attribute

This attribute tells the browser how to open the link.

To open a link in a new tab, just set the target attribute to _blank:

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>.</p>

Now when someone clicks on the link, it will open up in a new tab, or possibly a new window depending on the person's browser settings.

 

target이라는 어트리뷰트는 링크를 어떻게 열 것인가를 말해줍니다. 
새 탭에서 링크를 열고싶다면, 그냥 target 어트리뷰트를 _blank로 설정해주세요.
이제 누군가 링크를 클릭하면 새탭에서 열릴것이고, 사용자의 브라우저 세팅에 따라 새 윈도우에서 열릴 수도 있습니다.

 

Security concerns with target="_blank"

I strongly recommend that you always add rel="noreferrer noopener" to the anchor element whenever you use the target attribute:

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

This results in the following output:

The rel attribute sets the relationship between your page and the linked URL. Setting it to noopener noreferrer is to prevent a type of phishing known as tabnabbing.

 

필자는 a 태그사용하면서 target 어트리뷰트를 설정할때마다  rel="noreferrer noopener" 를 항상 추가로 넣어줄것을 강력히 추천합니다. 

이유는 아래와 같습니다. 

rel 어트리뷰트는 첨부된 URL과 당신이 열려고 하는 페이지 사이의 관계를 설정합니다. 이것을 noopener noreferrer로 설정함으로써 tabnabbing이라는 피싱의 한 종류를 예방할 수 있습니다.

 

What is tabnabbing?

Tabnabbing, sometimes called reverse tabnabbing, is an exploit that uses the browser's default behavior with target="_blank" to gain partial access to your page through the window.object API.

With tabnabbing, a page that you link to could cause your page to redirect to a fake login page. This would be hard for most users to notice because the focus would be on the tab that just opened – not the original tab with your page. they would see the fake login page instead and might enter their login details.

tabnabbing, 혹은 reverse tabnabbing이라고 불리는데, 이는 브라우저의 target="_blank" 기본동작을 악용하여 window.object API를 통해 사용자 페이지의 partial access를 얻는 것입니다.  tabnabbing 을 가지고, 이동해야할 링크 대신 새로운 가짜 로그인 페이지로 유도할 수 있습니다. 대부분의 유저가 알아차리기 힘듭니다. 왜냐하면 기존 페이지의 탭이 아닌 새 탭에 열린 것이라는 거에만 초점을 두니까 말이죠.  가짜 로그인페이지를 보고, 자신의 로그인 정보를 입력하게 되겠죠. 

 

 

rel="noopener noreferrer" 생활화합시다