Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Cross Origin Resource Sharing (CORS) "101"

1,427 views

Published on

Suppose you want to use your website to pull data from another website? This presentaion discusses CORS and how to build a simple application that allows you to achieve the objective.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Cross Origin Resource Sharing (CORS) "101"

  1. 1. Pulling data from another website A presentation by Michael Russell
  2. 2. “client” site “server” site
  3. 3.  Prevents a script running in the browser from calling methods and resources offered by different websites from the one that hosts the script
  4. 4.  An “application”—a script—on the client  A small change to the .htaccess file on the server  A “CORS-aware” browser
  5. 5. 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'; } }
  6. 6.  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>
  7. 7.  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
  8. 8.  Cross-origin resource sharing demonstration

×