Your SlideShare is downloading. ×
0
 
… and other stuff  that  make the web work
Bits ‘bout Moi! <ul><li>Senor  Bipin Upadhyay </li></ul><ul><ul><li>Developer,  Directi  Pvt. Ltd. </li></ul></ul><ul><ul>...
I know Kung-fu…
If Only it was true…
 
 
 
 
 
Agenda http://icanhascheezburger.files.wordpress.com/2009/02/funny-pictures-cat-has-naps-on-his-agenda.jpg
Agenda <ul><li>Intro:  What & Why??? </li></ul><ul><li>OSI model :   Back to the basics </li></ul><ul><li>10000 feet view:...
Agenda <ul><li>Intro:  What & Why??? </li></ul><ul><li>OSI model :  Back to the basics </li></ul><ul><li>10000 feet view: ...
Bit of History <ul><li>Mar’89 –  T.B. Lee presents “ Information Management:    A Proposal ” </li></ul><ul><li>Aug’91 –  A...
Web 2.0, uh! http://www.wagnerblog.com/images/AjaxDarkSide.jpg
HTTP: What is it? <ul><li>Part of the  Application Layer  of TCP/IP protocol suite  </li></ul>
HTTP: What is it? <ul><li>Part of the  Application Layer  of TCP/IP protocol suite  </li></ul><ul><li>A set of  grammatica...
HTTP: What is it? <ul><li>Part of the  Application Layer  of TCP/IP protocol suite  </li></ul><ul><li>A set of  grammatica...
… but http://www.flickr.com/photos/quinnanya/4456123452/
Why should I bother? <ul><li>Because: </li></ul><ul><ul><li>web development  sucks </li></ul></ul>http://www.flickr.com/ph...
Why should I bother? <ul><li>Because: </li></ul><ul><ul><li>web development  sucks </li></ul></ul><ul><ul><li>Even your gr...
Why should I bother? <ul><li>Also: </li></ul><ul><ul><li>facilitates  debugging, </li></ul></ul><ul><ul><li>improves under...
Why should I bother?
Agenda <ul><li>Intro:  What & Why??? </li></ul><ul><li>OSI model :   Back to the basics </li></ul><ul><li>10000 feet view:...
OSI & TCP/IP protocol suite <ul><li>OSI is a reference model </li></ul>http://blog.uad.ac.id/imam_riadi/files/2009/01/osi-...
OSI & TCP/IP protocol suite… <ul><li>TCP/IP protocol suite is implementation of OSI </li></ul>http://www.hill2dot0.com/wik...
OSI & TCP/IP protocol suite… <ul><li>Visual learning:  Wireshark , baby </li></ul><ul><ul><li>http://www.wireshark.org/ </...
Agenda <ul><li>Intro:  What & Why??? </li></ul><ul><li>OSI model :  Back to the basics </li></ul><ul><li>10000 feet view: ...
The Communication <ul><li>My favorite interview question: </li></ul>http://www.flickr.com/photos/terryhart/2890904949/
The Communication <ul><li>My favorite interview question: </li></ul><ul><ul><li>What all happens between the time when: </...
Brower Proxy LB Web Server DB Server Internetz
Brower Proxy LB Web Server DB Server Client Server (null.co.in) Internetz
Brower Proxy LB Web Server DB Server Client Server (null.co.in) Browser cache/ hosts file/ DNS server null.co.in Internetz
Brower Proxy LB Web Server DB Server Client Server (null.co.in) Browser cache/ hosts file/ DNS server 74.53.228.212 null.c...
Brower Proxy LB Web Server DB Server Client Server (null.co.in) TCP Connection:  There, bro? SYN Internetz
Brower Proxy LB Web Server DB Server Client Server (null.co.in) SYN SYN-ACK TCP Connection:  Yo! Internetz
Brower Proxy LB Web Server DB Server Client Server (null.co.in) SYN SYN-ACK ACK TCP Connection:  Cool! Internetz
Brower Proxy LB Web Server DB Server Client Server (null.co.in) HTTP:  Got this file? GET / Internetz
Brower Proxy LB Web Server DB Server Client Server (null.co.in) HTTP:  Yup! Here ‘tis. GET / 200 OK index.html Internetz
Brower Proxy LB Web Server DB Server Client Server (null.co.in) HTTP:  Can I have these as well? GET / 200 OK index.html G...
Brower Proxy LB Web Server DB Server Client Server (null.co.in) HTTP:  Sure! GET / 200 OK index.html GET /js.js GET /pic.j...
Brower Proxy LB Web Server DB Server Client Server (null.co.in) FIN TCP Connection:  Arigato, am done. Internetz
Brower Proxy LB Web Server DB Server Client Server (null.co.in) FIN FIN-ACK TCP Connection:  Sayonara! Internetz
The Communication <ul><li>… . or simply </li></ul>
The Communication <ul><li>Web 2.0 has shrunk the client and server distinction </li></ul><ul><li>Conventionally, client se...
The Communication: HTTP Request <ul><li>Request Line </li></ul><ul><ul><li>Request Method </li></ul></ul><ul><ul><li>Reque...
The Communication: HTTP Response <ul><li>Status Line </li></ul><ul><ul><li>HTTP version(s) understood by server </li></ul>...
Agenda <ul><li>Intro:  What & Why??? </li></ul><ul><li>OSI model :  Back to the basics </li></ul><ul><li>10000 feet view: ...
Anatomy <ul><li>HTTP Request and Response are comprised of various components: </li></ul><ul><ul><li>Request Methods </li>...
Anatomy: Request Methods <ul><li>Humans can convey  emotions  in several ways </li></ul><ul><li>Why should HTTP clients la...
Anatomy: Response Status Codes <ul><li>Indicate the server’s  mood  corresponding to a request </li></ul><ul><li>Combinati...
Anatomy: Request Headers <ul><li>Specific to an HTTP Request </li></ul><ul><li>Carry information about the client, and the...
Anatomy: Response Headers <ul><li>Specific to an HTTP Response </li></ul><ul><li>Carry information about the server, and t...
Anatomy: General Headers <ul><li>Carry information about the  HTTP transaction </li></ul><ul><li>Can be a part of request,...
Anatomy: Entity Headers <ul><li>Carry information about the content </li></ul><ul><li>Mainly a part of HTTP response </li>...
Anatomy: Content <ul><li>IANA maintains a list of valid content types </li></ul><ul><li>It is specified by the  Content-Ty...
Agenda <ul><li>Intro:  What & Why??? </li></ul><ul><li>OSI model :  Back to the basics </li></ul><ul><li>10000 feet view: ...
Handling Statelessness <ul><li>HTTP is a stateless protocol </li></ul>
Handling Statelessness <ul><li>HTTP is a stateless protocol </li></ul><ul><ul><li>i.e., server’s got a bad memory </li></u...
Handling Statelessness <ul><li>Cookies  to rescue </li></ul>http://www.flickr.com/photos/lij/283869088/
Handling Statelessness <ul><li>Cookies : </li></ul><ul><ul><li>are text files stored by  client browser </li></ul></ul><ul...
Handling Statelessness <ul><li>Cookie  attributes: </li></ul><ul><ul><li>name=value </li></ul></ul><ul><ul><li>expires=val...
Conclusion <ul><li>The single biggest problem in communication </li></ul><ul><li>is the illusion… that it has taken place....
Conclusion <ul><li>The single biggest problem in communication </li></ul><ul><li>is the illusion… that it has taken place....
Q&A!!! <ul><li>Got queries? Raise your hands. </li></ul>
<ul><li>Arigato!   </li></ul><ul><li>Contact info: </li></ul><ul><ul><li>Om—At—[projectbee.org/null.co.in] </li></ul></ul...
Upcoming SlideShare
Loading in...5
×

"Http protocol and other stuff" by Bipin Upadhyay

3,187

Published on

A holistic view of how the web works, with an overview of the HTTP protocol.
Presented by me at null security group (http://null.co.in), Mumbai chapter meet on Aug' 27th.

Published in: Technology
3 Comments
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,187
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
121
Comments
3
Likes
7
Embeds 0
No embeds

No notes for slide
  • http://www.jellymuffin.com/generators/fordummies/
  • http://i194.photobucket.com/albums/z202/CopyDat/copycat%20stuff/kung-fu.jpg
  • Transcript of ""Http protocol and other stuff" by Bipin Upadhyay"

    1. 2. … and other stuff that make the web work
    2. 3. Bits ‘bout Moi! <ul><li>Senor Bipin Upadhyay </li></ul><ul><ul><li>Developer, Directi Pvt. Ltd. </li></ul></ul><ul><ul><li>Lead, NULL Open Security Group – Mumbai Chapter </li></ul></ul><ul><ul><li>OWASP ESAPI-PHP Committer </li></ul></ul><ul><ul><li>Part of IHP (Honeynet Project) </li></ul></ul><ul><ul><li>Amateur Photographer </li></ul></ul>
    3. 4. I know Kung-fu…
    4. 5. If Only it was true…
    5. 11. Agenda http://icanhascheezburger.files.wordpress.com/2009/02/funny-pictures-cat-has-naps-on-his-agenda.jpg
    6. 12. Agenda <ul><li>Intro: What & Why??? </li></ul><ul><li>OSI model : Back to the basics </li></ul><ul><li>10000 feet view: How the web works </li></ul><ul><li>RFC 2616: Anatomy </li></ul><ul><li>RFC 2965: Handling Statelessness </li></ul>
    7. 13. Agenda <ul><li>Intro: What & Why??? </li></ul><ul><li>OSI model : Back to the basics </li></ul><ul><li>10000 feet view: How the web works </li></ul><ul><li>RFC 2616: Anatomy </li></ul><ul><li>RFC 2965: Handling Statelessness </li></ul>
    8. 14. Bit of History <ul><li>Mar’89 – T.B. Lee presents “ Information Management: A Proposal ” </li></ul><ul><li>Aug’91 – Announces WWW </li></ul><ul><li>Mar’93 – Mosaic announced </li></ul><ul><li>Mar’94 – Netscape found </li></ul><ul><li>Oct’94 – W3C found by T.B. Lee </li></ul>
    9. 15. Web 2.0, uh! http://www.wagnerblog.com/images/AjaxDarkSide.jpg
    10. 16. HTTP: What is it? <ul><li>Part of the Application Layer of TCP/IP protocol suite </li></ul>
    11. 17. HTTP: What is it? <ul><li>Part of the Application Layer of TCP/IP protocol suite </li></ul><ul><li>A set of grammatical rules for a client and server to communicate </li></ul>http://www.flickr.com/photos/joshfassbind/4584323789/
    12. 18. HTTP: What is it? <ul><li>Part of the Application Layer of TCP/IP protocol suite </li></ul><ul><li>A set of grammatical rules for a client and server to communicate </li></ul><ul><li>HTTP is what powers the WWW </li></ul>
    13. 19. … but http://www.flickr.com/photos/quinnanya/4456123452/
    14. 20. Why should I bother? <ul><li>Because: </li></ul><ul><ul><li>web development sucks </li></ul></ul>http://www.flickr.com/photos/sneeu/1589152071/
    15. 21. Why should I bother? <ul><li>Because: </li></ul><ul><ul><li>web development sucks </li></ul></ul><ul><ul><li>Even your grandmom knows, ‘tis all about fundamentals </li></ul></ul>
    16. 22. Why should I bother? <ul><li>Also: </li></ul><ul><ul><li>facilitates debugging, </li></ul></ul><ul><ul><li>improves understanding of security & performance </li></ul></ul>
    17. 23. Why should I bother?
    18. 24. Agenda <ul><li>Intro: What & Why??? </li></ul><ul><li>OSI model : Back to the basics </li></ul><ul><li>10000 feet view: How the web works </li></ul><ul><li>RFC 2616: Anatomy </li></ul><ul><li>RFC 2985: Handling Statelessness </li></ul>http://www.flickr.com/photos/stephenpoff/2312981944/
    19. 25. OSI & TCP/IP protocol suite <ul><li>OSI is a reference model </li></ul>http://blog.uad.ac.id/imam_riadi/files/2009/01/osi-layer.jpg
    20. 26. OSI & TCP/IP protocol suite… <ul><li>TCP/IP protocol suite is implementation of OSI </li></ul>http://www.hill2dot0.com/wiki/index.php?title=Image:G0209_TCPIP_vs_OSI.jpg
    21. 27. OSI & TCP/IP protocol suite… <ul><li>Visual learning: Wireshark , baby </li></ul><ul><ul><li>http://www.wireshark.org/ </li></ul></ul>
    22. 28. Agenda <ul><li>Intro: What & Why??? </li></ul><ul><li>OSI model : Back to the basics </li></ul><ul><li>10000 feet view: How the web works </li></ul><ul><li>RFC 2616: Anatomy </li></ul><ul><li>RFC 2965: Handling Statelessness </li></ul>
    23. 29. The Communication <ul><li>My favorite interview question: </li></ul>http://www.flickr.com/photos/terryhart/2890904949/
    24. 30. The Communication <ul><li>My favorite interview question: </li></ul><ul><ul><li>What all happens between the time when: </li></ul></ul>we click on a hyperlink and the page is completely rendered in a browser
    25. 31. Brower Proxy LB Web Server DB Server Internetz
    26. 32. Brower Proxy LB Web Server DB Server Client Server (null.co.in) Internetz
    27. 33. Brower Proxy LB Web Server DB Server Client Server (null.co.in) Browser cache/ hosts file/ DNS server null.co.in Internetz
    28. 34. Brower Proxy LB Web Server DB Server Client Server (null.co.in) Browser cache/ hosts file/ DNS server 74.53.228.212 null.co.in Internetz
    29. 35. Brower Proxy LB Web Server DB Server Client Server (null.co.in) TCP Connection: There, bro? SYN Internetz
    30. 36. Brower Proxy LB Web Server DB Server Client Server (null.co.in) SYN SYN-ACK TCP Connection: Yo! Internetz
    31. 37. Brower Proxy LB Web Server DB Server Client Server (null.co.in) SYN SYN-ACK ACK TCP Connection: Cool! Internetz
    32. 38. Brower Proxy LB Web Server DB Server Client Server (null.co.in) HTTP: Got this file? GET / Internetz
    33. 39. Brower Proxy LB Web Server DB Server Client Server (null.co.in) HTTP: Yup! Here ‘tis. GET / 200 OK index.html Internetz
    34. 40. Brower Proxy LB Web Server DB Server Client Server (null.co.in) HTTP: Can I have these as well? GET / 200 OK index.html GET /js.js GET /pic.jpg Internetz
    35. 41. Brower Proxy LB Web Server DB Server Client Server (null.co.in) HTTP: Sure! GET / 200 OK index.html GET /js.js GET /pic.jpg 200 OK more content… Internetz
    36. 42. Brower Proxy LB Web Server DB Server Client Server (null.co.in) FIN TCP Connection: Arigato, am done. Internetz
    37. 43. Brower Proxy LB Web Server DB Server Client Server (null.co.in) FIN FIN-ACK TCP Connection: Sayonara! Internetz
    38. 44. The Communication <ul><li>… . or simply </li></ul>
    39. 45. The Communication <ul><li>Web 2.0 has shrunk the client and server distinction </li></ul><ul><li>Conventionally, client sends an HTTP request </li></ul><ul><li>Server responds with an HTTP response </li></ul>
    40. 46. The Communication: HTTP Request <ul><li>Request Line </li></ul><ul><ul><li>Request Method </li></ul></ul><ul><ul><li>Requested Resource </li></ul></ul><ul><ul><li>HTTP Version used </li></ul></ul><ul><li>Headers </li></ul><ul><ul><li>General Headers </li></ul></ul><ul><ul><li>Request Headers </li></ul></ul><ul><ul><li>Entity Headers </li></ul></ul><ul><li>Content (Optional) </li></ul>
    41. 47. The Communication: HTTP Response <ul><li>Status Line </li></ul><ul><ul><li>HTTP version(s) understood by server </li></ul></ul><ul><ul><li>Status code (3 digit numerical value) </li></ul></ul><ul><ul><li>Status description </li></ul></ul><ul><li>Headers </li></ul><ul><ul><li>General Headers </li></ul></ul><ul><ul><li>Response Headers </li></ul></ul><ul><ul><li>Entity Headers </li></ul></ul><ul><li>Content (Optional) </li></ul>
    42. 48. Agenda <ul><li>Intro: What & Why??? </li></ul><ul><li>OSI model : Back to the basics </li></ul><ul><li>10000 feet view: How the web works </li></ul><ul><li>RFC 2616: Anatomy </li></ul><ul><li>RFC 2965: Handling Statelessness </li></ul>http://www.saynotocrack.com/wp-content/uploads/2007/06/flinstones-anatomy.jpg
    43. 49. Anatomy <ul><li>HTTP Request and Response are comprised of various components: </li></ul><ul><ul><li>Request Methods </li></ul></ul><ul><ul><li>Response Status Codes </li></ul></ul><ul><ul><li>Request Headers </li></ul></ul><ul><ul><li>Response Headers </li></ul></ul><ul><ul><li>General Headers </li></ul></ul><ul><ul><li>Entity Headers </li></ul></ul><ul><ul><li>Content (MIME Media Types) </li></ul></ul>
    44. 50. Anatomy: Request Methods <ul><li>Humans can convey emotions in several ways </li></ul><ul><li>Why should HTTP clients lag!!! </li></ul><ul><li>HTTP methods describe the type of communication </li></ul>GET POST HEAD OPTIONS TRACE PUT DELETE CONNECT
    45. 51. Anatomy: Response Status Codes <ul><li>Indicate the server’s mood corresponding to a request </li></ul><ul><li>Combination of a numerical code, and a short description </li></ul><ul><li>Cab be categorized in 5 categories: </li></ul><ul><li>1xx -- Informational </li></ul><ul><li>2xx -- Successful </li></ul><ul><li>3xx -- Redirection </li></ul><ul><li>4xx -- Client Error </li></ul><ul><li>5xx -- Server Error </li></ul>
    46. 52. Anatomy: Request Headers <ul><li>Specific to an HTTP Request </li></ul><ul><li>Carry information about the client, and the type of request </li></ul><ul><li>Facilitates better understanding between client and server </li></ul>Host Accept-Language If-Modified-Since Referer User-Agent Authorization If-None-Match Expect Accept Proxy-Authorization If-Range From Accept-Charset Max-Forwards If-Unmodified-Since TE Accept-Encoding If-Match Range
    47. 53. Anatomy: Response Headers <ul><li>Specific to an HTTP Response </li></ul><ul><li>Carry information about the server, and the type of response </li></ul>Accept-Ranges ETag Retry-After WWW-Authenticate Age Location Server Proxy-Authenticate Vary
    48. 54. Anatomy: General Headers <ul><li>Carry information about the HTTP transaction </li></ul><ul><li>Can be a part of request, as well as response </li></ul>Cache-Control Keep-Alive Pragma Via Connection Upgrade Trailer Warning Transfer-Encoding Date
    49. 55. Anatomy: Entity Headers <ul><li>Carry information about the content </li></ul><ul><li>Mainly a part of HTTP response </li></ul>Allow Content-Language Content-Location Content-Range Content-Encoding Content-Length Content-MD5 Content-Type Expires Last-Modified
    50. 56. Anatomy: Content <ul><li>IANA maintains a list of valid content types </li></ul><ul><li>It is specified by the Content-Type Entity header </li></ul><ul><li>Categorized in 9 MIME Media types: </li></ul>application audio example image message model multipart text video
    51. 57. Agenda <ul><li>Intro: What & Why??? </li></ul><ul><li>OSI model : Back to the basics </li></ul><ul><li>10000 feet view: How the web works </li></ul><ul><li>RFC 2616: Anatomy </li></ul><ul><li>RFC 2965: Handling Statelessness </li></ul>
    52. 58. Handling Statelessness <ul><li>HTTP is a stateless protocol </li></ul>
    53. 59. Handling Statelessness <ul><li>HTTP is a stateless protocol </li></ul><ul><ul><li>i.e., server’s got a bad memory </li></ul></ul>
    54. 60. Handling Statelessness <ul><li>Cookies to rescue </li></ul>http://www.flickr.com/photos/lij/283869088/
    55. 61. Handling Statelessness <ul><li>Cookies : </li></ul><ul><ul><li>are text files stored by client browser </li></ul></ul><ul><ul><li>maintain session by storing information </li></ul></ul><ul><ul><li>are non-executable </li></ul></ul>
    56. 62. Handling Statelessness <ul><li>Cookie attributes: </li></ul><ul><ul><li>name=value </li></ul></ul><ul><ul><li>expires=value </li></ul></ul><ul><ul><li>domain =value </li></ul></ul><ul><ul><li>path =value </li></ul></ul><ul><ul><li>Secure </li></ul></ul><ul><ul><li>HttpOnly --not a part of spec </li></ul></ul>
    57. 63. Conclusion <ul><li>The single biggest problem in communication </li></ul><ul><li>is the illusion… that it has taken place. </li></ul><ul><li>--George Bernard Shaw </li></ul>
    58. 64. Conclusion <ul><li>The single biggest problem in communication </li></ul><ul><li>is the illusion… that it has taken place. </li></ul><ul><li>--George Bernard Shaw </li></ul><ul><li>Think about it  </li></ul>
    59. 65. Q&A!!! <ul><li>Got queries? Raise your hands. </li></ul>
    60. 66. <ul><li>Arigato!  </li></ul><ul><li>Contact info: </li></ul><ul><ul><li>Om—At—[projectbee.org/null.co.in] </li></ul></ul><ul><ul><li>http://projectbee.org/ </li></ul></ul><ul><ul><li>Twitter - @bipinu </li></ul></ul><ul><ul><li>Flickr -- projectbee </li></ul></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×