Loading local content through XHR in a Chrome packaged app

Question

I\'m trying to load in a web app that I\'ve built using Backbone and it pulls in JSON and HTML template files that are stored locally. I was wondering with Chrome packaged a

Answer 1

I believe your problem is on the server side, rather than the client side. The server needs to send the following header for jQuery to deal with the response:

Access-Control-Allow-Origin: *

The problem, with this, however, is that any page can load that content now. Once you know the ID of your extension, you can change that header to something like:

Access-Control-Allow-Origin: chrome-extension://gmelhokjkebpmoejhcelmnopijabmobf/

A short test of something like the following showed these to work:

Content Below




// app.js
$(document).ready(function() {
  $.get('http://localhost:8080/content.php', function(data) {
    $('#loadme').html(data);
  });
});

This would fail with the following message if I didn't add the Access-Control-Allow-Origin header:

XMLHttpRequest cannot load http://localhost:8080/newhope/deleteme.php.
Origin chrome-extension://gmelhokjkebpmoejhcelgkfeijabmobf is not allowed by
Access-Control-Allow-Origin. 

Once I added the Access-Control-Allow-Origin header on the php response, it worked fine.

Again, setting this to * may be a security risk as any browser page anywhere is allowed to load it inline.