web service using json and XMLHttpRequest javascript

Question

I am developing a chrome extension, and I want to be able to control it's function using key authentication. Each key will dispatch json to be sent to the browser using JavaScript. I am stuck because of the same origin policy. What is my best option to be able to parse this json data from the chrome extension and still retain security?

json data

{"valid":"true","info":{"id":"15","username":"johndoe","expire":"1340470800"}}

browser request using javascript

var xmlhttp;
function loadXMLDoc(url, cfunc) {
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = cfunc;
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

loadXMLDoc("http://website.com/user_data.php?key=3455-2534-7765-2335&username=johndoe", function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      var json = xmlhttp.responseText;
      alert(json);
  }
});

Answer 1

I think Chrome and Firefox support Cross-Origin Resource Sharing .

Read about the Access-Control-Allow-Origin HTTP header on MDN and W3C .

Since you are developing a browser extension, you might want to set: Access-Control-Allow-Origin: *

Sending headers with PHP is done with the header function.