2024-04-23 TIL

image unconfigured-host

로컬이 아닌 외부에 있는 이미지를 사용할 때, Next.js 서버가 이미지를 가지고 있는 리모트 서버(ex.unsplash 서버)에 직접 요청을 하기 때문에, 모든 리모트 서버에서의 접근을 허용할 경우 악의를 가진 사용자에 의해 Next.js 서버가 공격 받을 가능성이 있다.

이를 방지하기 위해서 이미지를 가지고 있는 리모트 서버가 안전한 서버라는 것을 Next.js 내부에서 지정해줘야 하는데, 기본적으로 구성된 next.config.ts 파일에서 리모트 서버의 host 주소를 명시해줘야 한다.

 

명시하지 않으면 하단과 같은 image-unconfigured-host 에러를 반환해준다.

추가하는 방법

next.config.ts 파일에서 해당 코드와 같이 protocol과 hostname을 지정해주면 에러를 없앨 수 있고, 해당 hostname에 해당하는 주소에서 서빙되는 이미지를 프로젝트에서 사용할 수 있게 된다.

느낀 점

서버에서 모든 내용을 결정하기 때문에, CSR로만 동작하는 리액트와는 다르게 백엔드처럼 Next.js 서버에 대한 보안도 챙겨줘야 한다는 사실을 알게 되었고, 만약 Next.js 서버가 악의적인 공격을 받는다면 원하지 않는 내용이 렌더링 된다던지 삭제된다던지 하는 불상사가 발생할 것이라는 것도 알게 되었다.