1291717 - HTTP log inspection shows JavaScript code as JSON

Status: RESOLVED WORKSFORME

(DevTools :: Console, defect)

Description

[vasoczki.ferenc]

Attachment: xhr.jpg

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36

Steps to reproduce:

I am using 49.0a2 (2016-08-01) developer edition.

On document ready I am run this piece of code:

$.post('ajax.php', {}, function (response) {
	console.log(response);
}, 'script');

In ajax PHP just send the header and some javascript function call wiht a JSON object:

<?php
header('Content-Type: text/javascript; charset=utf-8');
echo "myFunction(" . json_encode(['aaa' => 111]) . ");";

The problem occured even, if I remove the 'script' as dataType.


Actual results:

If I am going to the console, open Console tab (not Network tab), and turn on the Net tab, it says JSON instead of script. In the raw data: myFunction({"aaa":111});

This is not a JSON object, even, if there is a JSON object inside the function parameter.


Expected results:

FF should say, script instead of JSON.

Comment 1

[Tooru Fujisawa [:arai]]

Can you check the response header in "Headers" tab?
What's the value of the Content-Type field that Firefox receives?

There are 2 cases the response is handled as JSON:
  1. Content-Type matches /\bjson/
  2. Response body can be parsed as JSON

2 shouldn't be the case, so the possible case is 1, that is, Firefox receives different Content-Type with some reason.


https://dxr.mozilla.org/mozilla-aurora/rev/378d208cd1c45de21d027fd6c3c7fbe494004680/devtools/client/netmonitor/netmonitor-view.js#3383
>     let jsonMimeType, jsonObject, jsonObjectParseError;
>     try {
>       jsonMimeType = /\bjson/.test(mimeType);
>       jsonObject = JSON.parse(responseBody);
>     } catch (e) {
>       jsonObjectParseError = e;
>     }
>     if (jsonMimeType || jsonObject) {
>       // Extract the actual json substring in case this might be a "JSONP".
>       // This regex basically parses a function call and captures the
>       // function name and arguments in two separate groups.
>       let jsonpRegex = /^\s*([\w$]+)\s*\(\s*([^]*)\s*\)\s*;?\s*$/;
>       let [_, callbackPadding, jsonpString] = // eslint-disable-line
>         responseBody.match(jsonpRegex) || [];
> 
>       // Make sure this is a valid JSON object first. If so, nicely display
>       // the parsing results in a variables view. Otherwise, simply show
>       // the contents as plain text.
>       if (callbackPadding && jsonpString) {
>         try {
>           jsonObject = JSON.parse(jsonpString);
>         } catch (e) {
>           jsonObjectParseError = e;
>         }
>       }
> 
>       // Valid JSON or JSONP.
>       if (jsonObject) {
>         $("#response-content-json-box").hidden = false;

Also, when Content-Type matches and the response looks like JSONP, it's also handled like JSON.

Comment 2

[vasoczki.ferenc]

I've checked, neither of it. Under ther Response headers:

Connection Keep-Alive
Content-Length 24
Content-Type text/javascript; charset=utf-8
DateWed, 03 Aug 2016 14:59:03 GMT
Keep-Alive timeout=5, max=99
ServerApache/2.4.4 (Win64) OpenSSL/1.0.1e PHP/5.6.5
X-Powered-By PHP/5.6.5

Comment 3

[vasoczki.ferenc]

Attachment: Response headers

Comment 4

[Tooru Fujisawa [:arai]]

thanks.
moving to appropriate component.

Comment 5

[Tooru Fujisawa [:arai]]

those screenshot don't look same with clean profile (both the style and displaying order)
are you using some extension related to console or net monitor?
does the same issue happen with safe-mode ?

Comment 6

[vasoczki.ferenc]

(In reply to Tooru Fujisawa [:arai] from comment #5)
> those screenshot don't look same with clean profile (both the style and
> displaying order)
> are you using some extension related to console or net monitor?
> does the same issue happen with safe-mode ?

Exactly the same in safe mode. And this is not for me, on my colleague machine the result is the same.

Comment 7

[Tooru Fujisawa [:arai]]

sorry, I misunderstood the issue.

Comment 8

[Tooru Fujisawa [:arai]]

Here's the logic that checks if the response is JSON.

https://dxr.mozilla.org/mozilla-central/rev/1576e7bc1bec7232e9e4ba78cce62526b1a6380b/devtools/client/webconsole/net/components/response-tab.js#51
> var ResponseTab = React.createClass({
> ...
>   isJson(content) {
>     if (isLongString(content.text)) {
>       return false;
>     }
> 
>     return Json.isJSON(content.mimeType, content.text);
>   },

https://dxr.mozilla.org/mozilla-central/rev/1576e7bc1bec7232e9e4ba78cce62526b1a6380b/devtools/client/webconsole/net/utils/json.js#200
> Json.isJSON = function (contentType, data) {
> ...
>   contentType = contentType.split(";")[0];
>   contentType = contentType.trim();
>   return !!contentTypes[contentType];
> };

https://dxr.mozilla.org/mozilla-central/rev/1576e7bc1bec7232e9e4ba78cce62526b1a6380b/devtools/client/webconsole/net/utils/json.js#7
> // List of JSON content types.
> const contentTypes = {
>   "text/plain": 1,
>   "text/javascript": 1,
>   "text/x-javascript": 1,
>   "text/json": 1,
>   "text/x-json": 1,
>   "application/json": 1,
>   "application/x-json": 1,
>   "application/javascript": 1,
>   "application/x-javascript": 1,
>   "application/json-rpc": 1
> };

So, it treats most of short text and JavaScript as JSON,
and that's not consistent with Netmonitor's display (comment #1).

Comment 9

[Nicolas Chevobbe [:nchevobbe][PTO - back on October 21]]

This now looks fixed (https://chatter-clam.glitch.me/) since we are using the same components than in netmonitor.
Probably fixed in Bug 1308219