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

1. 웹 개발자의 스펙 : HTTP 최영목 서비스플랫폼개발센터 ⓒ NAVER

2. Corp.

3. 목차 ü 웹 개발자가 갖추어야 할 기본기는 무엇인가? ü 웹은 어떻게 동작하는가? ü 로그아웃 되었어요! ü 화면이 나오지 않아요! ü 기본에 충실하자

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

5. 일반 4 /서비스플랫폼개발센터 개발자는 무엇을 알아야할까? 프로그래밍 언어 알고리즘 자료구조 운영체제 네트워크 데이터베이스 …⋯ …⋯ …⋯

6. 일반 5 /서비스플랫폼개발센터 웹 개발자는 무엇을 알아야할까? HTTP

7. + HTML

8. 일반 6 /서비스플랫폼개발센터 오늘의 주제 HTTP (Hypertext

9. Transfer

10. Protocol)

11. 웹은 어떻게 동작하는가?

12. 일반 8 /서비스플랫폼개발센터 인터넷과 웹 출처 : http://www.w3.org/Help/#webinternet 인터넷 ≠

13. 웹

14. 일반 9 /서비스플랫폼개발센터 웹 아키텍처 출처 : http://www.w3.org/TR/webarch/ 리소스 (자원)

15. 일반 10 /서비스플랫폼개발센터 웹 아키텍처 출처 : http://www.w3.org/TR/webarch/ 식별 (URIs) 상호작용 (HTTP) 포맷 (HTML)

16. 일반 11 /서비스플랫폼개발센터 웹 아키텍처 출처 : http://www.w3.org/TR/webarch/

17. 일반 12 /서비스플랫폼개발센터 식별 : URIs 리소스를 어떻게 식별할 것인가? 식별

18. 일반 13 /서비스플랫폼개발센터 URI

19. (Uniform

20. Resource

21. Identifier) 리소스를 식별하는 간결한 문자열 (RFC

22. 3986) 출처 : https://tools.ietf.org/html/rfc3986 식별

23. 일반 14 /서비스플랫폼개발센터 URI 출처 : https://en.wikipedia.org/wiki/Uniform_resource_identifier 식별

24. 일반 15 /서비스플랫폼개발센터 URL

25. (Uniform

26. Resource

27. Locator) 리소스를 식별하는 주소 (RFC

29. 일반 16 /서비스플랫폼개발센터 URN

30. (Uniform

31. Resource

32. Name) 리소스를 식별하는 이름 (RFC

34. 일반 17 /서비스플랫폼개발센터 URL 문법 스킴://사용자이름:비밀번호@호스트:포트 /경로;파라미터?질의#프래그먼트 식별

35. 일반 18 /서비스플랫폼개발센터 URL 문법 http://d2.naver.com/search/tag ?keyword=d2campus_seminar ftp://d2user:[email protected]:21/no3 식별

36. 일반 19 /서비스플랫폼개발센터 URL 문법 스킴://사용자이름:비밀번호@호스트:포트 /경로;파라미터?질의#프래그먼트 사용할 프로토콜 식별

37. 일반 20 /서비스플랫폼개발센터 URL 문법 스킴://사용자이름:비밀번호@호스트:포트 /경로;파라미터?질의#프래그먼트 몇몇 스킴은 리소스에 접근하기 위해 사용자 이름 / 비밀번호가 필요하다. (예 : FTP) 식별

38. 일반 21 /서비스플랫폼개발센터 URL 문법 스킴://사용자이름:비밀번호@호스트:포트 /경로;파라미터?질의#프래그먼트 서버의 호스트 명 또는 IP 주소 식별

39. 일반 22 /서비스플랫폼개발센터 URL 문법 스킴://사용자이름:비밀번호@호스트:포트 /경로;파라미터?질의#프래그먼트 서버가 열어놓은 포트번호 (HTTP의 기본 포트는 80이다.) 식별

40. 일반 23 /서비스플랫폼개발센터 URL 문법 스킴://사용자이름:비밀번호@호스트:포트 /경로;파라미터?질의#프래그먼트 서버 내 리소스 위치 식별

41. 일반 24 /서비스플랫폼개발센터 URL 문법 스킴://사용자이름:비밀번호@호스트:포트 /경로;파라미터?질의#프래그먼트 스킴 파라미터 (주의 : 우리가 흔히 말하는 HTTP

42. 요청 파라미터가 아니다!) 식별

43. 일반 25 /서비스플랫폼개발센터 URL 문법 스킴://사용자이름:비밀번호@호스트:포트 /경로;파라미터?질의#프래그먼트 스킴에서 애플리케이션에 파라미터를 전달하는데 쓰인다 (쿼리, 쿼리스트링이라고 부른다.) 포맷에 제약사항은 없으나 편의상 ‘’로 나뉜 ‘이름=값’ 쌍 형식을 사용한다. 식별

44. 일반 26 /서비스플랫폼개발센터 URL 문법 스킴://사용자이름:비밀번호@호스트:포트 /경로;파라미터?질의#프래그먼트 리소스의 조각이나 일부분을 가리키는 이름이다. URL이 특정 객체를 가리킬 경우에 프래그먼트 필드는 서버에 전달되지 않는다. 이는 클라이언트에서만 사용한다. 식별

45. 일반 27 /서비스플랫폼개발센터 포맷 : HTML 어떤 종류의 리소스인가? 포맷

46. 일반 28 /서비스플랫폼개발센터 MIME

47. (Multipurpose

48. Internet

49. Mail

50. Extensions) 메시지 엔티티 본문의 컨텐츠를 설명하는 표준화된 이름 출처 : https://tools.ietf.org/html/rfc2045 포맷

51. 일반 29 /서비스플랫폼개발센터 MIME

52. 타입 출처 : https://tools.ietf.org/html/rfc2046 text image audio video application multipart message 포맷

53. 일반 30 /서비스플랫폼개발센터 상호작용 : HTTP HTTP를 통해서 어떻게 상호작용을 하는가? 상호작용

54. 일반 31 /서비스플랫폼개발센터 웹 서버와 클라이언트 HTTP 통신은 TCP/IP를 통해 이루어진다. 상호작용

55. 일반 32 /서비스플랫폼개발센터 웹 서버와 클라이언트 상호작용 Network

56. Interfaces IP TCP HTTP HTTP 데이터링크

57. 계층 네트워크

58. 계층 전송

59. 계층 애플리케이션

60. 계층 Network

61. Interfaces IP TCP TLS

62. or

63. SSL HTTPS 데이터링크

64. 계층 네트워크

65. 계층 전송

66. 계층 보안

67. 계층 HTTP 애플리케이션

68. 계층

69. 일반 33 /서비스플랫폼개발센터 웹 서버와 클라이언트 HTTP

70. 요청 HTTP

71. 응답 클라이언트 서버 상호작용

72. 일반 34 /서비스플랫폼개발센터 웹 서버와 클라이언트 1. 브라우저(클라이언트)에http://d2.naver.com:80/news/6106083

73. 라고 입력한다. http://d2.naver.com:80/news/6106083 클라이언트 서버 상호작용

74. 일반 35 /서비스플랫폼개발센터 웹 서버와 클라이언트 2. 브라우저가 호스트 명(d2.naver.com)에 대한 IP 주소와 포트 번호를 얻는다. http://d2.naver.com:80/news/6106083 클라이언트 서버 117.52.129.49 DNS

75. 서버 상호작용

76. 일반 36 /서비스플랫폼개발센터 웹 서버와 클라이언트 3. 브라우저가 117.52.129.49의 80번 포트로 TCP

77. 커넥션을 생성한다. 클라이언트 서버 TCP

78. 커넥션 IP

80. 117.52.129.49 80 상호작용

81. 일반 37 /서비스플랫폼개발센터 웹 서버와 클라이언트 4. 브라우저가 서버로 HTTP

82. 요청을 보낸다. 클라이언트 서버 HTTP

83. 요청 상호작용

84. 일반 38 /서비스플랫폼개발센터 웹 서버와 클라이언트 5. 서버가 요청을 처리한다. 클라이언트 서버 처리중 상호작용

85. 일반 39 /서비스플랫폼개발센터 웹 서버와 클라이언트 6. 서버가 브라우저로 응답을 보낸다. 클라이언트 서버 HTTP

86. 응답 상호작용

87. 일반 40 /서비스플랫폼개발센터 웹 서버와 클라이언트 7. 브라우저가 TCP

88. 커넥션을 끊는다. 클라이언트 서버 상호작용

89. 일반 41 /서비스플랫폼개발센터 HTTP

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

92. 트랜잭션 클라이언트 서버 DNS 찾기 연결 요청 처리 응답 종료 시간 상호작용

94. 커넥션 :

95. 순차 클라이언트 서버 트랜잭션-1 커넥션-1 시간 트랜잭션-2 커넥션-2 트랜잭션-3 커넥션-3 요청-1 응답-1 요청-2 응답-2 요청-3 응답-3 상호작용

97. 커넥션 :

98. 병렬 클라이언트 서버 트랜잭션-1 커넥션-1 시간 트랜잭션-2,3,4 (병렬 커넥션) 커넥션-2 요청 응답 커넥션-3 커넥션-4 상호작용

100. 커넥션 :

101. 지속 클라이언트 서버 트랜잭션-1 커넥션-1 시간 트랜잭션-2 트랜잭션-3 요청 응답 상호작용

103. 커넥션 :

104. 파이프라인 클라이언트 서버 커넥션-1 시간 트랜잭션-1, 2, 3, 4 요청 응답 상호작용

106. 커넥션 상호작용

108. 메시지 상호작용 버전 상태코드 사유구절 헤더 본문 시작줄 헤더 본문 메서드 요청URL

109. 버전 헤더 본문 요청 메시지 응답 메시지 출처 : https://tools.ietf.org/html/rfc7230#section-3

111. 메시지 상호작용 HTTP/1.1 200

112. OK Content-Type:

113. text/plain Content-Length:

114. 11 ... Hello World 시작줄 헤더 본문 GET

115. /hello.txt HTTP/1.1 Accept

116. :

117. text/* Host: d2.naver.com …⋯ 요청 메시지 응답 메시지

119. 메시지 : 시작줄(메서드) 상호작용 메서드 설명 메시지 본문 GET 서버에서어떤 문서를 가져온다. 없음 HEAD 서버에서 어떤 문서에 대해 헤더만 가져온다. 없음 POST 서버가 처리해야 할 데이터를 보낸다. 있음 PUT 서버에 요청 메시지의 본문을 저장한다. 있음 TRACE 메시지가 프락시를 거쳐 서버에 도달하는 과정을 추적한다. 없음 OPTIONS 서버가 어떤 메서드를 수행할 수 있는지 확인한다. 없음 DELETE 서버에서 문서를 제거한다. 없음 출처 : https://tools.ietf.org/html/rfc7231#section-4

121. 메시지 : 시작줄(상태코드) 상호작용 전체 범위 정의된 범위 분류 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

123. 메시지 : 헤더 상호작용 종류 설명 예시 일반 헤더 서버, 클라이언트가 모두 사용. 일반목적 Date,

124. Connection 요청 헤더 요청 메시지를 위한 헤더 Host,

125. Cookie,

126. Referer 응답 헤더 응답 메시지를 위한 헤더 Set-Cookie,

127. Server 엔티티 헤더 엔티티 본문에 대한 헤더 Content-Type,

128. Location 확장 헤더 애플리케이션 개발자들에 의해 만들어진 비표준 헤더 - 출처 : https://tools.ietf.org/html/rfc7231

130. 메시지 : 헤더 상호작용

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

132. 일반 55 /서비스플랫폼개발센터 사용자를 식별하는 방법 ü HTTP는 기본적으로 익명으로 사용하고, 상태가 없고, 매 요청은 일회성이고 독립적으 로 처리된다. ü 다음과 같은 사용자 식별 기술이 있다. • 클라이언트 IP

133. 주소 추적 • 사용자 로그인 인증 (HTTP

134. Authentication) • URL에 식별자를 포함하기 • 쿠키(Cookie)

135. 일반 56 /서비스플랫폼개발센터 쿠키(Cookie)는 어떻게 동작하는가? HTTP

136. 상태 관리 체계 (HTTP

137. state

138. Management

139. Mechanism,

140. RFC

141. 6265) 출처 : http://tools.ietf.org/html/rfc6265

142. 일반 57 /서비스플랫폼개발센터 쿠키(Cookie)는 어떻게 동작하는가? 1. 브라우저가 서버로 HTTP

143. 요청을 보낸다. 브라우저 서버 HTTP

144. 요청

145. 일반 58 /서비스플랫폼개발센터 쿠키(Cookie)는 어떻게 동작하는가? 2. 서버가 브라우저로 응답을 보낸다. 브라우저 서버 HTTP

146. 응답 (Set-Cookie)

147. 일반 59 /서비스플랫폼개발센터 쿠키(Cookie)는 어떻게 동작하는가? 3. 브라우저가 다음 요청을 서버로 보낼 때 쿠키를 함께 보낸다. 브라우저 서버 HTTP

148. 요청 (Cookie)

149. 일반 60 /서비스플랫폼개발센터 누가 내 쿠키를 바꾸었을까? d2.naver.com admin.d2.naver.com ü D2

150. 사이트를 관리하기 위해서 admin.d2.naver.com에 접속하여 작업을 진행하였다. 적용 여부를 확인하기 위해서 탭을 열어 d2.naver.com으로 다른 사용자로 로그인 하 였더니 이전 admin

151. 화면에서 로그아웃이 되어버렸다. 무슨 일이 일어난 것일까? ?

152. 일반 61 /서비스플랫폼개발센터 누가 내 쿠키를 바꾸었을까? naver.com navercorp.com ü 쿠키는 도메인(호스트)단위로 구분된다. 출처 : http://tools.ietf.org/html/rfc6265#section-8.5

153. 일반 62 /서비스플랫폼개발센터 누가 내 쿠키를 바꾸었을까? naver.com d2.naver.com ü 서브 도메인의 경우 쿠키는 공유된다. 출처 : http://tools.ietf.org/html/rfc6265#section-8.5

154. 일반 63 /서비스플랫폼개발센터 누가 내 쿠키를 바꾸었을까? d2.naver.com:80 d2.naver.com:8080 ü 도메인이 같고, 포트가 다른 경우도 쿠키는 공유된다. 출처 : http://tools.ietf.org/html/rfc6265#section-8.5

155. 일반 64 /서비스플랫폼개발센터 쿠키는 응답속도에 영향을 주는가? ü 이론적으로 응답속도에 영향을 주는 것은 사실이다. ü 다만 국내의 경우 네트워크 속도가 빠르고, 요청이 많지 않은 소규모 애플리케이션이라 면 크게 신경쓰지 않아도 된다. ü 단, 아래의 경우는 정적 컨텐츠에 대해서 쿠키를 보내지 않도록 도메인 분리 등의 조치 를 취해야 한다. • 요청량이 많은 경우(개인사용자를 대상으로 한 서비스 등) • 네트워크가 느리거나 대역폭이 작은 경우(해외 현지 서비스) • 사용하고 있는 쿠키의 개수 및 양이 많을 경우(줄이는 것도 병행해야 한다.) • 서버의 성능이 낮은 경우(VM장비 등)

156. 일반 65 /서비스플랫폼개발센터 쿠키는 응답속도에 영향을 주는가?

157. 화면이 나오지 않아요!

158. 일반 67 /서비스플랫폼개발센터 어떻게 내부 시스템을 보호할 것인가? 클라이언트 서버 admin.d2.naver.com IP : 10.20.30.40 Proxy admin.d2.naver.com IP

159. :

160. 117.52.129.49 사내 DNS

161. 서버 Public DNS

162. 서버 사내망 https://admin.d2.naver.com http://admin.d2.naver.com

163. 일반 68 /서비스플랫폼개발센터 HTTPS와 혼합된 컨텐츠(Mixed

164. Content) ü 이런 소스가 있다면? • hello.html html head …⋯ script

165. src=”http://admin.d2.naver.com/js/jquery.js/script …⋯ head body …⋯ /body /html

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

169. Content) ü 문제 • HTTPS페이지가 몇몇 일반적인 HTTP를 포함한다면 연결은 단지 부분적으로 암호화된다.

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

171. 그러므로 연결은 더이상 안전하지 않다.

172. 웹페이지가 이런 형태로 제공될 때 그 페이지는 Mixed

173. Content 페이지라고 불린다.1) 1)

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

176. Content) ü Mixed

177. Passive/Display

178. Content • HTTPS

179. 웹페이지에 포함되는 HTTP로 제공되는 컨텐츠이다. • 예를 들어 공격자는 HTTP로 제공되는 이미지를 변경하여 부적절한 이미지나 메세지로 사용자에 게 보낼 수 있다. • Passive

180. content

181. list • audio (src attribute) • img (src attribute) • video (src attribute) • object subresources (when

182. an

183. object

184. performs

185. HTTP

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

188. Content) ü Mixed

189. Active

190. Content • HTTPS

191. 페이지의 DOM이 일부나 혹은 모든 부분에 접근할 수 있는 컨텐츠이다. • HTTPS 페이지의 동작을 바꿀 수 있고 잠재적으로 사용자로부터 민감한 정보를 훔칠 수 있다. • Mixed

192. Active

193. Content의 경우에는 중간공격자가 HTTP

194. 컨텐츠에 대한 요청을 가로챌 수 있 다. 공격자는 악의적인 자바스크립트 코드를 포함하여 응답을 변경할 수 있다.

195. 악의적인 Active

196. Content는 사용자의 신원 훔치기, 민감한 사용자 정보 획득,

197. 또는 malware를 사용자의 시스템 에 설치할 수 있다. • Active

198. content

199. list • script (src attribute) • link (href attribute)

200. (this

201. includes

202. CSS

203. stylesheets) • XMLHttpRequest object

204. requests • iframe (src attributes) • All

205. cases

206. in

207. CSS

208. where

209. a url value

210. is

211. used

212. (@font-face, cursor, background-image,

213. etc.) • object (data attribute) 출처 : https://developer.mozilla.org/ko/docs/Security/MixedContent

214. 일반 73 /서비스플랫폼개발센터 올바른 변경 방법 ü 모든 리소스에 대해서 HTTPS를 지원하도록 한다. • HTTP

215. 페이지에 HTTPS

216. 리소스를 포함하는 것은 괜찮다. ü Proxy를 사용하여 안전한 내부망에서 호출할 경우 소스코드에서 상대 프로토콜을 사용 한다. html head …⋯ script

217. src=”//admin.d2.naver.com/js/jquery.js/script …⋯ head body …⋯ /body /html

218. 일반 74 /서비스플랫폼개발센터 올바른 변경 방법 ü 참고 • 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

219. 일반 75 /서비스플랫폼개발센터 올바르지 않은 방법 ü 컨텐츠 변조 • 유효하지 않은 HTML의 경우 프로토콜 변조가 힘들 수 있다. (운영비용 증가) • 서버 환경에 따라서 인코딩이 다르므로 일괄로 맞추기가 힘들 수 있다. (운영비용 증가) ü 혼합된 컨텐츠 보기 허용 (브라우저 설정) • 기능은 동작하나 보안이 취약해진다. (HTTPS를 사용하는 의미가 약해진다.) • 많은 브라우저들이 보안 설정을 강화하고 있다. (기본 값 강화 및 설정 제거)

220. 기본에 충실하자

221. 일반 77 /서비스플랫폼개발센터 기본에 충실하자 빚이 많으면 파산하듯 기술적인 부채가 많아지면 서비스가 파산한다.

222. 일반 78 /서비스플랫폼개발센터 추천자료

223. Q

225. A

226. 감사합니다.

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

More Related Content

What's hot (20)

Viewers also liked (19)

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

More from NAVER D2 (20)

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