Cross-Origin Resource Sharing(CORS)

“101”

Pulling data from another website

A presentation by Michael Russell

Why would you want to know about CORS?

“client” site

“server” site

Same origin policy Prevents a script running in the browser from

calling methods and resources offered by different websites from the one that hosts the script

CORS sounds complicated

What do you need for CORS?

An “application”—a script—on the client

A small change to the .htaccess file on the server

A “CORS-aware” browser

The application (1) The Javascript

<joomla-root>/libraries/rnReader.js

var kQA_el = document.getElementById("kQA_RNotes"); kQA_el.style.display = 'none'; kQA_isHidden = false; var kQA_el2 = document.getElementById("kQA_RTable"); kQA_el2.style.display = 'none'; kQA_isHidden2 = false;

function kQA_readTextfile(filename) { var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() { if(xhr.readyState === 4) { if(xhr.status == 200) { kQA_showContents(xhr.responseText, xhr); } } } xhr.open('GET', filename, true); xhr.send(); } function kQA_showContents(responseText) { kQA_el.innerHTML = responseText.replace(/</g,"&lt;"); kQA_isHidden = !kQA_isHidden; if (kQA_isHidden) {

kQA_el.style.display = ''; } else {

kQA_el.style.display = 'none'; } } function kQA_hideShowTable() { kQA_isHidden2 = !kQA_isHidden2; if (kQA_isHidden2) {

kQA_el2.style.display = ''; } else {

kQA_el2.style.display = 'none'; } }

The application (2) The web-page

• Write a Joomla article (set your editor to “none” so that you can use <script> elements)

<div id="kQA_technical"><p class="blog">This is a simple demonstration of an application that

reads a text file from another website and displays the information here on this page

<div class="releaseNotes">CHANGELOG <a name="changelog"><span class="releaseNotes" title="Hide/display changelog" onclick="kQA_readTextfile('http://www.site-b.com/textfile.txt');"> </span></a>

<pre id="kQA_RNotes">&nbsp;</pre></div></div><script type="text/javascript" src="libraries/rnReader.js"></script>

.htaccess file changes

To allow access from a single site, add the following lines to the end of your .htaccess file:

# Trust AJAX read requests from site-a#Header set Access-Control-Allow-Origin "http://www.site-a.com"Header set Access-Control-Allow-Headers "origin, x-requested-with, content-type"Header set Access-Control-Allow-Methods "PUT, GET, POST"Header set Access-Control-Allow-Credentials true

To allow access from any site:# Trust AJAX read requests from any site#Header set Access-Control-Allow-Origin “*"Header set Access-Control-Allow-Headers "origin, x-requested-with, content-type"Header set Access-Control-Allow-Methods "PUT, GET, POST"Header set Access-Control-Allow-Credentials true

Live demonstration Cross-origin resource sharing demonstrati

on