HTML5 - SPLessons

HTML5 Web CORS

Chapter 28

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML5 Web CORS

HTML5 Web CORS

shape Introduction

HTML5 Web CORS is used to access the restricted area from another domain in a web browser. Following are the concepts covered.

  • About CORS
  • Event handler
  • Browser Support

About CORS

shape Description

CORS is known as the Cross Origin Resource Sharing is allowed to share the restricted area from another domain in a web browser. For example, when clicked on video player then it will ask the permission to access the camera otherwise, it won’t allow to access.

CORS Request

In order to make CORS RequestXMLHTTPrequest2 object is used by the Chrome, Firefox, Opera, Safari and the XDomainRequest object is used by the Internet Explorer.

function createCORSRequest(method, url) {
   var xhr = new XMLHttpRequest();
   
   if ("withCredentials" in xhr) {
      // Check if the XMLHttpRequest object has a "withCredentials" property.
      // "withCredentials" only exists on XMLHTTPRequest2 objects.
      xhr.open(method, url, true);
   }
   
   else if (typeof XDomainRequest != "undefined") {
      // Otherwise, check if XDomainRequest.
      // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
      xhr = new XDomainRequest();
      xhr.open(method, url);
   }
   
   else {
      // Otherwise, CORS is not supported by the browser.
      xhr = null;
   }
   return xhr;
}

var xhr = createCORSRequest('GET', url);
if (!xhr) {
   throw new Error('CORS not supported');
}

Event handlers

shape Description

In order to handle the CORS HTML introduced some event Handler and their descriptions as listed below.

Event Handler Description
bad_alloc Occurs when failure in memory allocation
onloadstart Used to start the request
bad_typeid Exception thrwon by typeid function
bad_function_call Exception thrwon when an empty function is called
onprogress Used to loads the data and send the data
onabort Used to abort the request
onerror used to action request has failed
onload Used to load successfully
ontimeout Request should complete before the timeout

The below code is used to demonstrate the onload or onerror event.

xhr.onload = function() {
   var responseText = xhr.responseText;
   
   // process the response.
   console.log(responseText);
};

xhr.onerror = function() {
   console.log('There was an error!');
};

shape Examples

The below example is used to demonstrate the makeCorsRequest() and onload handler as shown.

function createCORSRequest(method, url) {
   var xhr = new XMLHttpRequest();
   
   if ("withCredentials" in xhr) {
      
      // XHR for Chrome/Firefox/Opera/Safari.
      xhr.open(method, url, true);
   }
   
   else if (typeof XDomainRequest != "undefined") {
      // XDomainRequest for IE.
      xhr = new XDomainRequest();
      xhr.open(method, url);
   }
   
   else {
      // CORS not supported.
      xhr = null;
   }
   return xhr;
}

// Helper method to parse the title tag from the response.
function getTitle(text) {
   return text.match('<title>(.*)?</title>')[1];
}

// Make the actual CORS request.
function makeCorsRequest() {
   
   // All HTML5 Rocks properties support CORS.
   var url = 'http://www.tutorialspoint.com';
   
   var xhr = createCORSRequest('GET', url);
   
   if (!xhr) {
      alert('CORS not supported');
      return;
   }
   
   // Response handlers.
   xhr.onload = function() {
      var text = xhr.responseText;
      var title = getTitle(text);
      alert('Response from CORS request to ' + url + ': ' + title);
   };
   
   xhr.onerror = function() {
      alert('Woops, there was an error making the request.');
   };
   xhr.send();
}

Browser Support

shape Description

HTML5 Web CORS is supported by all the latest browsers. Following are the browser versions supported by HTML5.

Summary

shape Points

  • Several types of requests are used for the different browsers.
  • CORS wont allows restricted Resources.
  • Latest browsers are supported by CORS.