Develop Reference

Chrome will not cache javascript

I'm trying to get Chrome to cache my Javascript (the HTML includes a version number as a cache buster). So the idea is that if the version does not change I shouldn't need to reload 1MiB of Javascript but Chrome always seems to reload it anyway. I think I have the server returning the correct headers.
My html looks like:
<script type="application/javascript" async src="/index.js?version=123"></script>
Response Headers
HTTP/1.1 200 OK
Accept-Ranges: bytes
Cache-Control: public
Content-Encoding: gzip
Content-Language: en-US
Content-Type: application/javascript
Last-Modified: Wed, 23 Jan 2019 15:09:36 GMT
Vary: Origin
Vary: Accept-Encoding
Date: Thu, 24 Jan 2019 00:52:23 GMT
Transfer-Encoding: chunked
I have the "disable Cache" un-selected in the Network tab and in the devTools settings I've un-selected "Disable cache (when devTools is running)
I can see that my fonts are cached in the network tab of devTools but my index.js still loads all 1MiB

It seems to be because I'm using https but my dev box server doesn't have a certificate. If I disable https and use http it does cache the Javascript.

Ajax response data to vue resource served via cloudflare not being parsed from json in Chrome

I have a site deployed to Heroku with which I use Cloudflare as a proxy.
For some front-end behaviour I'm using Vue with Vue-resource to perform some ajax requests. The responses are in the form of JSON with a Content-Type:application/json header.
Strangely when my scripts are erroring because the responses are not being parsed to a javascript array/object by vue-resource, despite this being the expected behaviour. However, this problem is only occuring when the site is accessed via the Cloudflare URL. If I access it from the Heroku url (e.g. foo-bar-1234.herokuapp.com) all works fine. It also is working fine on my local dev environment (Vagrant, Nginx).
The problem also only occurs in Chrome. It works fine in Safari and Firefox regardless of whether it's Cloudflare or not.
I believe the problem must lie with something that CloudFlare is doing to the response from the Heroku server that is stopping Vue Resource in Chrome from properly parsing the response.
For reference here is the response from the CloudFlare-served request:
cache-control:no-cache
cf-ray:2d2f1980573d3476-LHR
content-encoding:gzip
content-type:application/json
date:Mon, 15 Aug 2016 19:37:10 GMT
server:cloudflare-nginx
set-cookie:sam_session=[redacted]; expires=Mon, 15-Aug-2016 21:37:10 GMT; Max-Age=7200; path=/; HttpOnly
status:200
via:1.1 vegur
x-ratelimit-limit:60
x-ratelimit-remaining:59
vs the heroku-served one:
Cache-Control:no-cache
Connection:keep-alive
Content-Type:application/json
Date:Mon, 15 Aug 2016 19:40:10 GMT
Server:Apache
Set-Cookie:sam_session=[redacted]; expires=Mon, 15-Aug-2016 21:40:10 GMT; Max-Age=7200; path=/; HttpOnly
Transfer-Encoding:chunked
Via:1.1 vegur
X-Ratelimit-Limit:60
X-Ratelimit-Remaining:58
The headers seem pretty similar so I can't think how the responses differ in a way that would cause this...
Any debug suggestions appreciated.
Update: The compiled javascript can be seen here (large file): https://github.com/samarkanddesign/samarkand-web/blob/master/public/js/admin.js
It's a large file so better to look at the repo: https://github.com/samarkanddesign/samarkand-web/tree/master/resources/assets/js
Update 2: example of a vue-resource ajax request executed in both situations:
CloudFlare
Direct from Heroku:
We can see the in the heroku example that the response data is resolved as an array of objects whilst in the CloudFlare one it's a string.

I believe the problem lies with Vue-Resource and the fact that CloudFlare (SPDY protocol) uses lower-case response headers, whilst Heroku Apache uses capitalised.
Vue Resource is incorrectly ignoring lowercase headers in its interceptors resulting in it missing parsing the response body.
This is referenced in this bug issue: https://github.com/vuejs/vue-resource/issues/317
And a quick way to patch it is via a custom interceptor:
Vue.http.interceptors.unshift(function(request, next) {
next(function(response) {
if(typeof response.headers['content-type'] != 'undefined') {
response.headers['Content-Type'] = response.headers['content-type'];
}
});
});

Does Chrome violate the standards in caching?

We noticed Chrome caches files locally and doesn't even send a request to our server to check if there's a newer version of the javascript file.
Example of HTTP response headers for a js file that Google cached:
Accept-Ranges:bytes
Access-Control-Allow-Headers:Content-Type
Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin:*
Content-Encoding:gzip
Content-Length:5479
Content-Type:application/javascript
Date:Tue, 12 Jan 2016 22:46:07 GMT
ETag:"7d68e1ceb647d11:0"
Last-Modified:Tue, 05 Jan 2016 12:44:25 GMT
Server:Microsoft-IIS/8.5
Vary:Accept-Encoding
x-robots-tag:noindex
Is it valid that Chrome cached the file? There's no Cache-control header or something that declares that the file can be cached locally, it only has ETag and Last-Modified.
BTW
Is there a way (maybe a header) to instruct Chrome to check if the cached file has changed without appending version to the file name? Setting no-cache is not an option since I do want it to be cached, but I want to use the ETag and Last-Modified headers as it should.

Unless specifically constrained by a cache-control (section 14.9)
directive, a caching system MAY always store a successful response
(see section 13.8) as a cache entry, MAY return it without validation
if it is fresh, and MAY return it after successful validation.
You can always use the must-revalidate directive.
When the must-revalidate directive is present in a response received
by a cache, that cache MUST NOT use the entry after it becomes stale
to respond to a subsequent request without first revalidating it with
the origin server.
Source

Can browsers react to Set-Cookie specified in headers in an XSS jquery.getJSON() request?

(Note: This is a follow up to my question Can jQuery.getJSON put a domain's cookies in the header of the request it makes? and covers the XSS case of Setting a cookie in an AJAX request?)
I've been told I'm unable to set cookies to be read by other domains that are not subdomains of the current domain using $.cookie(..., ..., {domain: ...}). But in a comment on a response to my last question, #zanlok said "The server's reply, however, can definitely set a cookie" and it got two upvotes.
So I thought I'd try using a service which was created for the explicit purpose of setting cookies called Freebase's "touch" API. The call looks like:
$.getJSON("http://api.sandbox-freebase.com/api/service/touch",
{}, // URL parameters
afterCookieIsSetCallback); // Callback function
Looking in FireBug at the response header it's like this:
Date Wed, 24 Nov 2010 03:35:28 GMT
Server Apache
X-Metaweb-Cost [...]
Etag [...]
Expires Wed, 24 Nov 2010 03:35:29 GMT
Cache-Control no-store
Vary Accept-Encoding
Content-Encoding gzip
Set-Cookie mwLastWriteTime=1290569730|10325_9202a8c04000641f80000000199eff96|sandbox; expires=Thu, 25-Nov-2010 03:35:28 GMT; Path=/
Last-Modified Wed, 24 Nov 2010 03:35:28 GMT
Content-Length 134
Content-Type text/plain; charset=utf-8
X-Cache MISS from cache01.sandbox.sjc1.metaweb.com
Connection keep-alive
X-Metaweb-TID cache;cache01.sandbox.sjc1:8101;2010-11-24T03:35:28Z;0001
So there's definitely a Set-Cookie in there, and the script runs the response handler. Yet the cookie is not present in the request headers for later JSON requests this script makes to .sandbox-freebase.com.
(By contrast, simply typing the touch api URL into the address bar and loading it that way does set the cookie for future requests. That applies even in other tabs.)
This seems to be a deviation from a prior "expected behavior", because there was a toolkit published by MetaWeb circa "2007-2009" which seemed to think such an approach could work:
http://www.google.com/codesearch/p?hl=en#v099O4eZ5cA/trunk/src/freebase/api.js&q=touch%20package:http://mjt%5C.googlecode%5C.com&l=340
Without knowing much about it, I'm wondering if it was a recent change that Firefox adopted and then WebKit followed suit. Perhaps the one mentioned here:
http://trac.webkit.org/browser/trunk/WebCore/xml/XMLHttpRequest.cpp#L856
So is there any canonical documentation on this particular issue?

The AJAX call you are making, is making a request to a domain outside of the domain of the top level url(the url in the address bar). This results in it being a 3rd party cookie, by default Internet explorer won't persist a 3rd party cookie. Meaning that the cookie will come back in the Set-Cookie header on the first request, but subsequent requests that you make to that server will not have that cookie sent in the request.
Like you said, if you go directly to the url in your browser it works. This is because in this case it's a first party cookie.
In order for IE to accept 3rd party cookie's the server that is sending the SET-COOKIE header on it's response, must also have a P3P Policy Header set.
Here is an example, when you navigate to CNN, you will notice one of the requests it makes is to a domain name of b.scorecardresearch.com, scorecardresearch is dropping a tracking cookie, but this cookie is considered a 3rd party cookie. So in order to make it work they had to also in include a p3p header, see headers below:
HTTP/1.1 200 OK
Content-Length: 43
Content-Type: image/gif
Date: Thu, 02 Dec 2010 19:57:16 GMT
Connection: keep-alive
Set-Cookie: UID=133a68a4-63.217.184.91-1288107038; expires=Sat, 01-Dec-2012 19:57:16 GMT; path=/; domain=.scorecardresearch.com
P3P: policyref="/w3c/p3p.xml", CP="NOI DSP COR NID OUR IND COM STA OTC"
Expires: Mon, 01 Jan 1990 00:00:00 GMT
Pragma: no-cache
Cache-Control: private, no-cache, no-cache=Set-Cookie, no-store, proxy-revalidate
Server: CS
If you were to copy this header and add it to the response, you would notice that the cookie's start working,
P3P: policyref="/w3c/p3p.xml", CP="NOI DSP COR NID OUR IND COM STA OTC"
It's best that you craft a P3P header specific for your business, but the above should work for testing purposes.

If I correctly understand you, you are wondering why the server sends Set-Cookie only on the first request. If that is true, then it's by design - take a look here:
http://en.wikipedia.org/wiki/HTTP_cookie
Set-Cookie is like a setter - the server sends it for the browser to cache it locally. It can send every time, but there is no need to do that, so it will send it again only if it needs to change the value stored locally.
Browser, on the other hand, will send Cookie header every time with the contents set by the last issued Set-Cookie from the server.

jQuery ajax problem with IE6

Hi my problem is a bit wired:
my $.ajax success handler looks like:
function(data){
alert(data);
}
Pretty simple, yeah?
The problem is that data IS ALWAYS 3 character long - no matter what was sent by the server! The characters: 31 65535 8 (using charCodeAt()).
In other browsers (even in IE 8) all works fine.
I've looked at xhr.responseText in complete handler - just the same result.
UPDATE
Full http response
HTTP/1.1 200 OK
Date: Sun, 07 Feb 2010 13:35:39 GMT
Server: Apache/2.2.12 (Ubuntu)
X-Powered-By: PHP/5.2.10-2ubuntu6.4
Set-Cookie: 1111111111111111=UjVXb1Q3WTdUIQ8jXmALbA88VzpRcVcgBzMDcldyUmtWawAyAFpQP1IwASEAbFh%2FDjoLZ1RiBWlWdwBnUGMHZlU2UGBTZFA5B2UMMlJgC29SbVdjVDRZOVRsDzReaQtuDzpXZVFjV2UHYwM1VzNSNlYzAG4AMVAwUjUBIQBsWH8OOgtlVGAFaVZ3AD5QIgdcVWVQNlNhUHIHMAwjUiQLL1JvVyZUOVk8VGkPal54C2wPNVcyUX1XYgdgAzlXL1IzVioAbQA3UG9SdgE4ACRYNg4xC2RUagVxViAAJFA3B3FVW1AzU2JQZQc7DCRSdQs2UidXb1Q2WT1UYA9yXhcLMg92V2lRP1c%2FBzcDLlc1UixWNAB8AC1QNVI7AW4AJ1htDnQLPVQyBT9WMABsUHIHTlVXUBtTQFAgB20MflJnCzZSdFcCVGpZY1Q%2BDz9eLQsuDyxXTlEHV3MHYAMvVzBSOVYmAGcAdlBsUmUBMABtWC4ObAs1VCMFJ1YKADZQMQd3VW1QJFNsUHQHLAxyUmwLflJuV2RUM1k3VHgPYV5oC2sPOVc1UWdXagdgAzBXOVIgVj8AIQ%3D%3D; expires=Tue, 07-Feb-2012 13:35:39 GMT; path=/
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 21
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/html
1
UPDATE !
Well, problem temporary? solved by disabling gzip in .htaccess

The characters you get look weird, but could it be that it's a BOM? It's none of the ones listed in the article, but maybe getCharCode() gets something wrong.
In that case, you would have to check the script you call to request the data. Try saving it explicitly without a BOM.

this is most times an problem with propper encoding of the requested content / displayed content.
Please verify that both use the same format.

Despite ajax is always done in UTF-8 some implementations are weird and they don't allow passing non ascii characters. You have to change them to entities.
If You pass only one character and still get problems - It might be the BOM mentioned by Pekka. You would have to save Your PHP FILE without any spaces before
Second thing is that You might be outputing something at the end of the php file.