[React] 리액트 jsx에서 외부 소스 이미지 엑박 오류 해결법

공공데이터 포털에서 제공하는 이미지 링크를 사용하려는데, 이미지가 뜨지 않고 엑스박스(엑박)이 떠서 당황했던 적이 있었다.

구글링해본 결과, img 형식을 지켜야하는 것은 같지만, 추가로 지정해줘야하는 부분이 있었다.

바로 refferPolicy를 설정해준다는 것이다.

<img
  className="handImage"
  src={link}
  referrerPolicy="no-referrer"
/>

Referrer-Policy - HTTP | MDN

Referrer-Policy - HTTP | MDN

상세 설정 방법은 다음과 같다.

no-referrer

The [Referer](<https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer>) header will be omitted: sent requests do not include any referrer information.

no-referrer-when-downgrade

Send the origin, path, and querystring in [Referer](<https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer>) when the protocol security level stays the same or improves (HTTP→HTTP, HTTP→HTTPS, HTTPS→HTTPS). Don't send the [Referer](<https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer>) header for requests to less secure destinations (HTTPS→HTTP, HTTPS→file).

origin

Send only the origin in the [Referer](<https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer>) header. For example, a document at https://example.com/page.html will send the referrer https://example.com/.

origin-when-cross-origin

When performing a same-origin request to the same protocol level (HTTP→HTTP, HTTPS→HTTPS), send the origin, path, and query string. Send only the origin for cross origin requests and requests to less secure destinations (HTTPS→HTTP).

same-origin

Send the origin, path, and query string for same-origin requests. Don't send the [Referer](<https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer>) header for cross-origin requests.

strict-origin

Send only the origin when the protocol security level stays the same (HTTPS→HTTPS). Don't send the [Referer](<https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer>) header to less secure destinations (HTTPS→HTTP).

strict-origin-when-cross-origin (default)

Send the origin, path, and querystring when performing a same-origin request. For cross-origin requests send the origin (only) when the protocol security level stays same (HTTPS→HTTPS). Don't send the [Referer](<https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer>) header to less secure destinations (HTTPS→HTTP).