리액트에서의 XSS 대응방안

https://dev.to/thawkin3/protecting-against-xss-attacks-in-react-441m?fbclid=IwAR38Fe8L3jovxxdmJWNxVM0-SxeQFGXYwzgalcJNE-sEEyVdbEvUrD-LPds

이건 버그바운티는 아니지만 리액트에서의 XSS 공격에 대한 대응방안을 잘 적어놨다. XSS 공격은 버그바운티 뿐만 아니라 실무에서도 많이 나오는 공격이기 때문에 좋은 대응 방안은 알면 알수록 도움이 많이 된다. 생각보다 어렵진 않다. dangerouslySetInnerHTML이라는 속성 사용을 자제하면 리액트에선 간단하게 XSS 공격이 막힌다.  대신 아래와 같은 코드를 사용한다.

<p style={searchResultsStyle}>You searched for: <b>{this.state.submittedSearch}</b></p>

[출저]:https://dev.to/thawkin3/protecting-against-xss-attacks-in-react-441m?fbclid=IwAR38Fe8L3jovxxdmJWNxVM0-SxeQFGXYwzgalcJNE-sEEyVdbEvUrD-LPds

현재 사진은 링크 걸어놓은 문서 안에 있는 사진인데 어떻게 방어되는지 써보고 싶어 캡쳐했다. XSS 공격이 방어되면 경고창이 출력되지 않고 사진과 같이 입력값 형태로 출력됨을 볼 수 있다. 생각했던것보다 리액트에선 XSS 공격 방어가 간편하다.