Web + HTML SPARCS FRESHMAN SEMINAR 2016-03-30 SAMJO
Schedule Frontend Web + HTML CSS + JavaScript jquery Backend Django (3 ~ ) 디자이너분들은 Backend 세미나가필수가아님
Today s Topics World Wide Web Concept, Server, Client, Uniform Resource Identifier HyperText Transfer Protocol Request + Response, Methods, Status Code, Headers, Cookies HTTP with Security SSL / TLS HyperText Markup Language WTF???
Warning [Sam Jo] 난이도가상향되었습니다. [Sam Jo] 휠세미나내용을조금 (?) 가져왔습니다. 실습이없음 = 지루함 별로어려운내용이아님 = 더지루함 발표자가재미없는사람임 = 매우지루함
Web? The World Wide Web is an information system of interlinked hypertext documents and other digital resources that are accessed via the Internet Sir. Tim Berners-Lee (1955-06-08 ~ )
History There is a light! 1989: CERN 에서자료공유목적으로 hypertext 라는개념을도입 imagine, then, the references in this document all being associated with the network address of the thing to which they referred, so that while reading this document you could skip to them with a click 1990: First web server, web browser (WorldWideWeb), web site (http://line-mode.cern.ch/www/hypertext/www/theproject.html) 1991: WWW 가 CERN 외부에서최초로서비스됨
The Core 정보를원하는거 = 너 정보를받아서예쁘게보여주는거 = 니컴 정보를주는거 = 니컴아닌다른컴 정보를주고받는방법 = 랜선 (?) 정보의형식 = 뭔가형식적인문자열
The Core Fancy Terms 정보를원하는거 = User 정보를받아서예쁘게보여주는거 = Web Client (Web Browser) 정보를주는거 = Web Server 정보를주고받는방법 = HyperText Transfer Protocol (HTTP) 정보의형식 = HyperText Markup Language (HTML)
HyperText Transfer Protocol an application protocol for distributed, collaborative, hypermedia information systems
HTTP Basic Located in OSI Layer 7, Port: TCP 80 Standards HTTP/1.0 (1996) HTTP/1.1 (1999): improvement in caching, connection optimization HTTP/2 (2015): compression on http headers (binary!) Client -> Server: Request / Server -> Client: Response Stay Tuned!
Web Client (Web Browser) HTTP Request 를보내고, HTTP Response 를받아주는프로그램 주로 GUI 형태로사용자에게요청을받음 HTTP Response 를해석 (parsing) 해서보여줌 (rendering) 5 Major Web Browser (Desktop) Chrome (Blink), Firefox(Gecko), IE/Edge (Trident) Safari (Webkit), Opera (Blink) Mobile Chrome, Safari,
Some History - SSULs 1990: The first, WorldWideWeb 1993: Mosaic 1994: Netscape Navigator 1995: Internet Explorer 1 1996: Opera 2001: Internet Explorer 6 2003: Safari 1 2004: Firefox 1 2008: Chrome 1 2015: Microsoft Edge
Web Browser Market Share
Web Server Client 에서온 HTTP Request 를받음 가지고있는정보 (DB 등 ) 를사용하여작업을수행 (business logic) 사실 web server software 가다른프로그램을부르는방식 (CGI) 으로수행 처리된결과를 Client 에게보냄 (HTTP Response) 3 Major Web Server Software Apache Nginx IIS (Internet Information Server) by M$
Apache 세계에서가장많이쓰는웹서버 SW 54.2% of all active website (2013/06) Apache 재단에서개발 최신버전 : 2.4.12 Cross-Platform Linux, Mac, Windows FreeBSD, Solaris, OS/2 세계에서가장유명한공격헬기 약 2000 대생산 (2013/03) 보잉사에서개발 최신기종 : AH-64F 다양한국가에서운용 U.S, U.K, Israel Netherlands, Egypt
세계에서두번째로많이쓰이는웹서버 SW 14.24% of all active website (2015/04) Nginx, Inc. 에의해개발 (2011년설립 ) 최신버전 : 1.8.0 Cross-Platform Linux, Mac, Windows, Unix, Solaris, BSDs
Want to Learn More? 그래넌휠을해야해 13 story (original: 그래넌아라를해야해 ) 그래그건이제니가되게해야해! 13 chocho 여름방학때열리는휠세미나를들어봅시다!
Uniform Resource Identifier 자원을식별하는데사용되어지는문자열 URL (~ Locater) 와 URN (~ Name) 으로나눠짐 URL은웹자원을이름으로식별하는데사용됨 URN은특정 namespace에서자원을이름으로식별하는데사용 ex: ISBN (International Standard Book Number) urn:<namespace id>:<namespace-specific string> ex: urn:isbn:04515450523
Uniform Resource Locator (URL) scheme://[user:password@]domain:port/path?query#fragment scheme: protocol의이름 (http, https, ftp, file ) domain: 도메인이름 (naver.com) 또는 IP주소 port: 포트번호 ( 생략시 http=80, https=443, ftp=21 ) path: 자료경로 (/sambradjo/post/907269945997390) query: 웹서버에보내는추가적인정보?name1=data1&name2=data2 fragment: 문서의특정위치나부분을지칭
URL Examples http://www.naver.com/ http://sambradjo.net:8080/ ftp://samjo:samsam@sambradjo.net/file1.pptx mailto:samjo@sparcs.org file:///home/samjo/abc.pdf http://sambradjo.net/login/?id=samjo&pw=samsam http://sambradjo.net/web/url.html#history
URL - Extra Info 사용가능한문자열 : ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz0123456789 - ~ _. path, query 에다른문자열이있을경우 escape 해야함 domain 에서는 ~ _. 사용불가 case-insensitive: scheme, domain case-sensitive: path, query, fragment Internationalized domain name (IDN) Unicode 도메인이름을지원 http://xn--220b31d95hq8o.xn--3e0b707e/
HTTP, again Managed by W3C (World Wide Web Consortium) RFC (Request for Comments) Standard IETF (Internet Engineering Task Force) -> Syntax Specification (RFC7230) 상당히방대한분량의표준이있음 알아둬야할것만간단히 (?) 다루고넘어감 이세미나에서는 HTTP/1.1 을사용
HTTP Request Structure [method] [URI] [Version] [header field]:[header value]* [body] GET / HTTP/1.1 Host: www.naver.com Connection: keep-alive
HTTP Request Method GET: URL 에해당하는자료의요청 ; 대부분의페이지이동 Query 는 URL 끝에붙음 (ex: abc.com/?id=sam&pw=abc) POST: 서버에자료를보내는요청 ; 대부분의버튼클릭 Query 는 request body 에삽입되어전송됨 PUT: 해당 URL 에자료를저장 DELETE: 해당 URL 에자료를삭제 TRACE, OPTIONS, CONNECT, HEAD
HTTP Response Structure [version] [status code] [reason message] [header field]:[header value]* <CRLF> [body] HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 <CRLF> <!doctype html>
HTTP Status Code 1xx: 조건부응답 2xx: 성공 200: 성공 3xx: 리다이렉션완료 301: 영구이동 ; 302: 임시이동 304: 수정되지않음 4xx: 요청오류 400: 잘못된요청 ; 401: 권한없음 ; 403: 금지됨 ; 404: 찾을수없음 5xx: 서버오류 500: 내부오류 ; 503: 서비스사용불가
HTTP Packet Chrome 에서 F12 를눌러개발자도구를연다 Network 탭을열고, 웹페이지를하나로드한다.
Headers Many many many Some famous headers Host (Request) Content-Length (Request / Response) Content-Type (Request / Response) User-Agent (Request) Cookie (Request) / Set-Cookie (Response)
Headers Host, Content-Length Host: specifies the Internet host and port number of the resource being requested Introduced in HTTP/1.1 1 IP = Multiple Host EX: Host: www.naver.com Content-Length: indicates the size of the entity-body EX: Content-Length: 1234
Headers Content-Type Content-Type: indicates the media type of the entity-body text/html, text/plain multipart/form-data image/jpeg, image/gif, image/png, application/octet-stream, application/xml, Search MIME Type on the Web!
Headers User-Agent Web Browser 의종류를서버에게알려주기위해만든 header 서버는이문자열로사용자의 web browser 을식별할수있음 주의 : 매우당연하게이를다른값으로바꿔서보낼수있음 ex: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.130 Safari/537.36
Headers Cookie / Set-Cookie a small piece of data sent from a website and stored in a user s web browser while the user is browsing that website 웹사이트가사용자의정보를기억하는데사용 로그인, 온라인쇼핑몰쇼핑카트, 광고등에사용 사용자의웹브라우저에저장되므로값을믿어서는안됨 1. 웹사이트가 Response Header 의 Set-Cookie 라는항목에쿠키정보를만들어보냄 2. 웹브라우저는이를사용자컴퓨터에저장함 3. 해당사이트를방문할때마다 Request Header 에넣어서보냄
TLS / SSL Add Some Security! TLS (Transport Layer Security) / SSL (Secure Socket Layer) HTTP 를암호화하자! https:// ~ (port 443) Newest: TLSv1.2 Working: TLSv1.3 RFC 5246
TLS / SSL How it works? It s complicated! Need some basic understanding of crypto Many terms PKI, Certificate, CA, SKIP for NOW 더알고싶다면넌휠이야 이번학기에 TLS / SSL 세미나를 90% 확률로할거같습니다 물론필수는아니고듣고싶은사람만들으면됩니다 하게된다면휠보안세미나보다자세히다룰예정입니다
TLS / SSL Attacks 잘사용하면매우좋으나잘사용하는경우가별로없음 EX: 실제로학교 (*.kaist.ac.kr) 중많은수의도메인에문제가있음 DROWN / POODLE / Heartbleed / Weak Stream Cipher (RC4) / Weak Cert Signature (SHA1) / HTTP Strip (Lack of HTST) / CRIME (TLS Compression) / FREAK (Export Ciphers) / Logjam 기억나는것만이정도로보안취약점이매우많음 취약점관련발표에신경쓰고, 적절히패치되었는지확인해야함
HyperText Markup Language (HTML) The standard markup language used to create web pages Developed by W3C & WHATWG World Wide Web Consortium Web Hypertext Application Technology Working Group 기본적인구조에대해서는다들아시니 PASS <abc attr1= value1 ></abc> <abc attr1= value1 />
Brief History of HTML HTML 1.0 (1991) -> HTML 2.0 (1994) -> HTML 3.2 (1997) Age of Mosaic, Netscape, IE 3.0 HTML 4.0 (1997) -> HTML 4.01, XHTML 1.0 (2000) Age of IE 4.0 ~ 6.0 HTML 5.0 (2014) Chrome, Firefox, Internet Explorer, Safari, Opera 이세미나에서는 HTML 5 를사용
HTML Specification W3C 홈페이지에전체 specification 이공개되어있음 https://www.w3.org/tr/html5/ Full Syntax: https://www.w3.org/tr/html5/syntax.html#syntax HTML 을사용하다가 ( 또는세미나만들다가 ) 궁금한게생겼을때 가장기준이되는곳 가장믿을만한곳 벌써 5.1 도만들고있으니심심할때한번보면됨
HTML DTD (Document Type Definition) Set of markup declarations that define a document type DTD 선언 : Web Browser 에게어떤버전의 HTML 인지알려줌 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN " "http://www.w3.org/tr/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> <!DOCTYPE HGML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> HTML5 는 DTD 가없음 <!DOCTYPE html>
HTML Structure Nested elements <html> <head> </head> <body> <p> </p> </body> </html> Elements is an individual component of an HTML, once this has been pared into the Document Object Model (DOM) p, table, html, body, li, 많다 Attribute 를여러개 ( 또는 0 개 ) 가지고있다. Attribute modifies the default functionality / provides functionality to certain element types src, href, id, class, onmouse, style, title, 역시많다
HTML Elements Type 1. <name [attribute-name= attribute-value ]*>content</name> EX: <p style= color:red id= my-parag >Hello, World!</p> Type 2. <name [attribute-name= attribute-value ]*> EX: <img src= abc.com alt= My Image > Actually, void / raw text / escapable raw text / foreign / normal elements https://www.w3.org/tr/html5/syntax.html#elements-0 * Attribute value can be empty EX: <input type= checkbox checked>
HTML Attributes Global: may be specified on all HTML elements Specific: others 각 element 마다정의되어있음 EX: <img src= http://abc.com > / <p src= http://abc.com >
HTML Global Attributes id: element 의 id, 여러개가할당되거나중복될수없음 <div id= my-div > class: element 의 class <button class= my-button red-button > style: element 의 style - line css, 가급적사용하지않는게좋음 <p style= color:red >I m RED!</p> lang, translate, dir, hidden, title,
Want to Learn More? MDN MOZILLA DEVELOPER NETWORK HTML element & attribute reference Standards, covers both HTML 4 and 5 Provides browser compatibility https://developer.mozilla.org/en-us/docs/web/html/element
HTML Character Escaping Python 에서보셨던그거 일부문자는특별한의미를가지고있기때문에 escaping 이필요 >: > <: < &: & ": " : 냥냥뀨냥 ><: 냥냥 ><
Is it enough? YES, only for template BUT ABSOUTELY NOT FOR USER INPUT RULE 101: DO NOT TRUST USERS INPUTS <a href="/user/[username]">[username]</a> What if [username] = foo" onmouseover="alert(1) <a href="/user/foo" onmouseover="alert(1)">foo" onmouseover="alert(1)</a>
HTML Elements html / head / body <html> </html>: the root element html 의가장상위 element <head> </head>: head of html 화면에보이지않으며, meta, title, link, script 태그가들어감 <body> </body>: body of html 화면에보이는내용을넣음
HTML Elements meta / link / script <title> </title>: html 문서의제목 <link>: allows to link their document to other resources 주로 CSS를 import할때사용 <link href= my-css.css rel= stylesheet > <script> </script>: include dynamic script and data blocks 주로 JavaScript를 import할때사용 <script src= my-js.js type= text/javascript ></script> <meta>: 기타 metadata attributes: name, http-equiv, content, property EX: <meta charset= utf-8 > EX: <meta property= og:name content= abc >
HTML Elements div / span <div> </div>: 일반적인 element 를모아놓는 container <span> </span>: div 랑거의같은 container ㅇㅈ? ㅇㅇㅈ div : span = block : inline block level: occupies the entire space of its parent inline level: occupies only the space bounded by the tags CSS 세미나시간에자세히다루게될것임
HTML Elements h1 ~ h6 / p / a / img <h1> </h1>: title <h1> 이것은제목이냥 </h1> <p> </p>: paragraph <p> 냥냥나는문장이냥 </p> <a> </a>: link <a href= abc.com >click here!</a> <img>: image <img src= abc.com alt= text >
HTML Elements table / th / tr / td <table> <th> <td>first Name</td> <td>last Name</td> <td>username</td> </th> <tr> <td>sungwon</td> <td>cho</td> <td>@samjo</td> </tr> <tr> </tr> </table>
HTML Elements ul / ol / li <ul> </ul>: unordered list <ol> </ol>: ordered list <ul> <li> 숙제하기 </li> <li> 사이퍼즈하기 </li> <li> 자살하기 </li> </ul>
HTML Elements form 서버에데이터를전송할수있도록여러 element 를포함시켜줌 input, select, textarea, button
HTML Elements frequently used article / aside / b / blockquote / button / br / canvas / code / dl / dt / em / hr / i / input / label / nav / pre / section / select / textarea Again, search Google (or MDN, stackoverflow, whatever ) SPARCS SSO: ~ 20 tags
Homework https://www.codecademy.com/learn/web Codecademy: HTML + CSS UNIT 3: HTML STRUCTURE: 까지하시면됩니다. 기한 : CSS 세미나전까지 반드시하셔야본인지식이됩니다!
Advertisement SPARCS SSO TLS / SSL Security OAuth Security Login Page Design
Q&A THANK YOU!
References https://www.w3.org/tr/html5 https://developer.mozilla.org/en-us/docs/web/html/element http://sparcs.org/seminar/ 2015 Wheel Seminar - 8. Web, Apache and Nginx by samjo