[FE_Roadmap] Web Security Knowledge

HTTPS

• 월드 와이드 웹에서 정보를 주고 받을 수 있는 프로토콜
• 클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 프로토콜
• HTTP는 암호화하지 않은 평문 데이터 전송이므로,데이터 노출 및 변조의 위험이 있다.

HTTPS

• HTTPS는 TLS/SSL인터넷 암호화 통신 프로토콜을 사용하여 암호화를 통해 평문 데이터 문제 해결한다. (무결성 보장)
  • TLS 는 SSL의 업데이트 버전이라고 이해
• 서버에서 HTTPS 프로토콜 사용을 위해 SSL 인증서를 CA기관으로부터 발급 받는다.
• 80번 port를 사용하는 http와 달리 https는 443번 port를 사용한다.

HTTPS 동작 과정

• 클라이언트(브라우저)가 서버로 최초 연결 시도를 함
• 서버는 SSL 인증서를 브라우저에게 넘겨줌
• 브라우저는 인증서의 유효성을 검사하고(CA기관의 공개키로 확인) 세션키를 발급함
• 브라우저는 세션키를 보관하며 추가로 서버의 공개키로 세션키를 암호화하여 서버로 전송함
• 서버는 개인키로 암호화된 세션키를 복호화하여 세션키를 얻음
• 클라이언트와 서버는 동일한 세션키를 공유하므로 데이터를 전달할 때 세션키로 암호화/복호화를 진행함

Content Security Policy

• CSP는 XSS 및 데이터 삽입 공격 을 비롯한 특정 유형의 공격을 감지하고 완화하는 데 도움이 되는 추가 보안 계층이다. 이러한 공격은 데이터 도용에서 사이트 훼손, 맬웨어 배포에 이르기까지 모든 것에 사용된다.
• 스크립트를 실행 가능한 화이트리스트를 만들어 화이트리스트 도메인에서 로드된 스크립트만 실행한다.
• CSP는 스크립트, 스타일 시트, 이미지, 글꼴, 개체, 미디어 (오디오, 비디오), 프레임 및 양식 작업을 포함한 모든 동적 원본에 대해 허용된 원본을 지정할 수 있다.
• CSP 는 Content-Security-Policy HTTP 헤더를 통해 설정된다.

Content-Security-Policy: default-src 'self'; img-src *; media-src example.org example.net; script-src userscripts.example.com

웹 사이트 관리자는 웹 응용 프로그램 사용자가 자신의 콘텐츠에 모든 원본의 이미지를 포함할 수 있도록 허용하지만 오디오 또는 비디오 미디어는 신뢰할 수 있는 공급자로 제한하고 모든 스크립트는 신뢰할 수 있는 코드를 호스팅하는 특정 서버로만 제한하려고 한다.​

• 일반적인 CSP는 URL 허용 목록을 기반으로 하기 때문에 우회가 가능하다.
• 엄격한 CSP를 통해 조금 더 안전하게 사용할 수 있다.
  • 임시값 기반 CSP : 런타임 시 임의의 숫자를 생성하여 CSP에 포함하고 페이지의 모든 스크립트 태그와 연결한다. 공격자는 해당 스크립트에 대한 올바른 임의의 숫자를 추측해야 하기 때문에 페이지에 악성 스크립트를 포함하고 실행할 수 없습니다. 이것은 숫자를 추측할 수 없고 런타임 시 모든 응답에 대해 새로 생성된 경우에만 작동한다.
  • 해시 기반 CSP : 모든 인라인 스크립트 태그의 해시가 CSP에 추가됩니다. 각 스크립트에는 다른 해시가 있습니다. 공격자는 페이지에 악성 스크립트를 포함하고 실행할 수 없습니다. 해당 스크립트의 해시가 CSP에 있어야 하기 때문이다.

CORS(Cross-Origin Resource Sharing)

• 교차 출처 리소스 공유는 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려준다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다.
• CORS의 에러가 생기는 이유는 SOP를 위반한 에러이다.
  • SOP(same-origin policy, 동일 출처 정책) : 출처가 동일한 프로토콜, 포트번호, 도메인에서만 자원을 사용가능 하도록 하는 보안정책이다.
• 즉, CORS 에러는 요청 브라우저에서 다른 도메인(프로토콜, 포트번호)을 가지는 서버로 요청이 갈때 브라우저에서 발생하는 보안정책이다.
• CSRF(사이트 간 요청 위조), XSS(교차 사이트 스크립팅)을 보안할 수 있다.

CORS를 사용하는 요청

• XMLHttpRequest 또는 Fetch API
• 웹 글꼴 (@font-face)
• WebGL (Web Graphics Library)
• 캔버스에 그린 이미지/비디오 프레임 (drawImage())
• 이미지의 CSS 모양 (CSS Shapes from images)

CORS 원리

• 단순 요청(Simple requests)
  • 단순 요청은 서버에 API를 요청하면 서버는 Access-Control-Allow-Origin 헤더를 포함한 응답을 브라우저에 보낸다. 브라우저는 Access-Control-Allow-Origin 헤더를 확인해서 CORS 동작을 처리한다.
  • 요청 메서드(method)는 GET, HEAD, POST 만 가능하다.
  • Accept, Accept-Language, Content-Language, Content-Type를 제외한 헤더를 사용하면 안 됩니다.
  • Content-Type 헤더는 application/x-www-form-urlencoded, multipart/form-data, text/plain 만 가능하다.
• 프리플라이트 요청(preflighted)
  • Preflight 요청은 서버에 예비 요청을 보내서 안전한지 판단한 후 본 요청을 보내는 방법이다
  • 먼저 OPTIONS 메서드를 통해 다른 도메인의 리소스로 HTTP 요청을 보내 실제 요청이 전송하기에 안전한지 확인 합니다. cross-origin 요청은 유저 데이터에 영향을 줄 수 있기 때문에 이와같이 미리 전송한다.

OWASP Security Risks

• OWASP(The Open Web Application Security Project)는 오픈소스 웹 애플리케이션 보안 프로젝트이다. 주로 웹에 관한 정보노출, 악성 파일 및 스크립트, 보안 취약점 등을 연구하여 웹 애플리케이션 취약점 중에서 빈도가 많이 발생하고, 보안상 영향을 크게 줄 수 있는 것들 10가지를 선정한다.

2017 기준 10가지 종류

• Injection
• Broken authentication
• Sensitive data exposure
• XML external entities (XXE)
• Broken access control
• Security misconfigurations
• Cross site scripting (XSS)
• Insecure deserialization
• Using components with known vulnerabilities
• Insufficient logging and monitoring

클라이언트 측 보안 방법

• innerHTML 대신 innerText 사용
  • innerHTML 속성은 문자열 자체를 수정할 수 있기 때문에, 악의를 가진 해커가 script 태그를 사용해 JavaScript 코드를 작성한 뒤 실행되도록 만들 수 있다.
  • HTML5에서 innerHTML과 함께 삽입된 script 태그가 실행되지 않도록 지정했지만, 우회가 가능하다.
• eval() 함수 사용 x

console.log(eval('2 + 2')); // Expected output: 4

 

• eval()은 인자로 받은 코드를 caller의 권한으로 수행하는 위험한 함수입니다. 악의적인 영향을 받았을 수 있는 문자열을 eval()로 실행한다면, 당신의 웹페이지나 확장 프로그램의 권한으로 사용자의 기기에서 악의적인 코드를 수행하는 결과를 초래할 수 있습니다.

• XML 또는 JSON을 동적으로 작성 x
• 클라이언트에 의존 x (사용자가 클라이언트측 로직을 제어할 수 있음. 우회하거나 코드 중단점 설정, 플러그인 등을 통해 제어가능)
• 클라이언트에 중요한 정보 보관 x
• 클라이언트에서 암호화 수행 x
• ...

https

• https://mangkyu.tistory.com/98
• https://developer.mozilla.org/ko/docs/Glossary/SSL

cors

• https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
• https://beomy.github.io/tech/browser/cors/

csp

• https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
• https://web.dev/i18n/ko/strict-csp/

OWASP

• https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html
• https://sucuri.net/guides/owasp-top-10-security-vulnerabilities-2020/