CORS not working when page is compressed/cached - wordpress

At the moment I have 2 sites: A - with content and CORS header enabled, B - in which I want to embed content using AJAX Include Script.
Everything works great when page is not compressed. When W3 Total Cache is enabled, I get XMLHttpRequest Exception 101.
Weird behavior:
When I navigate to page where content should be and then purge A site's page cache and refresh B site, everything loads up fine. When I clear browser cache and refresh - XMLHttpRequest Exception 101 again. It's the same for Chrome, Firefox and Safari(both, desktop and mobile).
What's going wrong when compression is enabled?
p.s. I've tried setting up CORS by PHP and Apache. Makes no difference.

Could it be that when you turn compression on, the response has the Content-Encoding header in it? This header would need to be added to the CORS Access-Control-Allow-Headers response header.

Related

Stop Chrome from sending no cache no store header

I have static content (icons etc...) served via Asp.Net
Every response gets caching added to it, like this:
Response.Cache.SetExpires(Now.AddMinute(30))
Response.Cache.SetValidUntilExpires(True)
When I browse from my office everything is fine
When one of the users browses from home, the icons are not cached. Which makes browsing very slow.
I have a log that shows the incoming requests, and the requests from this user have this header
"Cache-Control":"no-cache, no-store"
I don't know if that's the issue, and if yes, how can I solve it? Or can there be something else wrong?
Also, after setting the cache expiration, it seems that the Response.Headers are not affected. I don't see the caching info in the headers.
This is the header string. Not a word about caching.
{Server=Microsoft-IIS%2f10.0&HitID=9&X-AspNetMvc-Version=5.2}
Why are my Cache settings being ignored?
Please check your IIS cache setting. The static file setting may not related with the Response.Cache.SetExpires method().
And you can also set the Cache-Control in iis. About how to set the Cache-Control you can refer to this link.
Cache-Control

Http - Do files with expires headers send requests?

I just read that files that do have Expires Headers should not be requested again until they expire.
While testing some caching stuff I wonderd why files do have a size and do consume time on "Content Download" on chrome dev tools, even if they got a max-age set and should be loaded from cache without sending any request?
Any explanations?
Quoting from this answer:
Chrome appears to be ignoring your Cache-Control settings if you're reloading in the same tab. If you copy the URL to a new tab and load it there, Chrome will respect the cache control tags and reuse the contents from the cache.

Pragma: no-cache in server response is affecting the behaviour of browser history in HTTPS

Ok, so I get the rule that browsers should not confuse history store and web cache: Clicking back should not send a request to the server. I also get that browsers manufacturers have the poetic licence to break this rule.
What I don't get is the following (please stay with me here)...
OK: Browsing our web site in HTTP, the history buttons did not send requests to server. Great! Behaviour as expected.
NOK: Browsing history on the same site in HTTPS mode, Chrome faired well but IE9/10 and FF did not. They would send the request for the HTML page to the server and then correctly use the store for the static files. Why the difference?
So after a little head scratching and testing, I found that the presence of the Pragma:no-cache header in the responses we were sending was responsible for this behaviour. After removing the header, that should never have been there in the first place, IE and FF faired well when using history buttons in HTTPS - no more sent requests.
Now, how can the presence of a header which should be ignored by modern browsers and only used in requests, be causing this strange issue in browser history navigation?

Understanding HTTP header X-Frame-Options

Regarding the X-Frame-Options (https://developer.mozilla.org/en-US/docs/The_X-FRAME-OPTIONS_response_header), I'm having a bit of a hard time parsing what the docs say and what I'm seeing. My understanding is that when the page returns SAMEORIGIN, browsers will only load the contents of the frame if the page that had the IFRAME came from the same domain.
I've got three machines. When I'm logged into SERVER-A, I navigate to a page that is hosted on SERVER-A. It contains an IFrame that loads a page from SERVER-B but it's in a different domain. This all works... but when I go to SERVER-C and browse to the same page (that's served from SERVER-A), it won't load. Looking at the IE Debugging Tools, the request for that IFramed page shows a status of aborted.
Ideas?
This is working as you'd expect from server C - you've stated that the iFrame shouldn't load in a page from a different domain in the X-Frame-Options, and it didn't. This security policy isn't applied for pages loaded from localhost, which sounds like it's what's happening here when you're on server A, similarly to this situation.
You haven't said which of the pages you've applied the X-Frame-Options to: it matters that it was on the page in the iFrame (i.e. on Server B in your setup). I don't think applying the header to server A will have made a difference.

Chrome & Expires Header - Image Caching

I have a web application that contains a few hundred small images, and is performing quite badly on load.
To combat this, I would like to cache static files in the browser.
Using a servlet filter on Tomcat 7, I now set the expires header correctly on static files, and can see that this is returned to Chrome:
Accept-Ranges:bytes
Cache-Control:max-age=3600
Content-Length:40284
Content-Type:text/css
Date:Sat, 14 Apr 2012 09:37:04 GMT
ETag:W/"40284-1333964814000"
**Expires:Sat, 14 Apr 2012 10:37:05 GMT**
Last-Modified:Mon, 09 Apr 2012 09:46:54 GMT
Server:Apache-Coyote/1.1
However, I notice that Chrome is still doing a round trip to the server for each static resource on reloads, sending an if-modified header and getting a correct 304 Not Modified response from Tomcat.
Is there any way to make Chrome avoid these 100+ requests to the server until the expiry has genuinely passed?
There are 3 ways of loading a page -
Putting the url in the address bar and pressing enter which is equivalent to navigating from a hyper link (Default browsing behaviour). This will honour the Expires headers and will first check the cache of the static content to be valid and then if the Expires header time is in future it will load it directly from the cache. In this case the browser will make no request at all to the server. In case the cached content is in-valid it will make a request to the server.
Pressing f5 to refresh the page. This would basically send a if-modified header to the server and verify if the content has changed. If it has changed you would get a 200 response else if not then a 304 response. In both cases the image is not loaded on the page until a response is received from the server.
Pressing ctrl+f5 which would forcefully clear all the cache and reload all the images. It will not spend time in verifying if the images have changed or not using the headers.
I guess the behaviour you are expecting is the first kind. The only thing that you should be looking at is the way you are loading the page. Normally people are not going to press f5 or ctrl+f5 thus your static content will not be re-validated every time. It will forcefully clear the cache and reload every static item on the page.
In short just remember - reload the page by pressing enter in the address bar instead. The browser will honour the headers that you have provided. This is not specific to chrome, its a W3C standard.
Be carefull when you are testing. I noticed that in Chrome version 20 if I hit F5 to reload the page then in the network panel I see new requests.
Hoewer if I place the cursor to the title bar, after the current page url, and hit enter, I get resources from cache, whitch header was set to cache.
Also a good reading:
http://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/
Assuming you have ruled out the various gotchas that have already been suggested, I found that Google Chrome can ignore the Cache-Control directive unless it includes public, and that it has to be first. For example:
Cache-Control: public, max-age=3600
In my experiments I also removed ETags from the server response, so that could be a factor, but I didn't go back and check.

Resources