[우창완] 14장: 웹사이트 보안을 위한 리액트와 웹페이지 보안 이슈

14장/우창완.md

@@ -0,0 +1,57 @@
+# 14장 웹페이지 보안을 위한 리액트와 웹페이지 보안 이슈
+
+### 
+
+## 리액트에서 발생하는 크로스 사이트 스크립팅(XSS)
+
+### XSS란?
+
+개발자가 아닌 다른 사용자가 악성 script를 넣어서 의도하지 않은 자바스크립트 동작을 하게 만드는 행동
+
+
+
+### dangerouslySetInnerHTML
+
+html에 특정 파트에 html을 설정할 수 있는 프로퍼티
+
+```tsx
+const html = `<span><svg/onload=alert(origin)></span>`
+<div dangerousSetIneerHTML={{_html: html}}/>
+```
+
+
+
+Sanitize-html 라이브러리로 허용된 html 태그를 설정할 수 있다.(허용하지 않는 태그 escaper out)
+
+
+
+리액트에서는 jsx bracket - {}와 함께 사용할 시, 자동으로 이스케이프 된다.
+
+단, 의도대로 실행되지 않으니 실행이 필요할 경우 sanitize 라이브러리와 함께 dangerousSetIneerHTML 사용을 고려해야한다.
+
+```tsx
+const html = `<span><svg/onload=alert(origin)></span>`
+
+<div>{html}</div>
+```
+
+
+
+
+
+## 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)