[HTML] rel="noopener noreferrer"

rel="noopener noreferrer"는 보안과 성능 측면에서 새 창을 열 때 사용하는 target="_blank" 속성의 단점을 보완하기 위한 속성입니다. 이 속성들은 주로 두 가지 역할을 합니다:

1. noopener

• 목적: 새 창이 부모 창에 접근할 수 없도록 만듭니다.
• 설명: target="_blank"를 사용하면 새 창(또는 새 탭)이 열리는데, 이때 새로 열린 창이 window.opener 객체를 통해 부모 창에 접근할 수 있습니다. 악의적인 페이지가 이 기능을 악용하여 부모 창의 내용을 조작하거나 스크립트를 실행할 수 있습니다. rel="noopener"는 이런 상호작용을 방지하여 새 창이 부모 창에 접근할 수 없도록 막아줍니다.

<a href="https://example.com" target="_blank" rel="noopener">새 창에서 열기</a>

이렇게 설정하면 새 창은 참조 페이지에 대한 정보를 받지 않게 됩니다.

 

2. noreferrer

• 목적: 참조(Referrer) 정보를 새 창에 전달하지 않도록 합니다.
• 설명: 웹 페이지에서 다른 페이지로 이동할 때, 일반적으로 브라우저는 방문자가 어느 페이지에서 왔는지에 대한 참조 정보를 전달합니다. 이는 보통 Referrer 헤더를 통해 이루어집니다. rel="noreferrer"를 사용하면 이 참조 정보가 새로 열린 페이지에 전달되지 않습니다. 이 기능은 프라이버시 보호에 유용하며, 특히 사용자가 개인정보가 포함된 페이지에서 다른 페이지로 이동할 때 사용됩니다.

<a href="https://example.com" target="_blank" rel="noreferrer">새 창에서 열기</a>

이렇게 설정하면 새 창은 참조 페이지에 대한 정보를 받지 않게 됩니다.

 

3. noopener와 noreferrer 함께 사용

두 속성은 종종 함께 사용되며, 이렇게 하면 보안과 프라이버시를 동시에 강화할 수 있습니다.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">새 창에서 열기</a>

이 조합은 다음과 같은 이점을 제공합니다:

• 새로 열린 창이 부모 창을 조작할 수 없도록 보안을 강화 (noopener).
• 사용자의 참조 정보가 새 창에 전달되지 않도록 프라이버시 보호 (noreferrer).