How to set expires tags on images that are on a CDN - apache

My site runs on Apache and I have set expires headers in my .htaccess file like so:
<ifmodule mod_expires.c>
<FilesMatch "\.(ico|jpg|jpeg|png|gif|swf)$">
ExpiresActive On
ExpiresDefault "access plus 1 year"
Header append Cache-Control "public"
</FilesMatch>
</ifmodule>
This works great for images that come from my domain. However, 95% of my images are hosted on a cdn called CDN77, which runs on Nginx.
When I run Yslow on my site, it says that all the images being served from CDN77 do not have expires set. I have also confirmed the expires header is not set for those images by viewing the headers in LiveHTTP (Firefox headers viewer plugin).
CDN77 has said they have no way on their end to configure this.
Any thoughts or ideas as to how to set the expires for the images served from the cdn?

Change your CDN. First of all, they SHOULD allow clients to create exceptions for headers and nginx has a very elaborate configuration set for that. Secondly, the default mode should be to copy response headers from the upstream server (you), and only change or add headers that is specific to the CDN, like the host header, server header and strip any cookie headers you may be sending.

You’re not able to set expiry headers on files that are hosted on CDN77. If you require custom cache headers, you’ll need to contact their support department.
Expiry headers will be applied to all files on your CDN. It’s not possible to apply different expiry values to indiviudal files or specific file types.

Related

Clear web browser cache programmatically

I am working on a website with PHP in backend and AngularJS in frontend. and it's served via apache2.4.
My problem is when I update my website to a new version some users cannot see the latest modifications, so I added this .htaccess to force cleaning the cache every 1 hour, but it doesn't work as I expected.
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=3600, must-revalidate, private"
</ifModule>
Could you give me the right cache configuration to force the browsers to get the last update whenever a new version is available?
Within your build process, you could append a query parameter to your static files such as JS / CSS like : app.js?1476109496 (where epoch is a unique reference such as deployment epoch, commit hash or similar) which would cause browsers to request a new version without needing to mess with your .htaccess.

The files served by my Apache Server are not being saved on browser cache

I have installed and configured an Apache server with a virtualhost which serves images.
When I load my page with images on the browser the second time (the images should be on cache after the first time the page is loaded), the browser doesnt get the images (or files) from cache, and think that it should.
What is wrong? I am using Google Chrome, and when I load some other web from other server the cache works, so I think that I have some problem with the Apache, but I am not sure.
Thank you very much.
The response is a video-segment which is played by Dash player.
Response headers:
accept-ranges:bytes
content-length:194431
date:Wed, 09 Mar 2016 07:42:07 GMT
etag:"2f77f-52acd33f8b167"
last-modified:Tue, 02 Feb 2016 17:55:12 GMT
server:Apache/2.4.18 (Unix) OpenSSL/1.0.2e PHP/7.0.2
status:200
After doing that:
ExpiresActive On
# Set up caching on media files for 1 year (forever?)
<FilesMatch "\.(mp4|m4s)$">
ExpiresDefault "access plus 3600 seconds"
Header set Cache-Control "public"
Header set Content-Type "video/mp4"
Header set Vary "Host"
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
The headers are:
accept-ranges:bytes
access-control-allow-origin:*
cache-control:public
content-length:194431
content-type:video/mp4
But it doesnt save on the cache, I mean, when I reload the web or the video, it does not get it from the cache as it should.
You are not including any cache-control headers telling the browser to cache the resources. The spec is unclear how to handle this but most browsers choose not to cache unless explicitly told to.
You need to include Apache config like this (assuming you are already including the mod_expiries module):
ExpiresActive On
# Set up caching on media files for 1 week
<filesMatch ".([iI][cC][oO]|[gG][iI][fF]|[jJ][pP][gG]|[jJ][pP][eE][gG]|[pP][nN][gG]|[fF][lL][vV]|[pP][dD][fF]|[sS][wW][fF]|[mM][oO][vV]|[mM][pP]3|[wW][mM][vV]|[pP][pP][tT])$">
ExpiresDefault A604800
Header append Cache-Control "public"
</filesMatch>
# Set up caching on font files for 6 months
<filesMatch ".([eE][oO][tT]|[tT][tT][fF]|[sS][vV][gG]|[Ww][Oo][Ff][Ff]|[Ww][Oo][Ff][Ff]2)$">
ExpiresDefault 15552000
Header append Cache-Control "public"
</filesMatch>
Which will then produce a header like this:
cache-control:max-age=10800, public
I've written a blog post on this if you want more details: https://www.tunetheweb.com/performance/http-performance-headers/caching/
OK, I have solved the problem.
I was using an https connection and the certificate I was using didnt have the correct parameters (common name must be the name of the url programmed on the server) and the certificate of the server must be authenticate by some CA, so I have made CA certificates to authenticate the server certificates. This means that if you have an unsecure https connection, Chrome does not save files on cache.
After having all the certificates corrected, I have upload to google chrome the certificates to trust my web (configuration of google Chrome, advanced options, Manage https/ssl certificates). After that, I can save files on cache because of the certificates which makes the https connection secure (green lock on the chrome url bar).
That was my problem and this is how I solved it.
Thanks for your answers and your time!! ;)

Web Fonts CORS Error, but I set headers

I am trying to load web fonts from a CDN, but am getting a Cross Origin Request error. I have set the following headers in my httpd conf file:
Header Add Access-Control-Allow-Origin: my-cdn-domain
and
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
and I see the Access-Control header in the console, but the fonts still do not load.
Does anyone have any ideas?
It turns out that this had to do with us moving the site over to https. When we moved the site, we didn't update the origins in the cdn to be https also and that was causing the source to actually be our non-https server!
Header Add Access-Control-Allow-Origin: my-cdn-domain
Your CDN domain has to give permission to your HTML domain, not the other way around.

apache doesn't cache jpeg images

Im using ec2 and s3 with my website https://he.mypen.net. Changed my apache configurations to:
#Set caching on image files for 11 months
<filesMatch "\.(ico|gif|jpg|jpeg|png|css|js|woff|eot|TrueType|svg)$">
ExpiresActive On
ExpiresDefault "access plus 11 month"
Header set Cache-Control "max-age=17280000, public"
</filesMatch>
The cache works well for woff,css, js,png files, but doesnt work for my s3 jpegs
Any idea why?
The request for images on S3 is not passing through Apache. With this, any configuration you do to Apache to set cache headers wont do anything.
Instead, you can set metadata which also includes cache headers directly on objects within S3.
For more information on that, take a look here: http://docs.aws.amazon.com/AmazonS3/latest/dev/UsingMetadata.html

With Apache httpd, how do I configure no caching for a given UserAgent?

I have Apache HTTPD configured to add a cache header to requests for most static content:
ExpiresActive On
ExpiresDefault "access plus 1 year"
# Force JNLP and BSH files to expire immediately so updates are checked for
# and seen (We need this so we see changes in the dynamic content in both)
ExpiresByType application/x-java-jnlp-file "now"
ExpiresByType application/x-bsh "now"
How can I disable this caching for any request where the UserAgent contains the string JNLP? When the request comes from the User Agent JNLP (for example "User-Agent: JNLP/6.0 javaws/1.6.0_12 (b04) Java/1.6.0_12") I don't want any Cache-Control or other cache-related headers on the HTTP response.
I can find configuration examples for several things based on user agent, but I cannot figure out how to configure caching depending on the user agent.
Your ExpiresByType directive looks like a good idea... if that's not enough, then try using BrowserMatch:
BrowserMatch JNLP ua_is_jnlp
This sets the environment variable ua_is_jnlp to some value for any request whose user agent header contains the string JNLP (there is also a case-insensitive variant, BrowserMatchNoCase). Then you can clear any caching headers with
Header unset Cache-Control env=ua_in_jnlp
Header unset Expires env=ua_in_jnlp
although if you want to disable caching entirely, you'd be better off setting
Header set Cache-Control no-cache env=ua_in_jnlp
Header set Expires 0 env=ua_in_jnlp