Rel=noopener & Noreferrer: 외부 링크에 대한 보안 관행

rel=noopener noreferrer: 외부 링크에 대한 보안 관행

rel=noopener noreferrer: 외부 링크에 대한 보안 관행

많은 WordPress 사용자는 자신의 컴퓨터에 신비한 코드 조각이 나타나는 것을 알 수 있습니다. 외부 링크 사이트의 HTML을 검토한 결과, "rel="noopener noreferrer"" 코드는 사이트 소유자의 직접적인 조치 없이 자주 나타나며, 그 목적과 잠재적인 SEO 영향에 대한 의문을 제기합니다.

SEO 관점에서 보면 이러한 자동 추가 태그는 걱정할 것이 없습니다. WordPress는 특정 상황에서 외부 링크에 이러한 속성을 표준 관행으로 구현합니다. 검색 엔진은 이러한 속성을 완전히 이해하며 사이트가 검색 결과에서 색인되거나 순위가 매겨지는 방식에 부정적인 영향을 미치지 않습니다.

무엇인가 rel="noopener noreferrer"?

The rel="noopener noreferrer" 는 귀하의 웹사이트의 외부 링크를 위해 특별히 설계된 HTML 속성입니다. 이 속성은 실제로 독립적으로 작동하는 두 개의 별도 구성 요소로 구성됩니다.

이러한 구성요소는 외부 웹사이트가 귀하의 사이트와 상호작용하는 방식에 영향을 미치지만 각각은 서로 다른 목적을 갖습니다.

이 속성을 구현하면 HTML 코드에 다음과 같이 나타납니다.

 

<a href="https://externalsite.com" target="_blank" rel="noopener noreferrer">

 

링크에 이 코드가 포함되어 있는지 확인하는 것은 간단합니다. 웹사이트의 코드 편집기 브라우저의 "찾기" 기능을 사용하여 검색하세요. rel="noopener noreferrer"또는 웹 페이지를 보고 마우스 오른쪽 버튼을 클릭하고 "검사"를 선택한 다음 개발자 콘솔에서 코드를 검색하세요.

두 번째 방법은 자신이 소유하거나 관리하지 않는 웹사이트를 조사하는 데 특히 유용합니다. 이를 통해 개발자와 사이트 소유자는 웹 페이지 전체의 외부 링크에서 보안 속성이 제대로 구현되었는지 확인할 수 있습니다.

381b0144 b9e1 4441 9454 3cbc640d95f8

무엇인가 rel="noreferrer"?

rel="noreferrer" 속성은 HTML 링크에서 개인 정보 보호 메커니즘 역할을 하며, 방문자가 귀하의 사이트에서 다른 사이트로 이동할 때 참조자 정보가 전송되는 것을 방지합니다. 이 HTML 속성을 구현하면 대상 사이트의 분석 도구에서 귀하의 웹사이트가 트래픽 소스로 숨겨집니다.

일반적으로 누군가가 귀하의 웹사이트에서 링크를 클릭하면 대상 사이트는 귀하의 도메인을 트래픽 소스로 식별할 수 있습니다. 링크에 rel="noreferrer"를 추가하면 이 식별이 차단됩니다. Google Analytics와 같은 분석 플랫폼에서 추천 트래픽으로 나타나는 대신 이러한 방문자는 직접 트래픽으로 등록됩니다.

 

속성은 두 가지 방법으로 구현할 수 있습니다.

<a href="https://examplesite.com" target="_blank" rel="noreferrer">

 

또는 새 탭에서 열지 않고도:

<a href="https://examplesite.com" rel="noreferrer">

 

이러한 숨겨진 참조자 정보는 일부 웹사이트 소유자가 분석에서 발견한 직접 트래픽의 신비로운 급증을 설명할 수 있습니다.

외부 링크에서 rel="noreferrer"를 사용하는 경우

아웃바운드 링크에 rel="noreferrer" 속성을 구현하는 데는 몇 가지 전략적 이유가 있습니다.

  1. 경쟁자 링크: 경쟁사와 링크하는 동시에 자신의 위치를 ​​유지하는 것을 선호하는 경우 추천 데이터 사설
  2. 신뢰할 수 없는 웹사이트: 완전히 신뢰할 수 없는 사이트에 링크할 때
  3. 개인 정보 보호 문제: 트래픽 소스 정보를 공유하지 않음으로써 사용자의 개인 정보를 보호하려는 경우

이 속성을 추가하는 것은 간단합니다. 위에 표시된 대로 링크 HTML에 rel="noreferrer"를 포함하기만 하면 됩니다. 새 탭에서 이미 외부 링크를 열고 있다면 이 코드를 통합하는 데 최소한의 추가 노력이 필요합니다.

7720441

무엇인가 rel="noopener"?

rel="noopener" 속성은 외부 링크를 사용하는 웹사이트에 대한 중요한 보안 조치 역할을 합니다. 이 HTML 속성은 링크된 페이지를 통해 사용자를 표적으로 삼는 정교한 공격 벡터로부터 사이트를 보호하는 데 도움이 됩니다. 올바르게 구현하면 악성 웹사이트가 window.opener JavaScript 속성을 통해 페이지에 액세스하는 것을 방지합니다.

역방향 탭내핑으로부터 사이트 보호

역방향 탭내핑은 링크가 새 탭에서 열릴 때 발생하는 심각한 보안 위협입니다. 적절한 보호가 없으면 공격자는 window.opener 관계를 악용하여 원래 페이지를 정보를 훔치도록 설계된 사기성 사이트로 리디렉션할 수 있습니다.

이 공격은 사용자가 이미 방문한 페이지를 신뢰하는 경우가 많기 때문에 특히 위험합니다. 사용자가 합법적인 사이트라고 믿는 곳으로 돌아왔을 때, 자신도 모르게 공격자에게 민감한 정보를 제공할 수 있습니다.

공격 작동 방식:

다행히도 외부 링크에 rel="noopener"를 추가하면 이 연결이 끊어지고 새 페이지가 원래 페이지를 조작하는 것을 방지할 수 있습니다.

내부 링크에 rel="noopener"를 사용하는 경우

자신의 도메인 내의 페이지로의 링크의 경우 rel="noopener"는 일반적으로 불필요합니다. 내부 링크는 소스 페이지와 대상 페이지를 모두 제어하므로 최소한의 보안 위험이 있습니다.

중요 고려 사항:

  1. WordPress는 새 탭에서 열리는 외부 링크에 rel="noopener"를 자동으로 추가합니다.
  2. WordPress가 아닌 플랫폼에서는 수동 구현이 필요합니다.
  3. rel="noreferrer" 속성은 다른 목적을 갖고 있으며 분석 추적에 영향을 미칠 수 있습니다.

내부 링크는 제어된 환경 내에서 탐색하기 때문에 이러한 보안 속성이 필요하지 않다는 점을 기억하세요. 특히 완전히 신뢰하거나 제어하지 못하는 사이트를 가리키는 외부 링크에 rel="noopener"를 적용하는 데 집중하세요.

rel="noopener noreferrer"를 사용하여 워드프레스(WordPress)

WordPress는 외부 링크에 보안 속성을 설정하면 자동으로 보안 속성을 추가합니다. 새 탭에서 열기s. 이 동작은 좋은 사용자 경험을 유지하면서 웹사이트를 보호하는 데 도움이 됩니다. 방문자가 이러한 링크를 클릭하면 새 콘텐츠가 별도로 로드되는 동안 사이트에 남아 있습니다.

코드 차이가 상당합니다. 표준 외부 링크는 다음과 같습니다.

<a href="https://examplesite.com">Example Link</a>

하지만 "새 탭에서 열기" 옵션을 활성화하면 WordPress에서 다음과 같이 변경합니다.

<a href="https://examplesite.com" target="_blank" rel="noopener noreferrer">Example Link</a>

The target="_blank" 지침은 새 탭을 여는 반면 rel 속성은 중요한 보안 이점을 제공합니다. 게시된 페이지에서 외부 링크의 HTML을 검사하여 이러한 속성을 확인할 수 있습니다.

제거할 수 있나요?

같은 탭에서 링크가 열리는 것을 신경 쓰지 않는다면 이러한 속성을 제거하는 것은 간단합니다. WordPress 편집기에서 "새 탭에서 열기" 옵션의 선택을 취소하면 WordPress가 추가 속성 없이 표준 링크를 생성합니다.

그러나, 새 탭에서 열리는 링크를 유지하면서 코드의 일부만 제거하는 것은 더 어렵습니다.WordPress는 보안상의 이유로 이러한 속성을 자동으로 추가하며, 기본 제공 토글은 없습니다.

수동으로 제거를 시도할 수 있습니다. noreferrer 코드 편집기를 통해 부분을 변경하면 대상 사이트에서 분석에서 귀하의 사이트를 참조자로 볼 수 있습니다. 이 프로세스에는 다음이 포함됩니다.

  1. WordPress 코드 편집기 열기
  2. 특정 링크 HTML 찾기
  3. 속성을 직접 편집

The noopener 그러나 속성은 영구적으로 제거하기가 훨씬 더 어렵습니다. 수동으로 삭제한 후에도 WordPress는 일반적으로 페이지를 게시하거나 업데이트할 때 다시 추가합니다. 이러한 지속성은 다음과 같은 이유로 존재합니다. noopener 잠재적인 보안 악용으로부터 중요한 보호 기능을 제공합니다.

이 경우 WordPress는 완전한 사용자 정의보다 보안을 우선시합니다.

이런 동작을 수정하고자 하는 사람들을 위해 고급 솔루션에는 테마에 사용자 정의 코드나 특수 플러그인을 사용하는 방법이 있지만, 이러한 접근 방식은 보안 문제로 인해 대부분 사용자에게 권장되지 않습니다.

모바일 브라우저 컨셉 일러스트레이션 114360 6598

대부분의 브라우저에는 이제 자동 Noopener 보호 기능이 포함되어 있습니다.

2025년 현재, 대부분의 인기 웹 브라우저는 외부 링크에 대한 자동 "noopener" 보호를 구현하여 개발자의 수동 구현에 대한 긴급성을 줄였습니다. 이러한 보안 진화는 2018년 Safari에서 시작되어 다른 브라우저가 따라야 할 선례를 만들었습니다.

Firefox는 2020년 2021월에 이 보안 이니셔티브에 가입하여 잠재적인 창 조작 공격에 대한 자동 보호 기능을 추가했습니다. 가장 중요한 변화는 XNUMX년 초에 발생했는데, Chrome, Edge, Brave를 포함한 모든 Chromium 기반 브라우저가 이 기능을 표준에 통합했습니다. 보안 프로토콜.

자동 Noopener를 위한 브라우저 타임라인:

이 브라우저 수준 보호 기능은 악성 사이트가 원본 페이지를 조작하는 것을 방지하여 중요한 안전망을 구축합니다. window.opener 속성. 이러한 발전에도 불구하고 웹 개발자는 계속해서 구현해야 합니다. rel="noopener" 두 가지 주요 이유로 수동으로:

대체 브라우저를 사용하는 소수의 인터넷 사용자는 코드에서 명시적으로 보호되지 않으면 여전히 취약한 상태에 놓이게 됩니다.

저자에 관하여

칼럼 셔우드의 사진

칼럼 셔우드

공동 창립자 @ WorldwideBacklinks.com

성공에 대해 이야기합시다 🏆

개인적인 손길로 웹사이트의 잠재력을 깨워보세요. Worldwide Backlinks에서는 귀하의 고유한 요구 사항에 맞는 전략을 맞춤화하는 대화의 힘을 믿습니다. 우리의 전문가들은 귀하의 SEO 문제를 해결하고 이를 승리로 바꿀 준비가 되어 있습니다. 귀하에게 꼭 맞게 설계된 전략으로 온라인 인지도를 높이세요. 지금 전화하셔서 디지털 환경을 장악하기 위한 첫 걸음을 내딛으십시오.
지금 바로 1800 840 999번으로 전화해 시작해 보세요.

Lorem ipsum의 dolor는 amet, conditetur adipiscing elit 앉아 있습니다. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.