From 96fb73dbf1767713360f81a1a009f75b7dc3000a Mon Sep 17 00:00:00 2001 From: WooWan Date: Sun, 25 Feb 2024 16:29:03 +0900 Subject: [PATCH] =?UTF-8?q?14=EC=9E=A5=20=EB=B3=B4=EC=95=88=20=ED=97=A4?= =?UTF-8?q?=EB=8D=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\354\232\260\354\260\275\354\231\204.md" | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 "14\354\236\245/\354\232\260\354\260\275\354\231\204.md" diff --git "a/14\354\236\245/\354\232\260\354\260\275\354\231\204.md" "b/14\354\236\245/\354\232\260\354\260\275\354\231\204.md" new file mode 100644 index 0000000..d25ca5a --- /dev/null +++ "b/14\354\236\245/\354\232\260\354\260\275\354\231\204.md" @@ -0,0 +1,57 @@ +# 14장 웹페이지 보안을 위한 리액트와 웹페이지 보안 이슈 + +### + +## 리액트에서 발생하는 크로스 사이트 스크립팅(XSS) + +### XSS란? + +개발자가 아닌 다른 사용자가 악성 script를 넣어서 의도하지 않은 자바스크립트 동작을 하게 만드는 행동 + + + +### dangerouslySetInnerHTML + +html에 특정 파트에 html을 설정할 수 있는 프로퍼티 + +```tsx +const html = `` +
+``` + + + +Sanitize-html 라이브러리로 허용된 html 태그를 설정할 수 있다.(허용하지 않는 태그 escaper out) + + + +리액트에서는 jsx bracket - {}와 함께 사용할 시, 자동으로 이스케이프 된다. + +단, 의도대로 실행되지 않으니 실행이 필요할 경우 sanitize 라이브러리와 함께 dangerousSetIneerHTML 사용을 고려해야한다. + +```tsx +const html = `` + +
{html}
+``` + + + + + +## getServerSideProps와 서버 컴포넌트 + +서버사이드에서는 쿠키와 같은 개인 정보에 접근할 수 있다. + +하지만, 단순히 편리함을 위해서 보안 정보를 클라이언트에 전달하는 것은 위험하다. + + + + + +## HTTP 보안 헤더 + +* Strict-Transport-Security: 모든 사이트가 HTTPS를 통해 접근해야하며, HTTP일 경우 HTTPS로 변경한다. +* X-Frame-Options: iframe, embed 내부에서 렌더링을 허용 여부를 나타낸다. (deny, same-origin 등을 설정하자) +* X-Content-Type-Options: Content-type의 MIME 유형이 브라우저에 의해 임의로 변경되지 않게 하는 헤더 +* Referer, Referrer-Policy: Refer를 통해 사용자가 어디로부터 접속하였는지 알 수 있다. 사용자 통계, 로그 추적을 할 때 사용할 수 있다. Refer-policy 설정을 통해, 사용자의 refer를 안전하게 감출 수 있다. 크롬의 기본 정책은 strict-origin-when-cross-origin이다. 다른 origin일 혹은 다른 schema(http, https)일 경우, Origin만을 제공한다. (full url X) \ No newline at end of file