diff --git "a/12\354\243\274\354\260\250(14~15\354\236\245)/\354\240\225\353\257\274\354\236\254.md" "b/12\354\243\274\354\260\250(14~15\354\236\245)/\354\240\225\353\257\274\354\236\254.md" new file mode 100644 index 0000000..68e532d --- /dev/null +++ "b/12\354\243\274\354\260\250(14~15\354\236\245)/\354\240\225\353\257\274\354\236\254.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 웹 개발자로서 가져야 할 유연한 자세