HTML을 사용하여 새 탭에서 링크를 여는 방법

탭은 훌륭하지 않습니까? 이를 통해 우리 모두의 멀티태스커는 동시에 많은 온라인 작업을 저글링할 수 있습니다.

탭은 이제 매우 보편화되어 링크를 클릭하면 새 탭에서 열릴 가능성이 높습니다.

자신의 링크로 이를 수행하는 방법이 궁금하시다면 제대로 찾아오셨습니다.

앵커 요소

웹 페이지에 링크를 만들려면 요소(텍스트, 그림 등)를 앵커(<a> ) 요소 및 해당 href 설정 연결하려는 URL의 속성입니다.

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

freeCodeCamp를 확인하세요.

위의 링크를 클릭하면 브라우저가 현재 창이나 탭에서 링크를 엽니다. 이것은 모든 브라우저의 기본 동작입니다.

새 탭에서 링크를 열려면 앵커 요소의 다른 속성 중 일부 다른 속성을 살펴봐야 합니다.

이 속성은 브라우저에 링크를 여는 방법을 알려줍니다.

새 탭에서 링크를 열려면 target _blank 속성 :

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

이제 누군가가 링크를 클릭하면 새 탭에서 열리거나 사용자의 브라우저 설정에 따라 새 창이 열릴 수도 있습니다.

항상 rel="noreferrer noopener"을 추가하는 것이 좋습니다. target를 사용할 때마다 앵커 요소에 속성:

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

결과는 다음과 같습니다.

freeCodeCamp를 확인하세요.

rel 속성은 페이지와 링크된 URL 간의 관계를 설정합니다. noopener noreferrer으로 설정 탭내빙으로 알려진 유형의 피싱을 방지하기 위한 것입니다.

역 탭내빙이라고도 하는 탭내빙은 target="_blank"과 함께 브라우저의 기본 동작을 사용하는 익스플로잇입니다. window.object을 통해 페이지에 부분적으로 액세스하려면 API.

tabnabbing을 사용하면 링크하는 페이지로 인해 페이지가 가짜 로그인 페이지로 리디렉션될 수 있습니다. 초점이 페이지의 원래 탭이 아니라 방금 열린 탭에 있기 때문에 대부분의 사용자가 알아차리기 어려울 것입니다.

그런 다음 사용자가 귀하의 페이지가 있는 탭으로 다시 전환하면 가짜 로그인 페이지가 대신 표시되고 로그인 세부정보를 입력할 수 있습니다.

tabnabbing이 작동하는 방식과 악의적인 행위자가 익스플로잇으로 할 수 있는 일에 대해 자세히 알아보려면 Alex Yumashev의 기사와 OWASP의 이 기사를 확인하세요.

금고를 보고 싶다면 실제 예제에서 익스플로잇 및 rel에 대한 자세한 내용은 이 페이지와 GitHub 리포지토리를 확인하세요. 속성.

HTML을 사용하여 새 탭에서 링크를 여는 것은 쉽습니다. 앵커(<a> ) 세 가지 중요한 속성이 있는 요소:

다시 말하지만, 여기에 전체 작업 예가 있습니다.

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

그 결과 브라우저에 다음과 같은 출력이 표시됩니다.

freeCodeCamp를 확인하세요.

읽어주셔서 다시 한 번 감사드립니다. 즐거운 코딩하세요.