1. Basics of the Web Platform:
Introduction to Web Technology
Sanjeev Verma
2. Web Platform
• Web’s Basic Fabric: URIs +HTTP+HTML.
• Web Pages
– Basic Building Block of the Web—exist on Server.
– Core Technologies
• HTML (HyperText Markup Language)
– Adds structure and meaning to the Web Page.
» First Version by Tim Bernes-Lee in 1989;
» HTML 4.0/4.1 Standard in 1997.
– Standards:
» Web Hypertext Application Technology Working Group (WHATWG)
maintains HTML as living standard ( what browsers vendor do).
» W3C maintains snapshots of the standard (Guarantees
interoperability between implementations)
• CSS (Cascading Style Sheets)
– Adds style to the Web Page.
3. HTML
• HTML document
– Composed of Hierarchical structured elements
defined by Tags
• Based on ISO standard for Markup language—Standard
Generalized Markup Language (SGML)
– Opening and Closing tags-opening tags can contain
parameters using the name=value syntax.
– Typical structure of the HTML document with the top-level
<html> element, followed by a document head (<head>) and
(<body>)
4. HTML Elements-I
• HTML elements
– p element
• represents a paragraph
– Can contain child elements and text content.
– a element
• represents a hyperlink pointing to the content
• Attribute(s):
– href: specifies the destination of the link;
– target: replaces the document of open a new tab or window.
– form element
• groups form-associated elements that contain values to be sent to Web Application
• Attribute(s):
– action: remote location to send data to;
– method: HTTP method to use;
– encoding: desired encoding.
– input element
• represents a data field and is typically used with form associated element
• Attribute(s):
– Type: how data is presented to the user—checkbox, radio button or text field (validate HTML5)
5. HTML Elements-II
• HTML elements
– iframe element
• Allows multiple documents to be downloaded in a given document, while keeping them separate (nested
context).
• Attribute:
– src: specifies the document to be loaded in iframe context
– object element
• Allows the inclusion of external resource
• Attribute:
– type:
» Image—add object in the same context;
» Document—add object in an separate context ( like iframe);
» External resource with the operation delegated to a plugin.
– script element
• Allows the inclusion of dynamic scripts
• As content of the script or external resource using the src attribute.
• Attribute:
– type: language of the script;
– async; defer: influences loading and execution.
– meta element
• Allows the expression of metadata that do not fit anywhere:
– Document level metadata using name attribute.
– HTTP level metadata using the http-equiv attribute.
– Encoding when serializing an HTML document through charset attribute.
6. Cascading Style Sheets (CSS)
• CSS
– Describes how the structured elements of HTML need
to be rendered by the Browser
• Positioning content; Controlling spacing; Assigning fonts
&Colors; Modifying the Cursor appearance etc.
• Also supports a separate style for different target
platforms—printing; screen of the mobile device.
• Style Sheets
– Incorporated through separate files that are included in HTML
document using link element (recommended way)
– Embed directly in HTML document using style element.
• CSS code can be applied to specific HTML elements by
defining a selector that filters out the desired elements
7. Client side Interactivity: JavaScript
• History:
– Netscape Navigator introduced scripting engine in 1995
• To manipulate HTML documents; display dialogs and manipulate
open browser windows.
• Rebranded to Javascript.
– ECMA ( European Computer Manufacturers Association)
developed it further with several new features focused on
isolation and security:
• ECMAscript version 5
– W3C
• Standardized several browser-supplied APIs
– Provides extensive functionality to the Javascript within the browser.
8. JavaScript in the Browser-I
• JavaScript Integration in HTML document:
– Through script element that refers to the external
file containing JavaScript code ( Recommended).
– Direct integration of the JavaScript Code as the
content of the script element
• Lowered separation between the content and the code.
– Attach JavaScript code directly to the HTML
element—for instance as event handling code
using the on* ( e.g. onfocus) attributes ( Not
recommended).
9. JavaScript in the Browser-II
• JavaScript Execution in Browser:
– A separate JavaScript context to each HTML document—each context
having its own global and function scope—scripts loaded execute in
the browser context irrespective of the source.
– Browser supplied APIs allow navigation, communication with or access
to other JavaScript contexts—constrained by the browser-based
security policies.
– Java Script execution model:
• Works as an “Event Loop”, which runs scripts in the page in a synchronous
fashion.
• “Event Loop” also runs asynchronous callbacks that have been triggered-
enables calls to browser APIs.
• Web Worker:
– JavaScript code that is executed from the HTML page and runs in the background—long-
running scripts that are not interrupted by the user-interface scripts.
– The simplest use of workers is for performing a computationally expensive task without
interrupting the user interface.
– Communication with the main context is through even-based message passing.
10. JavaScript Data Format
• JSON (JavaScript Object Notation)
– Format based on a subset of JavScript.
– Commonly used to describe data objects in HTTP requests and responses:
• For example JavaScript can generate additional HTTP request using XMLHttpRequest
object.
– Standardized by IETF in language independent way:
• Used by various web services to return data to client requests.
– Modern Browsers all offer dedicated API calls to parse JSON.
• JOSE (Java Object Signing and Encryption)
– Secure Object version with the support for signing and encryption
• Use cases:
– Representations of the sensitive data—browser generated keys in Web Crypto.
– Security tokens (Secure Object Format) in authentication protocols between multiple providers.
– Collection of Specification Drafts:
• JSON Web Token (JWT):Basic JSON Structure for Security ( Under IETF OAuth2 spec
family)
• JSON Web Signature (JWS): JWS is used to sign JSON message;
• JSON Web Encryption (JWE): JWE is used to encrypt/decrypt JSON message.
11. Web Resource Identification: URI
• Scheme: protocol used to fetch the resource, e.g.: http/https protocol:
• Other schemes: data URI holds arbitrary data such as base64-encoded image; javascript URI
holds javascript code; chrome URI refer to internal settings and collected data within the
Chrome browser;
• Credentials: username: password-deprecated by RFC 3986 because of security concerns.
• Host: identifies the remote server, IP4/IPv6 address/DNS name
• Port: identifies the port to connect to on remote server, HTTP:Port 80; HTTPS:Port 443.
• Path: Unix-style path, identifying the resource located on the server.
• Query String: optional place to pass parameters, separated by an & or ;, to the resource being
fetched.
• Fragment: optional-intended to hold a value meant for client-side processing.
• Traditionally it holds the name of an anchor tag somewhere in the page, allowing the browser
to scroll to the location indicated by the fragment.
• No strict rules regarding its usage –has been used to store client-side secrets or even to
enable messaging between contexts
12. URIs in the Browser
• URI indicates the name & location of the resource to be loaded:
– A relative URI can be used within a page to additional content:
• Relative URI contains only the path starting from the Path.
• The browser automatically resolves the URI using currently loaded document as the
base.
– Many security policies and permissions systems are based on the parts of the
URI.
• Related Concepts:
– Domain: The domain corresponds to the host name of the URI. Subdomain
resides on a lower hierarchical level than the parent domain:
• Example: domain: example.com; sub-domain: test.example.com; .com is TLD ( Top Level
Domain).
– Origin (RFC 6454: Web Origin Concept): The origin is defined by the triple
(scheme, host, port):
• The origin is used within the browser to restrict access to certain client-side resources ,
or to make security decisions in general.
13. HTTP Protocol
• HTTP:
– Application-Layer stateless Request/Response
protocol built on top of TCP/IP
• Relations or Order between requests need to be
maintained by the browsers and/or servers on top of
the HTTP.
– HTTP Requests and Responses have many
configurable fields:
• HTTP Methods;
• HTTP Request and Response Headers;
• Response Codes.
14. HTTP Methods
• HTTP Methods
– Mandatory field in HTTP request message;
– Determines the type of action that needs to be performed
by the server.
• GET Method: Client uses this to retrieve a web resource identified
by the URI;
• POST Method: Client uses this method to submit data to the
server—message post to a forum; authentication form submission.
• Other Methods ( not commonly used): HEAD; OPTIONS; PUT &
DELETE; CONNECT &TRACE:
– OPTIONS method allow the client to ask about communication
capabilities of the server-used by cross origin resource sharing.
– CONNECT method allows the use of the proxy for a specific request.
• Web Developers can also define custom HTTP methods with their
corresponding behavior.
15. HTTP Headers
• HTTP Headers:
– Determine the meaning of the Request and
Response messages:
• Content type; redirecting the browser to different
location and requesting additional authentication from
the browser.
– Browsers servers can also define custom headers
to define custom headers to enable new or
application specific functionality.
16. HTTP Request Headers
• Standardized HTTP Request Headers:
– User-Agent: specifies which type of User Agent is making the
request—version, underlying OS etc.
– Referer: tells where the request originated from:
• Server can keep track of the referring websites—privacy violation with respect
to the user.
– Cookie: a cookie is server-provided key-value pair, stored by the client.
Client send this value in the Cookie header to the server-which can
add stateful information to the request.
– Authorization Header: allows the client to provide authentication
information to the server in application independent way:
• Base Scheme: base64 encoded value of {username, password};
• Digest Scheme: Applies hash value to the credentials before sending them.
• Header can be added by the browser or web application—no guarantee about
the origin.
17. HTTP Response Headers
• Standardized HTTP Response Headers:
– Content-Type: optional header that allows the server to
specify the MIME type of the content in the response, as
well as the character encoding used.
– Location: optional header that can be used to redirect the
browser to a different location to retrieve the requested
content by supplying the new URI.
– Set-Cookie: can be used by the server to store key-value
pairs on the client—automatically attached to the request
to the same domain in future-sharing of the state among
requests.
– WWW-Authenticate: server includes this header if the
client request for a resource that requires additional
authentication—accompanied by the 401 response code.
18. HTTP Response codes
• HTTP Response messages include a 3 digit status code—
first digit identifies 5 classes of response codes-last two
digits have no special meaning—simply define a status
code:
– 1xx:rarely used;
– 2xx:Success
– 3xx:Redirection: resource need to be retrieved from a different
location for reasons—301:Moved Permanently or 303:See other.
– 4xx:Client Error: problematic behavior by the client—401:trying
to access without authorization; 403:access denied;404:non-
existant resource.
– 5xx:Server Error: processing error at the server side:500 internal
server error.
19. HTTP 2.0
• HTTP 2.0 (IETF draft)is based on the SPDY
(Speedy) protocol by Google to
– Speed-up the page load time
– Improves web security.
• HTTP 2.0 does this through:
– Multiplexed Requests
– Prioritized Requests
– Compressed Headers
– Server-Pushed Content &
– Application Layer Protocol Negotiation Extension
• Deploy HTTP 2.0 over TLS through this extension.
20. HTTPS:HTTP with Security
• HTTPS:
– HTTP protocol deployed on top of a network
connection secured by TLS.
– HTTPS prevents attack at network level such as
man-in-the-middle attacks, preventing the theft or
manipulation of sensitive information, such as
authentication credentials or payment
information.
– Verification of signature requires provisioning of
root CA’s key or certificate into the browser.
21. Impact of HTTPS on the Web
• Consequence on HTTP protocol and Web
Content:
– HTTPS causes the secure and non-secure content
on the same domain to appear from different
origins.
– Omission of Referrer Header whenever a request
is made from an HTTPS resource to an HTTP
resource.
22. HTTPS Disadvantages
• Disadvantages:
– CA system with large number of root CAs, hassle
introduced by generating key pairs, requesting
certificates, paying CAs, etc.
– Circumvention of Web Caches—can’t deal with
encrypted content.
– Mixed Content—when HTTPS resources include
content from non-HTTPS origins, inviting attackers
through the Front Door.
23. Cookies: Sharing State between Client
and Server
• Cookie:
– Small chunks of data, provided by the web apps and stored
by the browser.
– Used for session management, or to store temporary
session information, such as user preferences or a
shopping cart.
– Default behavior
• Web application sends a new cookie (e.g. session-id)using the Set-
Cookie Response Header;
• Browser stores the cookie and the web application’s domain in the
cookie-jar.
• when a new request to a server is triggered, the browser searches
the cookie-jar for all cookies associated with the target domain,
and attaches them to the request using the Cookie Header.
24. Cookie-Attributes
• Cookie Attributes (Optional):
– Lifetime
• How long cookie should be kept by the browser—default behavior cookie stays as long as
the browser session lasts.
– Domain
• Allows web application to limit cookie scope to a domain or specific sub-domain-default
scope limited to the domain of resource that set the cookie.
– Path
• Limits the scope of a cookie to a Path-attaches cookie only if the request is for a resource
belonging to a specific path.
• Eases cookie management when multiple web applications are hosted under the same
domain. However these apps can access each-others cookies through JavaScript.
– HttpOnly
• Restricts a cookie to for use in HTTP headers only, preventing any JavaScript-based
access.
– Malicious scripts can’t steal or manipulate sensitive cookies
– Secure ( only HTTPS)
• Restricts the use of cookie to HTTPS connections only.
26. Evolution of Web to Application
Platform-Recap
• Steps Towards Creating an Actual Web Application Platform:
1. Richer Presentation:
1. Agreed Upon graphics formats (GIF/PNG/JPEG);
2. Agreed Upon CSS—separating content & presentation.
2. Client-Side Interactivity:
1. Need for powerful and interactive presentation;
2. Web interfaces to Java+JavaScript;
3. Object Model of the document (web page) so that JavaScript can
manipulate the document
1. DOM (Data Object Model) is the standard model through which JavaScript code can
refer to the elements and content of a web page.
3. Client-side state:
1. Cookies: simple client storage—either for simple user preferences or for
session identifiers.
27. Web Evolution: Expanding Client-Side
Functionality
• Client-side functionality expansion:
– Introduction of Rich Content Types:
• Plugins
• HTML5 media support
– Expansion of the Available JavaScript APIs
• These expansions enable new Applications
such as:
– Mashups—composed of multiple Interactivity
Components.
28. Rich Client-side Content-I
• Rich Client-Side content introduction:
– Plugin: used to handle content in other formats
than HTML:
• Flash or Silverlight objects; Java Applets and ActiveX
components—Acts as standalone applications within a
page---
– Example applications—video players, in-browser games or in-
browser remote desktop software
– Runtime environment of these contents types are bound by
certain user configurable security limitations-deny or allow
storing local data, webcam and microphone.
29. Rich Client-side Content-II
– HTML5 Standard
• Several HTML elements introduce rich content capability directly
into HTML:
– Audio and Video tags for embedding audio or video content in web-
pages;
– Canvas element controllable through JavaScript for simple drawings,
mirroring the content of a video element;
– Alternative markup language: MathML for mathematical expressions and
SVG for scalable vector graphics.
– Shift from Static Content to Dynamic Content:
• Initially use JavaScript to manipulate web pages or get additional
information from the server;
• Now, web-app can have a full-fledged client-side component,
which runs autonomously in the user’s browser:
– Example: online office suites, including text editors and spreadsheets,
that run entirely in the browser.
30. JavaScript APIs
• JavaScript APIs:
– Expose client-side functionality to the web
application.
– W3C working groups maintain them with a set of
features, interfaces, implementation guidelines
and the associated permission model.
31. JavaScript APIs: DOM APIs
• DOM APIs:
– These APIs expose functionality to the JavaScript
that enables the creation and manipulation of the
DOM (Document Object Module) of HTML within
the browser.
– Typical Operations:
• Inspection of HTML elements and attributes, the
removal certain elements, or the creation of new
elements with their children.
• Simpler API now offers a simple API to access the DOM
and handle events within the DOM
32. JavaScript APIs: Remote
Communication APIs
• Remote Communication APIs:
– Offer client scripts the capability to send data to remote
hosts and fetch remote resources.
• XMLHttpRequest (XHR) allows JavaScript to send HTTP requests
asynchronously. CORS (Cross-Origin Resource Sharing) specs
further governs the new capabilities of the XHR object.
• Web Sockets API specs allows the creation of the socket-based
communication channel, allowing arbitrary ( binary) data to be
transmitted.
• Server-Sent Events API specs allows a script to keep a connection
open, so the client-side script can be notified in case of interesting
events.
• WebRTC API specs enables real-time communication between
browsers, allowing browsers to talk to each other.
33. JavaScript APIs: Intra-Browser
Communication APIs
• Intra-Browser Communication APIs:
– Enables communications within the Browser:
• Web Messaging APIs specs allows communications--
text messages or JavaScript objects--between the
different JavaScript contexts. Additionally the browser
exposes location variables that can be used to trigger
navigation events in different contexts.
• Web Workers APIs specs enable background contexts
that allow asynchronous processing in the background.
– Workers can be shared among several documents of the same
applications, and communications with a worker is similar to
the Web Messaging API
34. JavaScript APIs: Storage APIs
• Storage APIs
– Enables the client-side storage mechanisms:
• Web Storage APIs specs offers a lightweight API to store
key-value pairs;
• Indexed Database APIs specs offers advanced Database
with records that can be queried using indices;
• Several other APIs specs ( File API) allows the creation
and use of temporary, application bound File System
within the browser.
35. JavaScript APIs: Device Access APIs
• Device Access APIs:
– Enables JavaScript access to:
• Device information—information from local sensors;
actual device characteristics such as networking
information etc.
– Enables JavaScript to send information to:
• The device such as system-level notifications or
triggering vibration events.
36. Mashups: Interactive Client-side Web
Applications
• Mashups:
– Web applications composed of multiple
interactive components from—often from
different component providers:
• Collaboration between independent components
provides the added value.
• Uses various underlying web technologies to achieve:
– Composition, Collaboration and Communication
37. Mashups: Composition
• Composition:
– Web Page directly includes remote script content;
– Web Page indirectly includes remote component in a
separate iframe in the integrating page
• Trade-offs Flexibility versus Security:
– Direct approach provides flexibility at the cost of
security—since included script gets full access to the
content in the integrating page.
– Indirect approach isolates the included component in
a separate context with little flexibility and limited
communication between components
38. Mashups: Collaboration
• Collaboration:
– Enabling Collaboration between different
components is not trivial & there have been
several proposals to make flexible and secure
mashups architecture.
– W3C had adopted Web Messaging specifications
that allow opt-in communications between
different browsing contexts.
39. Mashups: Communication
• Communication:
– Mashup components in addition also need to
communicate with the remote host of their
providers to fetch additional content or process
certain information.
– Same Origin Policy provides hindrance:
• CORS (Cross Origin Resource Sharing) specs enables
client-side cross-origin communication, but giving the
contacted server the necessary control to prevent
misuse or abuse from unauthorized client contexts.
41. Browser Architecture-I
• Browser:
– User’s main Window & Interface to the Internet.
• Main Functional Blocks:
– Networking Stack-retrieves the required resource;
– Multiple Parsers-transforms the raw web content
into meaningful concepts;
– Rendering Engine-ensures that the parsed content
is visualized and displayed as intended.
42. Browser Architecture-II
• General Web Model includes:
– Browsing Context
• Loads document and is associated with Windows or Tab: Top Level
Browsing Context;
• Nesting Browsing Context-enabled by certain HTML elements such as
the iframe or object elements;
• Auxiliary Browsing Context created through popup windows—
associated (not nested) with creating browsing context.
– Document Object Model (DOM)
• Represents internal structure of a document, which is a hierarchical
tree of HTML elements. The DOM is also provided with a script
accessible API enabling inspection and modification of the tree
– Scripts Execution Environment—associated with the document
and holds the global state and code of the scripts within the
given document.
44. Extending Browser Functionality
• Browser Functionality Extension:
I. Adding Plugins that handle arbitrary content;
II. Extending browser functionality using
extensions;
III. Delegating content handling to a separate
application
45. I-Plugins for Arbitrary Content
• Browsers Plugins
– Designated handlers for specific kinds of content.
– Associated with MIME types and automatically invoked
when a content of certain MIME type is encountered
– Can be used to hand non-content rendering engine—e.g.,
Gnome Shell Integration plugin
– Plugins typically follow the cross-platform NPAPI (
Netscape Plugin API) architecture—custom made arch.
Such as ActiveX can also be used.
– Plugin content runs within the environment of the handler,
where the security policies of the browser no longer reign.
46. II-Browser Extensions
• Browser Extensions:
– Extend the core functionality of the browser
– Different flavors-simple toolbar or behavior changing
extensions
– Does not use MIME type –Uses the exposed APIs to
register hooks and react to events
• Example: NoScript; AdBlock and FireBug extensions
• Typically written in JavaScripts.
– Browser extensions are very powerful and has access
to everything that happens within the Browser
47. III-Delegating Content Handling to
Other Applications
• Existed for a long time but mainly used by the
mailto: that invoked an email client.
• HTML5 introduces custom scheme and
handlers:
– Take the delegation to new level, enabling
applications to register themselves as the handler
for a scheme or content type:
• Web apps can register itself as the handler for a specific
content type such as PDF documents or audio files.
• Webmail application can register for a mailto scheme.
48. Browser Security Policies
• Browser Security Policies:
– Govern Content behavior;
– Regulate interactions;
– Manage permissions;
– Shield sensitive information from unauthorized
access.
• Four Classes of Policies:
– SOP (Same Origin Policy);
– Navigation Policy;
– Constraining Resources by origin;
– Security Model For Third-Party Inclusion.
49. Event Handlers DOM
Window
(Origin, Location,
History, document)
SandboxIntra-Window Communication
(Web Messaging, Window Navigation,
Descendant policy
Media API
Device “Sensor” API
(Sysinfo API,Geolocation,…)
External Communication
(CORS, UMP, XHR 1+2)
UI
(User input, output rendering
Application Cache
Web Storage
An Abstract model of next-generation browser standards, showing how different
specifications can be grouped together.
50. 1. SOP: Same Origin Policy
• SOP:
– The basic function of the SOP is to prevent scripts loaded
in one origin from programmatically accessing resources
from other origins;
– Originally to prevent access to DOM—now extended
tocookies, local storage facilities or XMLHttpRequest (XHR)
object:
• HTML5 prevents cross-origin leaking through Canvas element—
browser consider canvas to be tainted with the origin of image.
– SOP can be relaxed using document.domain JavaScript
property:
• For example www.example.com and login.example.com can both
set document.domain property to example.com to co-operate
freely.
51. 2. Navigation Policy
• Navigation Policy:
– Addresses the scenario, where one context wants to
navigate the window or frame from another context-
possibly hosting document from a different origin—
open pop-up windows or navigate their child frames (
Note SOP will prohibit this).
– Descendant Policy for frame navigation:
• States that the browsing context can only navigate its child
frames.
• Exception, if the initiating context shares its origin with an
ancestor of the non-child context
52. 3. Constraining Resources By origin
• Constraining Resources By Origin:
– Access to Resources constrained by origin in addition
to browsing context:
• Access to local resources such as local storage; use of the
XHR object and access to cookies.
• Partitioning the resources based on origin, effectively
restricting data access to scripts running in the original
origin:
– For example, Indexed Database API offers a separate storage
container to each origin.
– XHR requests can be sent to the source server of the page
containing the script—XMLHttp Request Leve 2 specs allow cross-
origin request with certain restrictions.
53. 4. Security Model for Third Party
Content Inclusion
• Third Party Content Inclusion:
– Inclusion of third-party images, stylesheets, JavaScript
libraries through HTML tag with appropriate URI:
• Security concerns for dynamic content since included
content get access to all origin-constrained resources.
• Solution:
– Use iframe
» The advantage is that the integrated component is isolated
from the integrating page via SOP. Code has access to
sensitive JavaScript operations but scope is limited to its
execution context
» For example, integrating page has access to local storage
APIs but only has access to the local storage of its origin
» HTML5 sandbox attribute in the iframe allows disabling of
security-sensitive features.
