본문 바로가기

portfolio

웹 보안 HTTPS 설정

https://www.yes24.com/Product/Goods/124156282

프런트엔드 개발을 위한 보안 입문 - 예스24

지금이라도 알아두면 쓸데 있는 취약성 관리 대책프런트엔드 분야의 발전으로 다양한 기능과 UI를 개발할 수 있게 됐지만, 그만큼 프런트엔드와 관련된 보안 문제도 많아졌다. 이 책은 보안 관

www.yes24.com


 
 
 
1. HTTP통신은 보안과 관련해 세가지 취약점이 있다.
- 통신 데이터 도청이 가능하다  ->  은닉하는 구조가 필요하다.
- 통신 상대의 진위 여부 확인이 어렵다  ->   통신 상대의 진위 여부를 검증하는 구조가 필요하다.
- 통신 과정에서 데이터 수정 여부가 확인이 안된다....   ->   해커의 통신 과정에서의 수정을 막기위해서는 데이터의 결함이나 무결성을 보장할 수 있는 구조가 필요하다.
 
 
 
2. HTTPS는 TLS(통신 데이터 암호화)라고 하는 통신 프로토콜을 사용해 HTTP 데이터를 암호화해서 통신하는 구조.
- TLS는 데이터를 암호화하는 기능과 데이터의 변조를 막는 체크 기능을 제공한다. 또 인증태그라는 검증용 데이터를 사용하는데 복호화와 동시에 인증태그를 사용해 암호문 변조를 체크한다. 만약 변조가 발생하면 에러 통신을 종료한다.
 
 

https://localhost

 
3. Mixed Content(리소스가 혼재 되어 있는상태) 
HTTP를 사용하더라도 HTTP통신을 하는것을 Mixed Content라고 한다.  
- Passive mixed content  -> 이미지와 영상, 음성 파일과 같은 리소스를 변경하면  실행되는 코드는 포함되지 않아서 영향이 적다.
- Active mixed contetn  -> 자바스크립트와 CSS등 브라우저에서 실행되는 코드패턴이라 코드가 변경되면 보안위험이 있다.
 
 
 
 
4.HSTS를 사용해 HTTPS로 통신 강제하기
HSTS를 로컬 HTTP 서버에서 구현 
 
HSTS만료시간을 60초로 설정했다.

app.use(
  express.static("public", {
    setHeaders: (res, path, stat) => {
      res.header("X-Frame-Options", "SAMEORIGIN");
      res.header("Strict-Transport-Security", "max-age=60");
    },
  })
);

 
 
 HTTPS서버로 리다이렉션 처리했다.

app.use((req, res, next) => {
  if (req.secure) {
    next();
  } else {
    res.redirect(`https://${req.hostname}`);
  }
});

 
 
 
 
4-1. HSTS는 HTTPS에서 접속할 때 Strict-Transport-Security 헤더를 반환해 활성화한다.
사진에서 max-age=60으로 HSTS만료는 적용시간을 60초로 설정했다.

https://localhost

 
 
4-2. http://localhost로 다시 접속하면 HSTS가 HTTPS로 리다이렉션된다. 
 

http://localhost

 
 
 
4-3. 마지막으로 Strict-Transport-Security의 max-age:60초가 만료되면 HSTS가 비활성화되어 HTTPS로 리다이렉션 된다.