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

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. [c]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'); } [/c]

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. [html]xhr.onload = function() { var responseText = xhr.responseText; // process the response. console.log(responseText); }; xhr.onerror = function() { console.log('There was an error!'); }; [/html]

The below example is used to demonstrate the makeCorsRequest() and onload handler as shown. [c]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(); } [/c]

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

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