'Coding' 카테고리의 다른 글
| Reflow/Repaint 실행 시점 (0) | 2023.05.22 |
|---|---|
| 브라우저 렌더링 원리 (0) | 2023.05.22 |
| 호이스팅(hoisting)이란? (0) | 2023.05.22 |
| HTTP & HTTPS ( SSL,TLS ) (2) | 2020.06.22 |
| eslint 자동정렬 (0) | 2019.08.09 |
주소창에 URL을 입력하면 일어나는 일
2023. 5. 22. 22:00
호이스팅(hoisting)이란?
2023. 5. 22. 22:00
- 호이스팅이란 "끌어올린다" 라는 뜻
- 선언문이 스코프 내의 최상단으로 끌어올려지는 현상
변수 호이스팅
console.log(a);
var a = 2;- 컴파일러는 Javascript 엔진이 인터프리팅을 하기 전에 컴파일을 하는데 이 때, var a = 2; 를 2개의 구문으로 해석
- var a
- a = 2
- var a는 변수 선언문으로 컴파일할 때 처리하고, a = 2는 실행할 때까지 내버려 둠
- 변수 a는 호이스팅 되고 콘솔에는 다음과 같은 결과가 표시됨
undefined;- var는 선언, 초기화가 동시에 이루어지기 때문에 undefined를 출력
- let,const는 선언단계만 호이스팅 되기 때문에 Reference Error를 출력
함수선언문 호이스팅
func();
function func() {
console.log('함수 호이스팅');
}console :
함수 호이스팅- 함수표현식은 호이스팅 되지 않음
'Coding' 카테고리의 다른 글
| 브라우저 렌더링 원리 (0) | 2023.05.22 |
|---|---|
| 주소창에 URL을 입력하면 일어나는 일 (0) | 2023.05.22 |
| HTTP & HTTPS ( SSL,TLS ) (2) | 2020.06.22 |
| eslint 자동정렬 (0) | 2019.08.09 |
| Conway Sequence es6 VanillaJS (0) | 2019.08.06 |
HTTP & HTTPS ( SSL,TLS )
2020. 6. 22. 15:56
HTTP & HTTPS
- HTTP와 HTTPS 둘 다 인터넷에서 사용하는 웹서버와 클라이언트의 인터넷 브라우저 사이에 문자를 전송하기 위한 통신규약으로서, 웹서버와 브라우저 간 암호화 된 연결을 설정하는 표준 보안 기술입니다.
- 철자도 비슷하듯이 HTTP, HTTPS 둘 다 같은핏줄(HyperText Transfer Protocol)을 이어받은 형제입니다.
- 애플리케이션 레벨의 프로토콜로 TCP/IP 위에서 작동합니다.
HTTP
- HTTP = HyperText Transfer Protocol
- 기본 포트 : 80
- 구형 통신 규약으로 보안성이 약합니다.
- 접속도중 끊기더라도 처음부터 다시 시작할 필요가 없어 시간을 낭비하지 않는 장점이 있습니다.
- HTTP는 클라이언트가 요청한 페이지를 암호화되지 않은 상태로 주고 받을 수 있어 HTTP로 만든 홈페이지는 클라이언트와 서버의 네트워크에 침임해 중간에서 정보를 가로챌 수 있는 위험이 있습니다.
HTTPS
- HTTPS = HyperText Transfer Protocol over Secure Socket Layer
- 신형 통신 규약으로 더 안전하고, HTTP의 상위 고급버전 입니다. 따라서 보안성이 매우 강합니다.
- 끝에 붙여진 S는 Secure의 약자로, S가 붙으면 보안이 강화된 것 입니다.
- S는 SSL(Secure Socket Layer)을 의미하는것으로 주고 받는 정보가 암호화 되어 있음을 뜻합니다.
- 속도가 HTTP보다 느립니다, 하지만 속도 차이는 사용자로서 느끼지 못할 정도입니다.
- HTTPS의 암호화는 ( 클라이언트 = 공개 키) ( 서버 = 서버만이 알 수 있는 개인 키 )를 부여하는 방식입니다.
[ 원리 : 사용자(클라이언트)가 사이트에 접속하게 되면 서버가 공개키를 사용자에게 보내게되고 이를 통해서 사용자의 암호화된 정보를 서버는 개인키로 볼 수 있어 네트워크에 침임한 해커는 아무것도 볼 수 없게 됩니다. ]
- 보안상에 장점이 있는 반면 암호화 된 정보를 교환하기 때문에 서버가 과부화에 걸리는 경우가 발생하며, 접속이 끊기게 되면 처음부터 다시 시작해야 하는 불편함이 따릅니다.
- HTTPS는 서버를 인증하고 안전하게 데이터 전송을 암호화하여 교환시 변조되지 않도록 보호해줍니다.
- 만약 HTTPS가 없다면 사이트에 입력한 모든 데이터(사용자이름, 비밀번호, 신용카드 및 은행정보, 기타 양식 제출 정보)가 암호화되지 않아서 일반 텍스트로 전송되기 때문에 해커가 이를 가로채거나 도청을 하기 쉽습니다. 그러므로 중요한 정보를 입력하기 전에 해당 사이트가 HTTPS로 되어있는지, 보안인증서가 설치된 사이트인지 안정성을 반드시 확인 해야 합니다.
SSL
- SSL = Secure Socket Layer
- 웹서버와 웹사이트에서 이루어지는 모든 정보전송이 https://로 암호화 프로토콜을 통해 안전하게 전송되게 하는 인증서입니다.
- SSL을 사용하게되면 로그인, 회원가입, 예약 등의 개인정보를 입력하더라도 스니핑(sniffing)에 의하여 정보를 도용당할 걱정이 없습니다.
- SSL 인증서의 사용목적은 스니핑 방지(Sniffing Prevention) 입니다.
- 네트워크를 공동으로 사용하는 PC방, 회사, 학교등에서 간단한 스니핑툴로 인해 개인정보가 누출되기 쉬운데, SSL 인증서를 설치하면 (HTTPS 형식을 사용하면) 모든 정보가 암호화되어 정보가 유출되더라도 안심할 수 있습니다.
TLS
- TPS = Transport Layer Security
- 인터넷에서의 정보를 암호화해서 송수신하는 프로토콜 입니다.
- SSL 3.0(Secure Socket Layer) 프로토콜에서 보다 안전하고, 프로토콜의 스펙을 정확히하고 안정성이 높게 발전한 것입니다.
- 국제 인터넷 표준화 기구에서 인증받은 통신 규약 입니다.
- 암호화 프로토콜은 보안연결을 제공하여 두 당사자가 사생활 보호와 데이터 무결성을 가지고 서로 통신할 수 있게 해줍니다.
SSL 전체 통신 과정
- 암호를 만드는 행위인 암호화를 할 때 사용하는 일종의 비밀번호를 키(key) 라고 합니다.
- 키에 따라서 암호화된 결과가 달라지기 때문에 키를 모르면 암호를 푸는 행위인 복호화를 할 수가 없습니다.
- 대칭키 : 하나의 키로 데이터를 암호화하고 복호화합니다. 하나의 키로 암복호화를 하기 때문에 해당 키가 노출된다면 보안상 아주 치명적인 문제가 발생합니다. 장점이라고 한다면 암복호화에 드는 비용이 적습니다.
- 비대칭키 : 2개의 키(공개키, 비공개키)로 암호화&복호화를 합니다. 즉, 공개키로 데이터를 암호화하면 반드시 비밀키로만 복호화 가능하고 비밀키로 데이터를 암호화하면 공개키로만 복호화할 수 있습니다.
이 방식에 착안해서 두개의 키중 하나를 비공개키(private key, 개인키, 비밀키)로 하고, 나머지를 공개키(public key)로 지정합니다.
비공개키는 자신만이 가지고있고, 공개키를 타인에게 제공합니다. 그렇다면 암호화, 복호화의 주체가 되는 키에 따른 특징은 무엇일까요?
1) 암호화 - 공개키 / 복호화 - 비공개키 : 진짜 데이터를 암호화하여 보호하기 위한 목적입니다.
2) 암호화 - 비공개키 / 복호화 - 공개키 : 인증을 위한 목적입니다. 즉, 서버에서 비공개키로 데이터를 암호화해서 보냈고 클라이언트에서 공개키로 복호화가 된다면 최소한 해당 서버는 클라이언트 입장에서 신뢰할 수 있다는 인증과정을 거치게 된것입니다.
SSL 동작방식
1. 사용자가 브라우저로 사이트에 접속하면 웹서버는 인증서를 웹브라우저에게 보냅니다. 이 인증서에는 인증기관의 개인키로 암호화된 사이트의 정보와 공개키가 들어있습니다.
2. 브라우저는 이미 가지고 있는 인증기관의 공개키로 웹 서버에서 받은 인증서를 복호화 해서 확인합니다.
3. 브라우저는 실제 데이터의 암호화에 사용 될 대칭키를 생성하고, 인증서에서 꺼낸 웹 서버 측의 공개키로 암호화 해서 웹 서버로 보냅니다.
4. 웹서버는 자신이 가지고 있는 개인키로 브라우저가 보내온 대칭키를 복호화 해서 얻습니다. 이제 이 대칭키로 데이터를 암호화해서 주고 받게 됩니다.
'Coding' 카테고리의 다른 글
| 주소창에 URL을 입력하면 일어나는 일 (0) | 2023.05.22 |
|---|---|
| 호이스팅(hoisting)이란? (0) | 2023.05.22 |
| eslint 자동정렬 (0) | 2019.08.09 |
| Conway Sequence es6 VanillaJS (0) | 2019.08.06 |
| javascript 뒤로가기 시 경고창 표시 기능 (0) | 2019.03.07 |