[Nextjs Image] The request resource XX has type "image/svg+xml" but dangerouslyAllowSVG is disabled

The request resource XX has type "image/svg+xml" but dangerouslyAllowSVG is disabled

 

 

이미지 placeholder로 사용하기 위해 https://placehold.co/에서 가져오려고 했으나, 위와 같은 에러가 발생했다.

next 문서를 찾아보니 해결방안은 dangerouslyallowsvg설정을 해주면 된다.

 

하지만 디폴트 로더가 SVG 이미지를 최적화하지 않는다는 문구와 함께, 그 이유를 설명하는데,

 

첫째는 SVG는 vector 포멧으로 이루어졌기 때문에 resize 필요성이 없고, 

두 번째로는 HTML/CSS 와 같은 특성 때문에 적절한 CSP 헤더 없이는 취약성으로 이어질 수 있다는 것이다.

 

따라서 src prop이 SVG인 것을 알면 최적화하지 않은 방식으로 사용하는 것이 바람직하다고 한다.

그리고 contentSecurityPolicy와  contentDispositionType을 비롯한 추가적인 설정도 해줘야 한다.

(원문)

The default loader does not optimize SVG images for a few reasons.

First, SVG is a vector format meaning it can be resized losslessly.
Second, SVG has many of the same features as HTML/CSS, which can lead to vulnerabilities without proper Content Security Policy (CSP) headers.

Therefore, we recommended using the unoptimized prop when the src prop is known to be SVG. This happens automatically when src ends with ".svg".

However, if you need to serve SVG images with the default Image Optimization API, you can set dangerouslyAllowSVG inside your next.config.js:

module.exports = {
  images: {
    dangerouslyAllowSVG: true,
    contentDispositionType: 'attachment',
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
  },
}​

In addition, it is strongly recommended to also set contentDispositionType to force the browser to download the image, as well as contentSecurityPolicy to prevent scripts embedded in the image from executing.

뭔가 다른 이미지들은 굳이 dangerousltAllowSVG 설정을 킬 필요가 없는데 모두 적용해야 한다는 게 부적절해 보였다.

 

🤔 다른 방법은 없을까?

사용하고자 하는 https://placehold.co/ 에 들어가 보니 확장자를 변경해 줄 수 있는 설정이 있다. 

https://placehold.co/600x400/png 이런 식으로 변경을 해주고, 위에서 dangerousltAllowSVG 설정을 제거해 줬더니 에러가 제거되었다.

 

https://placehold.co/600x400?text=random/png로는 또 다시 에러가 발생해서 어쩔 수 없이 첫번째 방법으로 다시 설정해줬다.

---

📚 References

https://placehold.co/

Placehold | A simple, fast and free image placeholder service

https://nextjs.org/docs/app/api-reference/components/image#dangerouslyallowsvg

Components: <Image> | Next.js