[D2 CAMPUS]웹 개발자의 스펙 : HTTP

웹개발자의 스펙 : HTTP

최영목

서비스플랫폼개발센터

ü 웹개발자가갖추어야할 기본기는무엇인가?

ü 웹은어떻게동작하는가?

ü 로그아웃되었어요!

ü 화면이나오지않아요!

ü 기본에충실하자

웹 개발자가알아야할기본기는무엇인가?

일반

4 /서비스플랫폼개발센터

개발자는무엇을알아야할까?

프로그래밍언어 알고리즘 자료구조

운영체제 네트워크 데이터베이스

…⋯ …⋯ …⋯

일반

웹개발자는무엇을알아야할까?

HTTP�� + HTML

일반

오늘의주제

HTTP(Hypertext�� Transfer�� Protocol)

웹은어떻게동작하는가?

일반

인터넷과웹

출처 : http://www.w3.org/Help/#webinternet

인터넷 ≠�� 웹

일반

웹아키텍처

출처 : http://www.w3.org/TR/webarch/

리소스(자원)

일반

웹아키텍처

식별(URIs)

상호작용(HTTP)

포맷(HTML)

일반

웹아키텍처

일반

식별 : URIs

리소스를어떻게식별할것인가?

식별

일반

URI�� (Uniform�� Resource�� Identifier)

리소스를식별하는간결한문자열(RFC�� 3986)

출처 : https://tools.ietf.org/html/rfc3986

식별

일반

출처 : https://en.wikipedia.org/wiki/Uniform_resource_identifier

식별

일반

URL�� (Uniform�� Resource�� Locator)

리소스를식별하는주소(RFC�� 1738)

식별

일반

URN�� (Uniform�� Resource�� Name)

리소스를식별하는이름(RFC�� 1630)

식별

일반

URL문법

<스킴>://<사용자이름>:<비밀번호>@<호스트>:<포트>/<경로>;<파라미터>?<질의>#<프래그먼트>

식별

일반

URL문법

http://d2.naver.com/search/tag?keyword=d2campus_seminar

ftp://d2user:d2pass@d2.navercom:21/no3

식별

일반

URL문법

사용할 프로토콜

식별

일반

URL문법

몇몇 스킴은리소스에 접근하기위해 사용자 이름 /비밀번호가 필요하다.(예 : FTP)

식별

일반

URL문법

서버의 호스트명 또는 IP 주소

식별

일반

URL문법

서버가 열어놓은포트번호(HTTP의기본 포트는 80이다.)

식별

일반

URL문법

서버 내 리소스위치

식별

일반

URL문법

스킴 파라미터(주의 : 우리가흔히 말하는 HTTP�� 요청 파라미터가아니다!)

식별

일반

URL문법

스킴에서 애플리케이션에파라미터를전달하는데쓰인다(쿼리, 쿼리스트링이라고부른다.)

포맷에 제약사항은없으나 편의상 ‘&’로 나뉜 ‘이름=값’ 쌍 형식을사용한다.

식별

일반

URL문법

리소스의조각이나일부분을 가리키는이름이다.URL이 특정 객체를가리킬 경우에 프래그먼트필드는 서버에전달되지 않는다.

이는 클라이언트에서만사용한다.

식별

일반

포맷 : HTML

어떤종류의리소스인가?

포맷

일반

MIME�� (Multipurpose�� Internet�� Mail�� Extensions)

메시지엔티티본문의컨텐츠를설명하는표준화된이름

포맷

일반

MIME�� 타입

text image audio video

application multipart message

포맷

일반

상호작용 : HTTP

HTTP를통해서어떻게상호작용을하는가?

상호작용

일반

웹서버와클라이언트

HTTP통신은 TCP/IP를통해이루어진다.

상호작용

일반

웹서버와클라이언트상호작용

Network�� Interfaces

데이터링크�� 계층

네트워크�� 계층

전송�� 계층

애플리케이션�� 계층

Network�� Interfaces

TLS�� or�� SSL

데이터링크�� 계층

네트워크�� 계층

전송�� 계층

보안�� 계층

HTTP 애플리케이션�� 계층

일반

HTTP�� 요청

HTTP�� 응답클라이언트 서버

상호작용

일반

1. 브라우저(클라이언트)에http://d2.naver.com:80/news/6106083�� 라고입력한다.

http://d2.naver.com:80/news/6106083

클라이언트 서버

상호작용

일반

2. 브라우저가호스트명(d2.naver.com)에대한 IP 주소와포트번호를얻는다.

http://d2.naver.com:80/news/6106083

117.52.129.49

DNS�� 서버

상호작용

일반

3. 브라우저가117.52.129.49의80번포트로 TCP�� 커넥션을생성한다.

TCP�� 커넥션

IP�� :�� 117.52.129.49

상호작용

일반

4. 브라우저가서버로HTTP�� 요청을보낸다.

HTTP�� 요청

상호작용

일반

5. 서버가요청을처리한다.

처리중

상호작용

일반

6. 서버가브라우저로응답을보낸다.

클라이언트 서버HTTP�� 응답

상호작용

일반

7. 브라우저가TCP�� 커넥션을끊는다.

상호작용

일반

HTTP�� 커넥션관리

HTTP커넥션관리를잘 해야응답속도를줄일 수있다.

상호작용

일반

HTTP�� 트랜잭션

클라이언트

서버

DNS찾기 연결 요청 처리 응답 종료 시간

상호작용

일반

HTTP�� 커넥션 :�� 순차

클라이언트

서버

트랜잭션-1

커넥션-1 시간

트랜잭션-2

커넥션-2

트랜잭션-3

커넥션-3

요청-1 응답-1 요청-2 응답-2 요청-3 응답-3

상호작용

일반

HTTP�� 커넥션 :�� 병렬

클라이언트

서버

트랜잭션-1

커넥션-1 시간

트랜잭션-2,3,4(병렬 커넥션)

커넥션-2

요청 응답

커넥션-3

커넥션-4

상호작용

일반

HTTP�� 커넥션 :�� 지속

클라이언트

서버

트랜잭션-1

커넥션-1 시간

트랜잭션-2 트랜잭션-3

요청 응답

상호작용

일반

HTTP�� 커넥션 :�� 파이프라인

클라이언트

서버

커넥션-1 시간

트랜잭션-1, 2, 3, 4

요청 응답

상호작용

일반

HTTP�� 커넥션상호작용

일반

HTTP�� 메시지상호작용

<버전> <상태코드> <사유구절>

<헤더>

<본문>

시작줄

헤더

본문

<메서드> <요청URL>�� <버전>

<헤더>

<본문>

요청 메시지 응답 메시지

출처 : https://tools.ietf.org/html/rfc7230#section-3

일반

HTTP�� 메시지상호작용

HTTP/1.1 200�� OK

Content-Type:�� text/plainContent-Length:�� 11...

Hello World

시작줄

헤더

본문

GET�� /hello.txt HTTP/1.1

Accept�� :�� text/*Host: d2.naver.com…⋯

요청 메시지 응답 메시지

일반

HTTP�� 메시지 :시작줄(메서드)상호작용

메서드 설명 메시지 본문

GET 서버에서어떤문서를 가져온다. 없음

HEAD 서버에서 어떤문서에 대해 헤더만가져온다. 없음

POST 서버가 처리해야할 데이터를 보낸다. 있음

PUT 서버에 요청메시지의 본문을 저장한다. 있음

TRACE 메시지가 프락시를거쳐 서버에도달하는 과정을추적한다.

없음

OPTIONS 서버가 어떤메서드를 수행할 수있는지 확인한다. 없음

DELETE 서버에서 문서를제거한다. 없음

출처 : https://tools.ietf.org/html/rfc7231#section-4

일반

HTTP�� 메시지 :시작줄(상태코드)상호작용

전체 범위 정의된 범위 분류

100-199 100-101 정보

200-299 200-206 성공

300-399 300-307(306은없음) 리다이렉션

400-499 400-426(418-425는없음) 클라이언트에러

500-599 500-505 서버 에러

출처 :https://tools.ietf.org/html/rfc7231#section-6

일반

HTTP�� 메시지 :헤더상호작용

종류 설명 예시

일반 헤더 서버, 클라이언트가 모두사용. 일반목적 Date,�� Connection

요청 헤더 요청 메시지를위한 헤더 Host,�� Cookie,�� Referer

응답 헤더 응답 메시지를위한 헤더 Set-Cookie,�� Server

엔티티 헤더 엔티티 본문에대한 헤더 Content-Type,�� Location

확장 헤더 애플리케이션개발자들에 의해만들어진비표준 헤더

일반

HTTP�� 메시지 :헤더상호작용

로그아웃이되었어요!(권한이없어요!)

일반

사용자를식별하는방법

ü HTTP는기본적으로익명으로사용하고,상태가없고,매 요청은일회성이고독립적으

로처리된다.

ü 다음과같은사용자식별기술이있다.

• 클라이언트 IP�� 주소추적

• 사용자로그인인증 (HTTP�� Authentication)

• URL에식별자를포함하기

• 쿠키(Cookie)

일반

쿠키(Cookie)는어떻게동작하는가?

HTTP�� 상태 관리체계(HTTP�� state�� Management�� Mechanism,�� RFC�� 6265)

출처 : http://tools.ietf.org/html/rfc6265

일반

1. 브라우저가서버로HTTP�� 요청을보낸다.

브라우저 서버

HTTP�� 요청

일반

2. 서버가브라우저로응답을보낸다.

브라우저 서버HTTP�� 응답(Set-Cookie)

일반

3. 브라우저가다음요청을서버로보낼때 쿠키를함께 보낸다.

브라우저 서버

HTTP�� 요청(Cookie)

일반

누가내쿠키를바꾸었을까?

d2.naver.com admin.d2.naver.com

ü D2�� 사이트를관리하기위해서 admin.d2.naver.com에접속하여작업을진행하였다.

적용여부를확인하기위해서탭을열어 d2.naver.com으로다른사용자로로그인하

였더니이전 admin�� 화면에서로그아웃이되어버렸다.

무슨일이일어난것일까?

일반

naver.com navercorp.com

ü 쿠키는도메인(호스트)단위로구분된다.

출처 : http://tools.ietf.org/html/rfc6265#section-8.5

일반

naver.com d2.naver.com

ü 서브도메인의경우쿠키는공유된다.

일반

d2.naver.com:80 d2.naver.com:8080

ü 도메인이같고,포트가다른경우도쿠키는공유된다.

일반

쿠키는응답속도에영향을주는가?

ü 이론적으로응답속도에영향을주는것은사실이다.

ü 다만국내의경우네트워크속도가빠르고, 요청이많지 않은소규모애플리케이션이라

면크게 신경쓰지않아도된다.

ü 단, 아래의경우는정적 컨텐츠에대해서쿠키를보내지않도록도메인분리등의 조치

를취해야한다.

• 요청량이많은경우(개인사용자를대상으로한서비스등)

• 네트워크가느리거나대역폭이작은경우(해외현지서비스)

• 사용하고있는쿠키의개수및양이많을경우(줄이는것도병행해야한다.)

• 서버의성능이낮은경우(VM장비등)

일반

쿠키는응답속도에영향을주는가?

화면이나오지않아요!

일반

어떻게내부시스템을보호할것인가?

클라이언트 서버admin.d2.naver.comIP : 10.20.30.40

Proxyadmin.d2.naver.comIP�� :�� 117.52.129.49

사내DNS�� 서버

PublicDNS�� 서버

사내망

https://admin.d2.naver.com http://admin.d2.naver.com

일반

HTTPS와혼합된컨텐츠(Mixed�� Content)

ü 이런소스가있다면?

• hello.html

…⋯<script�� src=”http://admin.d2.naver.com/js/jquery.js"></script>…⋯

…⋯</body>

</html>

일반

출처 : https://developer.mozilla.org/ko/docs/Security/MixedContent

일반

ü 문제

• HTTPS페이지가몇몇일반적인HTTP를포함한다면연결은단지부분적으로암호화된다.�� 비암

호화된컨텐츠는스니퍼에서접근가능하며중간공격자에의해내용이수정될수있다.�� 그러므로

연결은더이상안전하지않다.�� 웹페이지가이런형태로제공될때그페이지는Mixed�� Content

페이지라고불린다.1)

1)�� 출처 : https://developer.mozilla.org/ko/docs/Security/MixedContent

일반

ü Mixed�� Passive/Display�� Content

• HTTPS�� 웹페이지에포함되는HTTP로제공되는컨텐츠이다.

• 예를들어공격자는HTTP로제공되는이미지를변경하여부적절한이미지나메세지로사용자에

게보낼수있다.

• Passive�� content�� list

• <audio> (src attribute)

• <img> (src attribute)

• <video> (src attribute)

• <object> subresources (when�� an�� <object>�� performs�� HTTP�� requests)

일반

ü Mixed�� Active�� Content

• HTTPS�� 페이지의DOM이일부나혹은모든부분에접근할수있는컨텐츠이다.

• HTTPS페이지의동작을바꿀수있고잠재적으로사용자로부터민감한정보를훔칠수있다.

• Mixed�� Active�� Content의경우에는중간공격자가HTTP�� 컨텐츠에대한요청을가로챌수있

다. 공격자는악의적인자바스크립트코드를포함하여응답을변경할수 있다.�� 악의적인 Active��

Content는사용자의신원훔치기,민감한사용자정보획득,�� 또는malware를사용자의시스템

에설치할수있다.

• Active�� content�� list

• <script> (src attribute)

• <link> (href attribute)�� (this�� includes�� CSS�� stylesheets)

• XMLHttpRequest object�� requests

• <iframe> (src attributes)

• All�� cases�� in�� CSS�� where�� a url value�� is�� used�� (@font-face, cursor, background-image,�� etc.)

• <object> (data attribute)

일반

올바른변경방법

ü 모든리소스에대해서HTTPS를지원하도록한다.

• HTTP�� 페이지에HTTPS�� 리소스를포함하는것은괜찮다.

ü Proxy를사용하여안전한내부망에서호출할경우소스코드에서상대프로토콜을사용

한다.

…⋯<script�� src=”//admin.d2.naver.com/js/jquery.js"></script>…⋯

…⋯</body>

</html>

일반

올바른변경방법

ü 참고

• http://www.w3.org/TR/mixed-content/

• https://developer.mozilla.org/ko/docs/Security/MixedContent

• https://developer.mozilla.org/en-

US/docs/Security/MixedContent/How_to_fix_website_with_mixed_content

• https://developers.google.com/web/fundamentals/discovery-and-distribution/security-

with-https/make-intra-site-urls-relative?hl=ko

일반

올바르지않은방법

ü 컨텐츠변조

• 유효하지않은HTML의경우프로토콜변조가힘들수있다. (운영비용증가)

• 서버환경에따라서인코딩이다르므로일괄로맞추기가힘들수 있다. (운영비용증가)

ü 혼합된컨텐츠보기허용 (브라우저설정)

• 기능은동작하나보안이취약해진다. (HTTPS를사용하는의미가약해진다.)

• 많은브라우저들이보안설정을강화하고있다. (기본값강화및설정제거)

기본에충실하자

일반

기본에충실하자

빚이많으면파산하듯기술적인부채가많아지면서비스가파산한다.

일반

추천자료

Q�� &�� A

감사합니다.

[D2 CAMPUS]웹 개발자의 스펙 : HTTP

Technology

HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 전망

LISTADOS BAREMACIÓN PROVISIONAL ENFERMERO/A … · 2020. 10. 8. · d2 hsc m.i7plantad1- d2 hsc m.i7plantad1- d2 hsc m.i7plantad1- d2 hsc m.i9plantad1- d2 hsc m.i7plantad1- d2 reservada

다음카카오 Pc&Mobile 웹 접근성 개선 사례

엔터프라이즈 웹 동향 및 적용사례

자바 웹 개발 시작하기 (2주차 : 인터넷과 웹 어플리케이션의 이해)

20160409 서브라임텍스트 대신 visual studio code로 만들어 보는 웹 환경

자바 웹 개발 시작하기 (1주차 : 웹 어플리케이션 체험 실습)

2 5needles pins d2 5l7 8 d2 5l9 8 d2 5l11 8 d2 5l13 8 d2 5l15 8 d2 5l17 8 d2 5l19 8 d2 5l21 8 d2 5l2

[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - Http Request

Macho 31.02 - sistema.agrobold.com.br · QUILOMBO D2 Fêmea 01.10.2011 Favorito D2 x Granada D2. 05 QUARENTA D2 Fêmea 05.11.2011 Jaguar D2 x Iapa D2 Seu Pai, JAGUAR D2 Sua Mãe,

자바 웹 개발 시작하기 (8주차 : 명세서, 단위테스트, 통합)

자바 웹 개발 시작하기 (5주차 : 스프링 프래임워크)

Ancient China - University of Oxford · Ancient China Ashmolean Museum http ... .nga.gov/education/chinatp_bze.shtm ... Western http http http http n_zhou_dynasty Horses http http

Macho 31.02 D2 Avô Paterno, ABRIGO D2 Avô Materno, ENFEITE D2 Fêmea 03.02.2017 Manto D2 x Paçoca D2 20 XILENA D2 D2 Seu Pai, QUILOMBO D2 Avô Paterno, ENFEITE D2 Fêmea 26.04.2017

BIOMETRIA. BIBLIOGRAFIA http:\\biopersona.com http:\\ http:\\ http:\\

· 350 http.//cooked.com http.//blog.chefhariom.com http.//ayrt-indo.com http.//ameblo.jp/kashiwan/ http.//thegoldexp.blog99.fc2.com http.//e-food.jp/travellsouth-india

웹 프론트엔드 개발자의 얕고 넓은 Rx 이야기

d2 network 2• Browser Web: Internet Explorer ® 7.0, Firefox® 3.0, Safari 3.0, oppure Chrome 2.0 o versioni successive Dynamic DNS FTP / HTTP(S) Collegamento USB diretto LaCie d2

프론트엔드로 시작하는 웹 개발 방법과 지식들

어플리케이션 및 웹 개발