소개
리액트는 흔한 웹 취약점을 기본으로 막아주지만, 서버 컴포넌트/서버 함수가 늘어나면서 프런트엔드 개발자도 전통적으로 백엔드가 맡던 보안 문제까지 고민해야 하는 상황이 됐습니다. 이 글은 XSS 방어의 원리와 한계부터 짚어봅니다. dangerouslySetInnerHTML이 왜 위험한지, 인증 토큰을 localStorage에 저장하면 안 되는 이유는 무엇인지 등을 원인부터 설명하는 식이라, 이미 알고 계신 분들도 기본기를 한 번 점검한다는 마음으로 가볍게 읽어보시면 좋을 것 같습니다.
팀원들의 의견
Q1. 내부적으로 보안 사항 준수 여부를 체크하기 위한 스킬이나 리뷰 프로세스를 활용하시나요?
Q2. RSC/서버 액션 도입하면서 새로 신경 쓰게 된 보안 이슈가 있으신가요?
💬. 의견 1
저희는 스킬은 따로 없고 리뷰 프로세스에서 AI 리뷰를 통해서 이런 요소도 체크가 가능하게끔 하려고 하는데요! 한편으로 조직 관점에서는 이렇게 보안에 영향을 줄만한 작업들은 플랫폼 엔지니어라던지 특정 직군의 동료들이 맡아서 하다보니 전문성이 있어서 큰 문제없이 돌아가고 있는 것 같아요!
아직 RSC나 서버 액션 모두 도입하지 않아서 따로 신경을 써본 적은 없었습니다!
💬. 의견 2
특정 기술들을 쓸 때는 리뷰 단계에서 서로 좀 더 신경 써서 보는 편입니다. AI를 활용한 리뷰도 같이 쓰는데, 보안이 워낙 중요한 부분이다 보니까 특별한 컨텍스트를 주입하지 않아도 해당 이슈를 좀 더 잘 잡아내는 것 같더라고요. 글에서 소개한 내용을 잘 정리해서 리뷰 컨텍스트로 넣어두면 더 좋을 것 같다는 생각도 드는 것 같습니다!
사실 그 부분은 따로 도입을 생각하고 있진 않아서, 그래서 크게 새로 신경 쓰게 된 보안 이슈는 없었던 것 같아요. 다만 요즘은 공급망 공격이 워낙 많다 보니까, 외부 라이브러리 검수라든가 minimumReleaseAge 같은 쪽으로는 확실히 더 신경 쓰게 되는 것 같아요.
목차
리액트의 기본 XSS 보호 기능
dangerouslySetInnerHTML
안전한 인증과 CSRF
토큰 저장
안전한 쿠키 속성
CSRF 방어
서버 측 입력 검증
콘텐츠 보안 정책
인라인 스크립트를 위한 논스(Nonces)
정책 테스트하기
마치며
참고 자료
글 링크 접속이 안되는 것 같습니다..!