a tag rel="noopener noreferrer"

회사 리액트 웹앱의 warning을 정리 중에 나타난 메세지이다.

Using target="_blank" without rel="noopener noreferrer"
is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank

2021년 업데이트에 브라우저들은 이제 암시적으로 target=_blank가 있으면 rel=noopener를 설정한다.
보안과 관련이 있는 것 같다.

a tag의 rel속성

• <a> 태그의 rel 속성은 현재 문서와 링크된 문서 사이의 연관 관계(relationship)를 명시합니다.
  여러 검색 엔진들은 링크에 대한 더 많은 정보를 수집하기 위해 이 속성을 사용할 수 있습니다.
  이 속성은 반드시 href 속성이 설정되어 있어야만 사용할 수 있습니다.

• The following table lists some of the most important existing keywords. Every keyword within a space-separated value should be unique within that value.

  • rel에 여러가지를 부여할 수 있는데 스페이스로 구분함
    • rel="noopener noreferrer"

• noopener

  • Creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those, to begin with (i.e., has an appropriate target attribute value).

• noreferrer

  • No Referer header will be included. Additionally, has the same effect as noopener.

참고 문헌

• https://mathiasbynens.github.io/rel-noopener/
• http://tcpschool.com/html-tag-attrs/a-rel
• https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel