JavaScript cross-domain request succeeds but data is filtered out

Question

I have some working JavaScript (running inside Firefox (v41)) which I need to modify to support cross-domain XMLHttpRequests (my POST requests retrieve JSON encoded data). I have control over the server in question, so I capture OPTIONS requests and reply with:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, X-Requested-With
Access-Control-Max-Age: 86400

The browser then correctly sends the POST request, my server responds with the data and that data arrives back at my machine; I can see it in Wireshark and it is well formed JSON.

HOWEVER, the data doesn't get to my JavaScript. I can see in the Firefox window that the response to the POST request does arrive, with all the expected headers indicating (for example) 1120 bytes of content but, when I click on the "Response" tab, there is nothing in it: SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data. My JavaScript code ends up in the XMLHttpRequest's onerror function.

What do I need to do to get my data correctly? Any advice welcomed.

Here is a sample of one complete HTTP exchange, as seen by Wireshark on the browser machine:

    OPTIONS /getAllData HTTP/1.1
    Host: blah:blah
    User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:41.0) Gecko/20100101 Firefox/41.0
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
    Accept-Language: en-GB,en;q=0.5
    Accept-Encoding: gzip, deflate
    Origin: null
    Access-Control-Request-Method: POST
    Access-Control-Request-Headers: content-type
    Connection: keep-alive
    Pragma: no-cache
    Cache-Control: no-cache

    HTTP/1.1 200 OK
    Access-Control-Allow-Headers: Content-Type, X-Requested-With
    Access-Control-Allow-Methods: GET, POST, OPTIONS
    Access-Control-Allow-Origin: *
    Access-Control-Max-Age: 86400
    Date: Fri, 26 Aug 2016 09:22:14 GMT
    Content-Length: 0
    Content-Type: text/plain; charset=utf-8
    test

    POST /getAllData HTTP/1.1
    Host: blah:blah
    User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:41.0) Gecko/20100101 Firefox/41.0
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
    Accept-Language: en-GB,en;q=0.5
    Accept-Encoding: gzip, deflate
    Content-Type: application/string; charset=UTF-8
    Content-Length: 4
    Origin: null
    Connection: keep-alive
    Pragma: no-cache
    Cache-Control: no-cache

    HTTP/1.1 200 OK
    Content-Type: application/json;charset=UTF-8
    Date: Fri, 26 Aug 2016 09:22:15 GMT
    Content-Length: 1121
    {"wellformed":"data 1121 bytes long"}

HOWEVER, the data doesn't get to my JavaScript. - show the javascript, you've probably made a mistake there — Jaromanda X
when I click on the "Response" tab, there is nothing in it: ... so where do you see this {"wellformed":"data 1121 bytes long"} ? looks like it's a header if I read your post correctly!!! - is the server side code yours? — Jaromanda X

Fabien Fabien · Accepted Answer · 2016-08-26T11:13:26

I have toyed with Access-Control-Allow-Origin and the header needs to be implemented in each and every response that is sent to the client.

So, whenever you make that POST, the answer MUST include the ACAO header otherwise the browser will filter out the content for security purposes. I do not see the header from the capture you made, which might explain the issue.

You can take a look at the examples from Mozilla, you will see that the response to the POST do include the ACAO header.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Also, it seems that your body content is not separated from the header by a conventional empty line (\r\n in HTTP protocol). The body seems to be part of the header in your pastes, but it might just be a glitch from your copy-paste. If it's not then it's also a potential explanation: no body = no content.

Finally, I recommend that you debug your trafic through a tool such as BurpSuite which implements a nice Proxy allowing you not only to real-time view and edit your requests, but also to replay them and toy around. Initially a security tool, it is still great for debugging web apps.

https://portswigger.net/burp/

JavaScript cross-domain request succeeds but data is filtered out

1 Answers