#67 Web & HTTP Basic Introduce

)5518FCࠎԤ֝ႄ BB9z Chinamobo Co,. Ltd. 2013

Today’s topic • HTTP Protocol • HTML5 • Web Security

HTTP Protocol CC by-nc-nd http://soulart2012.deviantart.com/art/http-Blue-Background-328932110

HTTP Protocol • ৘ࢳླྀၰ • ग़޼؊čUser agentĎაڛༀఖԮൻླྀၰᆭ၂

HTTP Protocol • ႋႨҪླྀၰčOSI model 7Ҫ֥פҪĎđ๙ӈࠎႿTCPࠇ TLS/SSLԮൻҪbᇶေܱᇿԮൻଽಸđऎุඔऌЇೂޅԮ ൻ҂ܱྏ via http://en.wikipedia.org/wiki/File:Internet_layering.svg

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=……

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> ……

HTTP Header • Ԣਔhostđః෰न൞ॖ࿊֥ • پڶ֥ۿି

HTTP Header • ሱ׮ཁൕކൡ֥ე࿽ Accept-Language • ၛކൡ֥ٚൔӯགྷ Accept & Content-Type
• ٠໙۵ሶđ֢ٝ৽ Referer • ؎ׄ࿃Ԯ Content-Range • ग़޼؊ো྘஑؎ User-Agent • ߏթაߏթ॥ᇅ Cache-Control, Expires, ETag, Last-Modiﬁed... • ദٺಪᆣ Authorization, WWW-Authenticate, Cookie... • ……

curl -k -F access_token=2.00TeyXACB5UbVDbe5dc2bbf1LzSxjA -F status=CurlTest -F [email protected] https:// upload.api.weibo.com/2/statuses/upload.json
-p 192.168.1.168:8888 POST

curl -k -F access_token=2.00TeyXACB5UbVDbe5dc2bbf1LzSxjA -F status=CurlTest -F [email protected] 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--

Trafﬁc Capture

Web Debugging Proxy Tools

Web Debugging Proxy Tools • Fiddler http://ﬁddler2.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/ • ……

HTML5 via http://www.w3.org/html/logo/

Browsers & Web http://www.20thingsilearned.com

ӈ࡮ۀ୑ • HTMLđଽಸაࢲܒ • JavaScriptđӱ྽࢖Ч • CSSđӯགྷဢൔ • CookiesđHTTP໭ሑ෿

What’s HTML5? • ҂൞൉હྍ༷൙໾—— 2004 ୍ิԛđ2008୍1ᄅᆞൔҤ σؿ҃ • ๙ӈ෮ඪ֥“HTML5”҂ᆺ൞HTML4֞HTML5đط൞Їݣ ਔ؟ཛྍ࠯ඌ֥ሸކ

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

Demo CSS Animations • http://animateyourhtml5.appspot.com

Demo Web App • http://pattern.dk/sun/

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/

Game http://browserquest.mozilla.org/

Game http://bombermine.com/

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.ﬁndyourwaytooz.com/

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

Front-end • ᛍফఖ࡙ಸ໙ี ࢠAndroid௠ଞൡ஥Ⴕݖᆭ໭҂ࠣ • ෾؟֥ॿࡏ…… http://todomvc.com • ݓଽՖြᆀඣ௜ҵए

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

Web Security

Security Trends • 99%֥ФҩႋႨթᄝνಆႅߑ թᄝνಆႅߑ֥ ФҩႋႨб২ ֆ۱ႋႨႅߑඔᇏ໊ඔᆴ

Security Trends • XSSa߶߅ܵ৘ބSQL ᇿೆ൞೘նνಆຯཽ

Security Trends ၍׮ᇔ؊

Security Trends

Security Trends • via https://info.cenzic.com/2013-Application-Security-Trends-Report.html

Basic Principle • Ⴅჹ҂ေཌྷྐႨ޼ൻೆ • ඲Ⴕٿоൌགྷିᄹࡆ௥ࢳӮЧđ֌҂ିЌᆣνಆbॖौ ֥܄षٚمҌ൞νಆ֥ࠎԤ

#67 Web & HTTP Basic Introduce

#67 Web & HTTP Basic Introduce

Other Decks in Technology

Featured

Transcript