basics of the web platform
TRANSCRIPT
Basics of the Web Platform: Introduction to Web Technology
Sanjeev Verma
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.
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>)
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)
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.
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
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.
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).
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Evolution Of Web
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 document1. 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.
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.
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.
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.
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.
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
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.
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
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.
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.
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
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
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.
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.
Browser Architecture & Security
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.
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.
Document origin
Cookie
Port
DomainDOM
Scheme
Script ExecutionEnvironment
BrowsingContext
A Domain Model illustrating the internal representation of the basic web concepts In the browser.
Client-sideStorage
Links show association—for example, client-side storage is typically bound toThe origin of the document
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
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.
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
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.
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.
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.
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.
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
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.
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.