Basic web security model

1. Basic Web Security Model

2. Contents
• Browser Content
• Document Object Model
• Same Origin Policy

3. World Wide Web (WWW)
• Latest revolution in the Internet Scenario
• Allowsmultimediadocumentstobeshared between machines–Text,Image
Video,Audio
• Resemblesacob-webduetoInterlinkingofdocumentswhichiscomplexand
unstructured

4. HTTP
• Hyper Text Transfer Protocol Language used by clients to interact with
servers
• HTTP is Stateless which means that every request is treated discretely
and the server does not maintain the logical connection between
packets
• Connection Steps:
• Client opens socket connection to HTTP server
• Client sends requests to server
• Server sends back message
• Server closes the connection

5. HTTP Request Methods
• GET:
• Used if link is clicked or address typed in browser
• No body in request with GET method
• POST:
• Used when submit button is clicked on a form
• Form information contained in body of request
• HEAD:
• Requests that only header fields (no body) be returned in the response

6. Web Browsers
• A web browser (commonly referred to as a browser) is a software
application for accessing information on the World Wide Web
• Each individual web page, image, and video is identified by a distinct
URL, enabling browsers to retrieve and display them on the user's
device
• The information is received in the form of HTML – HyperText
Markup Language
• The browser parses HTML and displays them with the prescribed
aesthetics

7. Web Browsers
• Primary Tasks
• Convert web addresses (URL’s) to HTTP requests
• Communicate with web servers via HTTP
• Render (appropriately display) documents returned by a server
• Additional Functionality
• Execution of scripts (e.g., drop-down menus)
• Event handling (e.g., mouse clicks)
• GUI for controls (e.g., buttons)
• Secure communication with servers
• Display of non-HTML documents (e.g., PDF) via plug-ins

8. Document Object Model (DOM)
• The Document Object Model (DOM) is an API that allows programs
to interact with HTML (or XML) documents
• In typical browsers, the JavaScript version of the API is provided via
the document host object.
• W3C recommendations define standard DOM
• Originally, the Document Object Model (DOM) and Javascript were
tightly bound
• Each major browser line (IE and Netscape) had their own overlapping
DOM implementation
• Now, the DOM is a separate standard, and can be manipulated by
other languages (eg Java, server side javascript, python, etc)

9. DOM Structure
• Objects are in a hierarchy
• The window is the parent for a given web page
• Document is the child with the objects that are most
commonly manipulated
window
* location
* frames
* history
* navigator
* event
* screen
* document
o links
o anchors
o images
o filters
o forms
o applets
o embeds
o plug-ins
o frames
o scripts
o all
o selection
o stylesheets
o body

10. DOM: Referencing Objects
• Objects can be referenced
• by their id or name (this is the easiest way, but you need to make sure a name
is unique in the hierarchy)
• by their numerical position in the hierarchy, by walking the array that contains
them
• by their relation to parent, child, or sibling (parentNode, previousSibling,
nextSibling, firstChild, lastChild or the childNodes array

11. DOM: Referencing Objects
• The div is an element with an id of mydiv
• It contains a text element, which can be referenced by childNodes[0]
(childNode being an array of all childen of a node
• So the text in the div is not a value of the div, but rather the value of
the first (and only) childNode of the div
<div id="mydiv">
An Example Division
</div>

12. DOM History
• Very simple DOM was part of Netscape 2.0
• Starting with Netscape 4.0 and IE 4.0, browser DOM API’s diverged
significantly
• W3C responded quickly with DOM Level 1 (Oct 1998) and
subsequently DOM Level 2

13. Intrinsic Event Handling
• An event is an occurrence of something potentially interesting to a
script:
• Ex: mouseover and mouseout events
• An HTML intrinsic event attribute is used to specify a script to be
called when an event occurs
• Ex: onmouseover
• Name of attribute is on followed by event name

14. DOM Example
• The Rollover effect:
Cursor not over image Image changes when cursor
moves over

16. Import
JavaScript
code

17. Default language for scripts specified as attribute values

18. Calls to JavaScript show()
function when mouse
moves over/away from
image

19. Notice that idof image is first argument to show()

21. DOM method returning Object

22. Returns instance
of Element
(DOM-defined
host object)
representing
HTML element
with given id

23. Some properties of
Element instance
correspond
to attributes of
HTMLelement

24. Method aby Elementinstances for
setting value of an attribute

25. Effect: src attribute of HTML element with
specified eltIdis changed to specified URL

26. Image src changed to
CFP22.pngwhen mouse is
over image,
CFP2.pngwhen leaves

27. Document Tree
• HTML document elements form a tree structure
• DOM allows scripts to access and modify the document tree

28. Document Tree
• There are many types of nodes in the DOM document tree,
representing elements, text, comments, the document type
declaration, etc.
• Every Object in the DOM document tree has properties and methods
defined by the Node host object

29. Document Tree: Node

30. Document Tree: Node

31. Example HTMLdocument
Function we will write that will
use Nodemethods and properties to
produce string representing Element
tree
Document Tree: Node

32. Document Tree: Node
• String produced by TreeOutline()

33. Document Tree: Node
• Example: “walking” the tree of an HTML document
• Reference to html element is contained in documentElement property of
document object
• Use Node-defined methods to recursively create an outline of nodeName’s:

34. Document Tree: Node

35. Contains nodeTypevalue representing Element
Document Tree: Node

36. DOM Event Handling
• Event instance is created for each event
• Event instance properties:
• type: name of event (click, mouseover, etc.)
• target: Node corresponding to document element that generated the event
(e.g., button element for click, img for mouseover). This is the event target.
• JavaScript event listener: function that is called with Event instance
when a certain event occurs
• An event listener is associated with a target element by calling
addEventListener() on the element

37. DOM Event Handling

38. Event
target
DOM Event Handling

39. Event type
DOM Event Handling

40. Event handler
Definition
of event
handler
DOM Event Handling

41. Eventinstance
DOM Event Handling

42. Normally false
(more later)
DOM Event Handling

43. DOM Event Handling

44. DOM Event Handling: Mouse Events
• DOM2 mouse events
• click
• mousedown
• mouseup
• mousemove
• mouseover
• mouseout
• Event instances have additional properties for mouse events

45. DOM Event Handling: Mouse Events

46. Same-Origin Policy
• The same-origin policy is an important concept in the web application
security model
• Under the policy, a web browser permits scripts contained in a first
web page to access data in a second web page, but only if both web
pages have the same origin
• An origin is defined as a combination of URI scheme, host name, and
port number
• This policy prevents a malicious script on one page from obtaining
access to sensitive data on another web page through that page's
Document Object Model.

47. Same-Origin Policy
• All modern browsers implement some form of the Same-Origin Policy
as it is an important security cornerstone
• The same-origin policy is an important concept in the web application
security model
• The policies are not required to match an exact specification
• They are extended to define roughly compatible security boundaries
for other web technologies:
• Such as Microsoft Silverlight
• Adobe Flash
• Adobe Acrobat
• XMLHttpRequest

48. Same-Origin Policy: an example
• The following are the outcomes of the URL’s accessed from
http://www.example.com/dir/test.html