[Next.js] HTTP Security headers 적용

Next.js에서 브라우저에 더 나은 보안헤더 향상 방법을 제공해주고 있다.

 

https://nextjs.org/docs/advanced-features/security-headers

Advanced Features: Security Headers | Next.js

`next.config.js` 파일에 내용을 추가하는 방식으로 손쉽게 강화가 가능하다고 한다.

 

1) 크로스사이트스크립팅 공격감지 시 페이지 로드 중지

2) iframe 안에 심어져 있을 수 있는 해커의 클릭재킹 공격 방지

3) 사용자가 파일을 업로드하고 공유할 수 있는 XSS 악용방지

 

위의 3가지항목을 적용해보았다.

 

 

 

적용하기 전 까지 참담한 점수 였지만, 헤더 기능들 전부를 활성화 하지 않고 3가지를 활성화 시켜 보안점수를 많이 높일수 있었다.

 

적용전

적용후

 

Reference

Webpagetest.org

WebPageTest