Replace server JSON response in Chrome

Question

I have a problem with some web-based tool that queries a server for JSON data in the AJAX way. It's not working properly - returned results are often not what I want and I need to wait a lot of time for the server to process the request.

The truth is I always want the same data (about a few people, to be precise) returned, so I thought of faking the server response. I tried to achieve this in a few ways, but didn't succeed.

I tried using Chrome's WebRequest functionality - I prepared an extension and redirected the request to a data URL with my JSON encoded. It worked, but only when I entered address manually in the Chrome's address field. When the web app tried to access the address, redirect silently failed. I immediately thought of Access Origin restrictions and quickly set up a webserver sending Access-Control-Allow-Origin headers.

Unfortunately, this didn't work too. When I entered the address by hand, the server was being queried and returned the right JSON, but in the app the request... silently failed. It looked like Chrome totally ignored possible Access-Control-Allow-Origin headers, since it didn't even queried the server. It's quite possible that Chrome only analyzes URLs since when I redirected the problematic request to random URL in app's domain it worked.

I also tried faking the whole JavaScript file of the app - which is statically linked to a document (e.g. it's included via standard script tag) using the same method. I failed miserably - the redirection just silently failed like it was failing on my first attempts.

A common solution to my problem is to use some kind of a proxy which changes server output, but I can't do that - I don't want to wait a few minutes for server to process the request. And by the way, the app is accessible only via HTTPS.

Is there any other way to feed the app with my hardcoded JSON? Or maybe I'm missing something?

EDIT Plugin code, based on "catblock" example:

chrome.webRequest.onBeforeRequest.addListener(
function(info) {
  console.log("AJAX call intercepted: " + info.url)
  return {redirectUrl: 'data:application/json,"test"'};
},
// filters
{
  urls: [
  "*://address.to.the.js.file.requested"
]
}, ['blocking']);

Manifest file, I only added the domain to the permissions section:

{
"name": "CatBlock",
"version": "1.0",
"description": "I can't has cheezburger!",
"permissions": ["webRequest", "webRequestBlocking", 
              "*://some.domain.com/*"],
"background": {
  "scripts": ["background.js"]
},

"manifest_version": 2
}

EDIT 2: Here are the screenshots from network panel of Chrome's developer Console which show that request gets silently canceled:

Answer 1

There are couple ways to do this.

The most easy way is to use Fiddler If you know Russian, or your browser has a decent translate feature, you can read this article - as I understand in your case you need second part - about Autoresponder. Or below there is few links with manuals in english.

this screenshot is the answer

About Access-Control-Allow-Origin in chrome - also my extension is's totaly simple (just add to response headers "Access-Control-Allow-Origin: *") and allow you aviod this error when you develop some feature. You can do same thing with Fiddler also In chrome you can run Chrome with developer key "chrome --disable-web-security" it is also remove error of "Access-Control-Allow-Origin"

Answer 2

If I understand you correctly, you are in control of the server that generates the JSON response. If that's the case then it must be possible - without any Chrome extension - to get the AJAX (XMLHTTPRequest) request and response working with the correct CORS headers.

As per my experience, failed cross-domain XHR requests only seem to fail "silently" in Chrome, but if you have a closer look at the console you will see an error message similar to:

XMLHttpRequest cannot load http://example.com/yourJSONfile.json. Origin http://your-app-domain.com:80 is not allowed by Access-Control-Allow-Origin.

This message may sometimes be misleading, because it will show up if anything CORS related went wrong (even if the Access-Control-Allow-Origin was set correctly). Also, on the network tab you will see the XHR request and response headers.

Now lets talk about the CORS headers. I would have to see your request's AJAX options or HTTP request headers to tell exactly which CORS headers you need, but as far as I can tell right now "Access-Control-Allow-Origin: *" might not be sufficient for your request to succeed: Depending on your request headers (which I'm unaware of at the moment, so the following are just examples), you might need additional CORS headers like:

"Access-Control-Allow-Methods": "OPTIONS, GET, POST"

"Access-Control-Allow-Headers": "content-type, accept, origin"

Also, for debugging purpose, it will be helpful to enable:

"Access-Control-Expose-Headers": "Access-Control-Allow-Origin"

so that you can see the CORS related response headers on the network tab.