1 / 17

Understanding the Same-Origin Policy: Cookies, DOM, and XMLHttpRequest in Web Development

This outline explores the Same-Origin Policy (SOP) in web development, detailing its background, significance, and various components such as the Document Object Model (DOM), cookies, and XMLHttpRequest. The SOP is crucial as it restricts how scripts from different origins can interact with each other, ensuring security across web applications. Additionally, we discuss how cookies serve as session identifiers, and how XMLHttpRequest plays a crucial role in AJAX techniques. Fundamentals of HTTP communication are also reviewed through tools like LiveHTTPHeaders.

cleta
Télécharger la présentation

Understanding the Same-Origin Policy: Cookies, DOM, and XMLHttpRequest in Web Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Same-Origin-Policy Lab Zutao Zhu 11/06/2009

  2. Outline • Background • Setting • SOP

  3. Background • Document Object Model (DOM) • Cookie • XMLHttpRequest • HTML • LiveHTTPHeaders extension for Firefox

  4. DOM • The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. – from wiki

  5. Cookie • Cookies are placeholders for server-provided data in the web browser typically used to track sessions. • Eachcookie is a key-value pair such as "color=green" and may have some optional attributes. • Web applications can create a cookie in the web browser using the set-cookie header in the HTTPresponse.

  6. Cookie (cont.) • After cookies are created, web browsers attach the cookies in all the subsequent requests to theweb application. • In a JavaScript program,All the cookies in the web application can be referenced using document.cookie object. • In cookie-based session-managementschemes, web applications store the session identifier in a cookie in the web browser.

  7. Use Live HTTP Header (tools)

  8. XMLHttpRequest • XMLHttpRequest has an important role in the AJAX web development technique. – from wiki • http://www.w3.org/TR/XMLHttpRequest/ • <script> xhr = new XMLHttpRequest(); xhr.open(POST,"http://www.originalphpbb.com/posting.php",true); xhr.send(null); </script>

  9. HTML • http://www.w3schools.com/TAGS/tag_a.asp • frame • iframe • img • a

  10. LiveHTTPHeaders • Observe the post request • Observe the response • Observe the cookie

  11. Setting • about:config in address bar of Firefox

  12. SOP • Origin: <protocol, domain, port> • Protocol: http://, file://, ftp://, etc. • Domain: microsoft.com, google.com, etc. • Port: 80, 8080, 21, 3128, etc. • The SOP identifies each web site using its origin, and creates a context for each origin. • For each origin, the webbrowser creates a context and stores the resources of the web application from the origin in the context. • JavaScript programs from one origin are not allowed to access resources from another origin.

  13. Examples • checks against the URL "http://www.example.com/dir/page.html". -- from wiki

  14. Resources for SOP • Cookie • History • URL • Contents • Etc.

  15. URL • When in URL bar, I input some cross domain web page, can you use “forward” and “backward”? • Is the URL showing?

  16. Tags do not honor SOP • Find out by yourself!

  17. Reference • http://wikipedia.org/ • http://www.w3.org/TR/2008/WD-XMLHttpRequest2-20080930/ • http://getfirebug.com/

More Related