탭은 훌륭하지 않습니까? 이를 통해 우리 모두의 멀티 태 스커가 동시에 여러 온라인 작업을 처리 할 수 있습니다.
탭은 이제 너무 일반적이어서 링크를 클릭하면 새 탭에서 열릴 가능성이 높습니다.
자신의 링크를 사용하여이를 수행하는 방법에 대해 궁금한 적이 있다면 올바른 위치에 왔습니다.
앵커 요소
웹 페이지에 링크를 만들려면 앵커 ( ) 요소에 요소 (텍스트, 그림 등)를 래핑하고 해당 href속성을 링크하려는 URL로 설정해야 합니다.
Check out freeCodeCamp.
freeCodeCamp를 확인하십시오.
위의 링크를 클릭하면 브라우저가 현재 창이나 탭에서 링크를 엽니 다. 이것은 모든 브라우저의 기본 동작입니다.
새 탭에서 링크를 열려면 앵커 요소의 다른 속성 중 일부 다른 속성을 살펴 봐야합니다.
타겟 속성
이 속성은 링크를 여는 방법을 브라우저에 알려줍니다.
새 탭에서 링크를 열려면 target속성을 _blank다음과 같이 설정하십시오 .
Check out freeCodeCamp.
이제 누군가 링크를 클릭하면 새 탭에서 열리거나 사용자의 브라우저 설정에 따라 새 창이 열립니다.
보안 문제 target="_blank"
속성 rel="noreferrer noopener"을 사용할 때마다 항상 앵커 요소에 추가하는 것이 좋습니다 target.
Check out freeCodeCamp.
결과는 다음과 같습니다.
freeCodeCamp를 확인하십시오.
rel속성은 페이지와 링크 된 URL 사이의 관계를 설정합니다. 이를로 설정하면 noopener noreferrer타브 나빙이라고하는 피싱 유형을 방지 할 수 있습니다.
Tabnabbing이란 무엇입니까?
역 탭 나빙이라고도하는 Tabnabbing은 브라우저의 기본 동작 target="_blank"을 사용하여 window.objectAPI를 통해 페이지에 부분적으로 액세스 하는 익스플로잇입니다 .
Tabnabbing을 사용하면 링크 한 페이지로 인해 페이지가 가짜 로그인 페이지로 리디렉션 될 수 있습니다. 페이지의 원래 탭이 아닌 방금 연 탭에 초점이 맞춰지기 때문에 대부분의 사용자가이를 알아 채기 어려울 것입니다.
그런 다음 사용자가 페이지의 탭으로 다시 전환하면 대신 가짜 로그인 페이지가 표시되고 로그인 세부 정보를 입력 할 수 있습니다.
타브 나빙이 작동하는 방식과 악의적 인 공격자가 익스플로잇으로 무엇을 할 수 있는지에 대해 자세히 알아 보려면 Alex Yumashev의 기사와 OWASP의이 기사를 확인하십시오.
금고 를보고 싶다면작업 예제는이 페이지와 해당 GitHub 저장소에서 공격 및 rel속성 에 대한 자세한 정보를 확인하십시오 .
요약하자면
HTML을 사용하여 새 탭에서 링크를 여는 것은 쉽습니다. 세 가지 중요한 속성 이있는 앵커 ( ) 요소 만 있으면됩니다 .
href링크 할 페이지의 URL에 속성 세트- 로
target설정된 속성_blank은 브라우저의 설정에 따라 새 탭 / 창에서 링크를 열도록 브라우저에 지시합니다. rel속성 세트의 정보는 다음의 제품에noreferrer noopener당신이 링크 페이지에서 악의적 인 공격을 방지하기 위해
다시 한 번 작업하는 HTML 예제는 다음과 같습니다.
Check out freeCodeCamp.
그러면 브라우저에 다음과 같은 출력이 나타납니다.
freeCodeCamp를 확인하십시오.
읽어 주셔서 다시 한 번 감사드립니다. 즐거운 코딩입니다.