정민재 12주차 정리

12주차(14~15장)/정민재.md

@@ -0,0 +1,105 @@
+# [12회차 08.25.] 14, 15장
+
+# 14장: 웹사이트 보안을 위한 리액트와 웹페이지 보안 이슈
+
+## 14.1 리액트에서 발생하는 크로스 사이트 스크립팅(XSS)
+
+웹 애플리케이션에서 가장 많이 보이는 취약점 중 하나로, 제 3자가 웹사이트에 악성 스크립트를 삽입해 실행할 수 있는 취약점을 의미한다.
+
+### 14.1.1 dangerouslySetInnerHTML prop
+
+특정 부라우저 DOM의 innerHTML을 특정한 내용으로 교체할 수 있는 방법이다. 
+
+### 14.1.2 useRef를 활용한 직접 삽입
+
+useRef는 직접 DOM에 접근할 수 있어서, innerHTML에 보안 취약점이 있는스크립트를 삽입하면 문제가 발생한다.
+
+### 14.1.3 리액트에서 XSS 문제를 피하는 방법
+
+삽입할 수 있는 HTML을 안전한 HTML 코드로 한 번 치환하는 것이다.
+
+이러한 과정을 새니타이즈(sanitize)나 이스케이프(escape)라고 한다.
+
+새니타이즈는 직접 구현할 수 있지만 라이브러리를 사용하는 것이 가장 확실한 방법이다.
+
+## 14.2 getServerSideProps와 서버 컴포넌트를 주의하자
+
+서버에는 일반 사용자에게 노출되면 안 되는 정보들이 담겨있기 때문에 클라이언트, 즉 브라우저에 정보를 내려줄 때는 조심해야 한다.
+
+## 14.3 태그의 값에 적절한 제한을 둬야 한다
+
+href 내에 JS코드가 존재할 수 있다.
+
+XSS에서 다룬 내용과 비슷하게, href에 사용자가 입력한 주소를 넣을 수 있다면 피싱 사이트로 이동시키는 보안이슈로 이어질 수 있다.
+
+## 14.4 HTTP 보안 헤더 설정하기
+
+HTTP 보안 헤더란 브라우저가 렌더링하는 내용과 관련된 보안 취약점을 미연에 방지하기 위해 브라우저와 함께 작동하는 헤더다. 
+
+### 14.4.1 Strict-Transport-Security
+
+모든 사이트가 HTTPS를 통해 접근해야 하며, 만약 HTTP로 접근하는 경우 모든 시도는 HTTPS로 변경되게 한다.
+
+### 14.4.2 X-XSS-Protection
+
+비표준 기술로, 현재 사파리와 구형 브라우저에서만 제공되는 기능이다.
+이 헤더는 페이지에서 XSS 취약점이 발견되면 페이지 로딩을 중단하는 헤더다.
+
+### 14.4.3 X-Frame-Options
+
+페이지를 frame, iframe, embed, object 내부에서 렌더링을 허용할지를 나타낼 수 있다.
+
+### 14.4.4 Permissions-Policy
+
+웹 사이트에서 사용할 수 있는 기능과 사용할 수 없는 기능을 명시적으로 선언하는 헤더다.
+
+### 14.4.5 X-Content-Type-Options
+
+Content-type 헤더에서 제공하는 MIME유형이 브라우저에 의해 임의로 변경되지 않게 하는 헤더다.
+
+### 14.4.6 Referrer-Policy
+
+Referer 헤더에서 사용할 수 있는 데이터를 나타낸다.
+
+### 14.4.7 Content-Security-Policy
+
+XSS 공격이나 삽입 공격 공격과 같은 다양한 보안 위협을 막기 위해 설계됐다.
+
+### 14.4.8 보안 헤더 설정하기
+
+**Next.js**
+HTTP경로별로 보안 헤더를 적용할 수 있다. next.config.js에서 다음과 같이 추가할 수 있다.
+
+### 14.4.9 보안 헤더 확인하기
+
+https://securityheaders.com/ 을 방문해서 보안 헤더의 현황을 확인할 수 있다.
+
+## 14.5 취약점이 있는 패키지의 사용을 피하자
+
+## 14.6 OWASP Top 10
+
+## 14.7 정리
+
+# 15장 마치며
+
+## 15.1 리액트 프로젝트를 시작할 때 고려해야 할 사항
+
+### 15.1.1 유지보수 중인 서비스라면 리액트 버전을 최소 16.8.6에서 최대 17.0.2로 올려두자
+
+### 15.1.2 인터넷 익스플로러 11 지원을 목표한다면 각별히 더 주의를 기한다
+
+### 15.1.3 서버 사이드 애플리케이션을 우선적으로 고려한다
+
+### 15.1.4 상태 관리 라이브러리는 꼭 필요할 때만 사용한다
+
+### 15.1.5 리액트 의존성 라이브러리 설치를 조심한다
+
+## 15.2 언젠가 사라질 수도 있는 리액트
+
+### 15.2.1 리액트는 그래서 정말 완벽한 라이브러리인가?
+
+### 15.2.2 오픈소스 생태계의 명과 암
+
+### 15.2.3 제이쿼리, AngularJS, 리액트, 그리고 다음은 무엇인가?
+
+### 15.2.4 웹 개발자로서 가져야 할 유연한 자세