#67 Web & HTTP Basic Introduce

Transcript

1. )5518FC
   ࠎԤ֝ႄ BB9z Chinamobo Co,. Ltd. 2013
2. Today’s topic • HTTP Protocol • HTML5 • Web Security
3. HTTP Protocol CC by-nc-nd http://soulart2012.deviantart.com/art/http-Blue-Background-328932110
4. HTTP Protocol • ৘ࢳླྀၰ • ग़޼؊čUser agentĎაڛༀఖԮൻླྀၰᆭ၂
5. HTTP Protocol • ႋႨҪླྀၰčOSI model 7Ҫ֥פҪĎđ๙ӈࠎႿTCPࠇ TLS/SSLԮൻҪbᇶေܱᇿԮൻଽಸđऎุඔऌЇೂޅԮ ൻ҂ܱྏ via http://en.wikipedia.org/wiki/File:Internet_layering.svg
6. HTTP Request GET http://en.wikipedia.org/wiki/Main_Page HTTP/1.1 Host: en.wikipedia.org Connection: keep-alive Accept: text/html,application/xhtml+xml,application/ xml;q=0.9,*/*;q=0.8 User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/ 537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.31 DNT: 1 Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4 Accept-Charset: UTF-8,*;q=0.5 Cookie: clicktracking-session=……
7. HTTP Response HTTP/1.0 200 OK Date: Fri, 24 May 2013 02:05:17 GMT Server: Apache X-Content-Type-Options: nosniff Cache-Control: private, s-maxage=0, max-age=0, must-revalidate Content-Language: en Vary: Accept-Encoding,Cookie Expires: Thu, 01 Jan 1970 00:00:00 GMT Last-Modified: Fri, 24 May 2013 01:25:46 GMT Content-Encoding: gzip Content-Length: 16181 Content-Type: text/html; charset=UTF-8 Connection: keep-alive <!DOCTYPE html> <html lang="en" dir="ltr" class="client-nojs"> <head> <title>Wikipedia, the free encyclopedia</title> ……
8. HTTP Header • Ԣਔhostđః෰न൞ॖ࿊֥ • پڶ֥ۿି
9. HTTP Header • ሱ׮ཁൕކൡ֥ე࿽ Accept-Language • ၛކൡ֥ٚൔӯགྷ Accept & Content-Type • ٠໙۵ሶđ֢ٝ৽ Referer • ؎ׄ࿃Ԯ Content-Range • ग़޼؊ো྘஑؎ User-Agent • ߏթაߏթ॥ᇅ Cache-Control, Expires, ETag, Last-Modified... • ദٺಪᆣ Authorization, WWW-Authenticate, Cookie... • ……
10. curl -k -F access_token=2.00TeyXACB5UbVDbe5dc2bbf1LzSxjA -F status=CurlTest -F pic=@button.png https:// upload.api.weibo.com/2/statuses/upload.json -p 192.168.1.168:8888 POST
11. curl -k -F access_token=2.00TeyXACB5UbVDbe5dc2bbf1LzSxjA -F status=CurlTest -F pic=@button.png https:// upload.api.weibo.com/2/statuses/upload.json -p 192.168.1.168:8888 POST http://192.168.1.168:8888/ HTTP/1.1 User-Agent: curl/7.24.0 (x86_64-apple-darwin12.0) libcurl/7.24.0 OpenSSL/0.9.8r zlib/1.2.5 Host: 192.168.1.168:8888 Accept: */* Content-Length: 1093 Expect: 100-continue Content-Type: multipart/form-data; boundary=----------------------------0bd6944d5d3a ------------------------------0bd6944d5d3a Content-Disposition: form-data; name="access_token" 2.00TeyXACB5UbVDbe5dc2bbf1LzSxjA ------------------------------0bd6944d5d3a Content-Disposition: form-data; name="status" 测试文本 ------------------------------0bd6944d5d3a Content-Disposition: form-data; name="pic"; filename="button.png" Content-Type: application/octet-stream PNG � IHDR�/�$ <PNG 二进制数据> :�{�@\s_�Zժe/��IENDB` ------------------------------0bd6944d5d3a--
12. Traffic Capture
13. Web Debugging Proxy Tools
14. Web Debugging Proxy Tools • Fiddler http://fiddler2.com Windows ௜෻ቋݺ֥ • Wireshark http://www.wireshark.org/ • Burp Suite http://portswigger.net/burp/ • Charles http://www.charlesproxy.com/ • mitmproxy http://mitmproxy.org/ • HTTP Scoop http://www.tuffcode.com/ • ……
15. HTML5 via http://www.w3.org/html/logo/
16. Browsers & Web http://www.20thingsilearned.com
17. ӈ࡮ۀ୑ • HTMLđଽಸაࢲܒ • JavaScriptđӱ྽࢖Ч • CSSđӯགྷဢൔ • CookiesđHTTP໭ሑ෿
18. What’s HTML5? • ҂൞൉હྍ༷൙໾—— 2004 ୍ิԛđ2008୍1ᄅᆞൔҤ σؿ҃ • ๙ӈ෮ඪ֥“HTML5”҂ᆺ൞HTML4֞HTML5đط൞Їݣ ਔ؟ཛྍ࠯ඌ֥ሸކ
19. SEMANTICS ეၬѓద CONNECTIVITY ৵ࢤ PERFORMANCE & INTEGRATION ྟିაࠢӮ article, nav, article, footer, time, section…… Web Sockets Web WorkersđXMLHttpRequest 2 OFFLINE & STORAGE ৖ཌ٠໙აඔऌթԥ MULTIMEDIA ؟ૂุ CSS3 ဢൔіശࠩ App Cache, Local Storage, Indexed DB, ໓ࡱAPI ၻ௔ა൪௔ჰളѬ٢აૂุ API ׮߂đMedia Queriesđ࿊ᄴఖđ Color Moduleđଁ଀ॢࡗđ؟ ਙđއሰଆ྘ᄹ఼đFlexible Box Layout…… DEVICE ACCESS ഡС٠໙ 3D, GRAPHICS & EFFECTS ๭ྙ๭ཞ ׮߂đMedia Queriesđ࿊ᄴఖđ Color Moduleđଁ଀ॢࡗđ؟ ਙđއሰଆ྘ᄹ఼đFlexible Box Layout…… ֹ৘ྐ༏܋ཚđચक़ڄaജཞ๨ ٠໙đഡС໊ٚ…… Canvas 2D߻๭aSVGa WebGLaCSS 3D HTML5 Overview
20. Demo CSS Animations • http://animateyourhtml5.appspot.com
21. Demo Web App • http://pattern.dk/sun/
22. Demo Media Queries • http://www.smashingmagazine.com/ • http://alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html • http://hicksdesign.co.uk/ • http://www.deren.me/
23. Game http://browserquest.mozilla.org/
24. Game http://bombermine.com/
25. More Demo • The Story of send https://www.google.com/green/storyofsend/desktop/ • ConnectedPRC http://connectedchina.reuters.com/ • Beercamp 2012 http://2012.beercamp.com • impress.js http://bartaz.github.io/impress.js/ • ఓົ http://www.kibey.com/ • Bastion http://chrome.supergiantgames.com/ • ࿙ᅳύሥݓ http://www.findyourwaytooz.com/
26. References • HTML5 ROCKS http://www.html5rocks.com • Dive Into HTML5 (online book) http://diveintohtml5.info/ • ᛍফఖ֥ᛴಙჰ৘ࡥࢺ http://coolshell.cn/articles/9666.html • WebPlatform.org http://www.webplatform.org/ • HTML5 Doctor http://html5doctor.com/ • HTML5 Please http://html5please.com
27. Front-end • ᛍফఖ࡙ಸ໙ี ࢠAndroid௠ଞൡ஥Ⴕݖᆭ໭҂ࠣ • ෾؟֥ॿࡏ…… http://todomvc.com • ݓଽՖြᆀඣ௜ҵए
28. Front-end toolchain • HTML Zen CodingđMarkdown • CSS SassđCompassđLESS • JavaScript CoffeeScript • Near future http://www.kickstarter.com/projects/306316578/light-table http://livecoding.io
29. Web Security
30. Security Trends • 99%֥ФҩႋႨթᄝνಆႅߑ թᄝνಆႅߑ֥ ФҩႋႨб২ ֆ۱ႋႨႅߑඔᇏ໊ඔᆴ
31. Security Trends • XSSa߶߅ܵ৘ބSQL ᇿೆ൞೘նνಆຯཽ
32. Security Trends ၍׮ᇔ؊
33. Security Trends
34. Security Trends • via https://info.cenzic.com/2013-Application-Security-Trends-Report.html
35. Basic Principle • Ⴅჹ҂ေཌྷྐႨ޼ൻೆ • ඲Ⴕٿоൌགྷିᄹࡆ௥ࢳӮЧđ֌҂ିЌᆣνಆbॖौ ֥܄षٚمҌ൞νಆ֥ࠎԤ
36. Q&A