#META_LECTURE#: #TITLE#

Modified: #LAST_MODIFIED#
Humla v#HUMLA_VERSION#
Browser Networking

Browser Networking

Connection Management

Network Security

Mashups

XHR

XMLHttpRequest (XHR)

  • Interface to utilize HTTP protocol in JavaScript
    • standardized by at W3C
    • basis for AJAX
      • Asynchronous JavaScript and XML
  • Typical usage
    1. Browser loads a page that includes a script
    2. User clicks on a HTML element
      • it triggers a JavaScript function
    3. The function invokes a service through XHR
      • same origin policy, cross-origin resource sharing
    4. The function receives data and modifies HTML in the page

XHR Interface – Key Methods and Properties

  • Method and properties of XHR object
    • open, opens the request, parameters:
          method – method to be used (e.g. GET, PUT, POST),
          url – url of the resource,
          asynch – true to make asynchronous call,
          user, pass – credentials for authentication.
    • onReadyStateChange – JavaScript function object, it is called when readyState changes (uninitialized, loading, loaded, interactive, completed).
    • send, abort – sends or aborts the request (for asynchronous calls)
    • status, statusText – HTTP status code and a corresponding text.
    • responseText, responseXML – response as text or as a DOM document (if possible).
    • onload – event listener to support server push.
  • See , or for a complete reference.

How XHR works

Fetch API

Fetch API

  • XHR is callback-based, Fetch is promise-based
  • Interface to accessing requests and responses
    • Provides global fetch method to fetch resources asynchronously
    • Can be easilly used in service workers
    • Supports CORS and other extensions to HTTP
  • Interfaces
    • Request – represents a request to be made
    • Response – represents a response to a request
    • Headers – represents response/request headers
  • Basic usage:
  • 						async function logMovies() {
    							const response = await fetch("http://example.com/movies.json");
    							const movies = await response.json();
    							console.log(movies);
    						}

Making request

  • A fetch function is available in global window
  • It takes path and returns Promise
  • 						fetch('https://api.github.com/users/tomvit')
    							.then(response => response.json())
    							.then(data => console.log(data))
    							.catch(error => console.error('Error:', error));
  • You can make no-cors request
    • With Fetch, the request will be handled as with putting src to img
    						fetch('https://google.com', {
    							mode: 'no-cors',
    						  }).then(function (response) {
    							console.log(response.type); 
    						  });
  • You can access low-level body stream
    • With XHR, the whole responseText would be loaded into memory.
    • With Fetch, you can read chunks of response and cancel the stream when needed.
Security Mechanisms

Same Origin Policy

Why Same Origin Policy?

Scripting Attacks

Overview

  • Scripting Attacks
    • Intruders make users perform action that has side effects on their resources
    • Intruders inject malicious code to Web pages
  • Roles in Security Scenarios
    • Alice, Bob
      • Normal users, usually Alices wants to send a message to Bob or Alice accesses a Bob's site.
    • Eve
      • A user with bad intentions, usually a passive attacker.
    • Mallory
      • An active attacker, usually sends a link to a page with malicious code.

Recall: State management in HTTP

  • Request-response interaction with cookies
    • Session is a logical channel maintained by the server
  • Stateful Server
    • Server remembers the session information in a server memory
    • Server memory is a non-persistent storage, when server restarts the memory content is lost!

Cross-site Request Forgery (CSRF)

  • Exploits a trust of a website in a user's browser
  • Scenario
    1. Mallory sends a link to Alice (in an email, in a chat, etc.)
      • The link points to a page that has HTML code with hrefs to Alice's private resources
      • For example, to perform an action on Alice's account,
        it is possible to use img like this:
      • 								<img src="https://bank.com/account?do=transfer_money&amount=50000"/>
    2. Alice loads the page in her browser
      • Alice is authenticated to the bank's website, the browser sends Alice's authentication cookies with the request.
  • Issues and Prevention
    • The bank site vilotes REST, i.e. overloading of GET for making actions
    • The bank should check HTTP referer header
    • It is a "blind" attack, Mallory does not see the result
    • To perform POST, current browsers today use CORS protocol

Cross-site Scripting Attack (XSS)

  • Exploits a trust of a user in a website
  • Example Scenario
    1. An attacker injects a code to a page
    2. A users executes the code in his/her browser's session
    3. The code provides information (cookies) to the attacker
    4. The attacker uses the cookies to access the user's data

XSS Examples

  • Twitter in Sep 2010
    • Injection of JavaScript code to a page using a tweet
    • You posted following tweet to Twitter
    • 								There is a great event happening at 
      								http://someurl.com/@"onmouseover="alert('test xss')"/
    • Twitter parses the link and wraps it with <a> element
    • 								There is a great event happening at 
      								<a href="http://someurl.com/@"onmouseover="alert('test xss')" 
      									target="_blank">http://someurl.com/@"onmouseover=
      									"alert('test xss')"/</a>
    • See details at
  • Other example: Google Contacts
Cross-origin Resource Sharing Protocol (CORS)

Overview

  • Increasing number of mashup applications
    • client-side mashups involving multiple sites
    • mechanism to control an access to sites from within JavaScript
  • Allow for cross-site HTTP requests
    • HTTP requests for resources from a different domain than the domain of the resource making the request.
  • W3C Recommendation
    • see
    • Browsers support it
      • see at Mozilla

CORS Protocol – GET

  • Read-only resource access via HTTP GET
  • Headers:
    • Origin – identifies the origin of the request
    • Access-Control-Allow-Origin – defines who can access the resource
    • either the full domain name or the wildcard (*) is allowed.

CORS Protocol – other methods and "preflight"

  • Preflight request queries the resource using OPTIONS method
    • requests other than GET (except POST w/o payload) or with custom headers
    • A browser should run preflight automatically for any XHR request meeting preflight conditions
    • The browser caches responses according to Access-Control-Max-Age
JSON and JSONP

Recall: JSON

JSON in JavaScript

JSONP

JSONP in JavaScript