Foren

CSS and js caching using HTTPS

thumbnail
Tobias Gindler, geändert vor 15 Jahren.

CSS and js caching using HTTPS

Junior Member Beiträge: 71 Beitrittsdatum: 23.03.07 Neueste Beiträge
Hello,

we are using the liferay-portlet.xml file to bind all css and js files needed by our portlets.
Using HTTP everything works fine and all files were loaded once and were put into the browser cache.

Using HTTPS we encountered the following problem. Liferay adds a query string at the link definition for the css and js files.

for example: <link href="/some_css.css?t=1225902255437" rel="stylesheet" type="text/css" />

Under HTTPS almost every browser denies to cache "dynamic" contents (especially contents with a query string)
That leads to some cruel reloading extra times caused by the reloading of all bound css and js files at every render request.

Is there a way to deactivate the timestamp attachment for the css and js files or to enable the caching for those files?

Thank you very much

Tobias
thumbnail
Frederik Weishäupl, geändert vor 15 Jahren.

RE: CSS and js caching using HTTPS

Junior Member Beiträge: 46 Beitrittsdatum: 08.01.06 Neueste Beiträge
Hi Tobias,

I've got the same problem here... this non-caching of the javascript files with HTTPS is definitely a performance killer.

Did you already find a solution for this issue?
thumbnail
Rob Sonke, geändert vor 15 Jahren.

RE: CSS and js caching using HTTPS

Expert Beiträge: 275 Beitrittsdatum: 26.08.07 Neueste Beiträge
I found this discussion:

http://stackoverflow.com/questions/174348/will-web-browsers-cache-content-over-https

Seems that IE is acting like you specify in the headers and that it's fixed in firefox 3.
thumbnail
Tobias Gindler, geändert vor 15 Jahren.

RE: CSS and js caching using HTTPS

Junior Member Beiträge: 71 Beitrittsdatum: 23.03.07 Neueste Beiträge
Hello Frederik,

I've checked the servers http response headers via a proxy tool.
By default, no caching headers will be set for custom css and js files that are included via the liferay-portlet.xml

I have created a simple filter class, that sets the http headers for caching the custom css and js files.

This solution will not work with Firefox < 3, but i hope that it will work with the other browsers.

Best regards

Tobias
thumbnail
Tobias Gindler, geändert vor 15 Jahren.

RE: CSS and js caching using HTTPS

Junior Member Beiträge: 71 Beitrittsdatum: 23.03.07 Neueste Beiträge
Hello,

Firefox < 3 will cache ssl request if you change a config parameter.
Therefore you have to enter the url about:config and you have to toggle the 'browser.cache.disk_cache_ssl' to true.

Afterwards the caching seems to be done as it is specified at the server response http headers.

Best regards

Tobias
thumbnail
Frederik Weishäupl, geändert vor 15 Jahren.

RE: CSS and js caching using HTTPS

Junior Member Beiträge: 46 Beitrittsdatum: 08.01.06 Neueste Beiträge
Hi Tobias,

thanks for your hints.

I have created a simple filter class, that sets the http headers for caching the custom css and js files.


Would it be possible to attach your filter class to this forum thread? That would be great

Regards,

Frederik
thumbnail
Tobias Gindler, geändert vor 15 Jahren.

RE: CSS and js caching using HTTPS

Junior Member Beiträge: 71 Beitrittsdatum: 23.03.07 Neueste Beiträge
Hi Frederik

Here is the sourcecode of the filter

package somepackage;

import java.io.*; 
import javax.servlet.*;
import javax.servlet.http.*;

public class CachingFilter implements Filter
{
	 
	 public void init(FilterConfig config) throws ServletException{}
	 public void destroy(){}
	 
	 public void doFilter(ServletRequest request, ServletResponse response, FilterChain next)
	 throws IOException, ServletException
	 {
		  try {
		  
			  HttpServletResponse vResponse = (HttpServletResponse) response;			  
			  vResponse.setHeader("Cache-Control", "max-age=172801, public");	
			  
		  } catch (ClassCastException e) {
			 
		  }
		  next.doFilter(request, response);
	 }
	
	 
}


You have to add the following to your web.xml to apply the filter:
<filter>
    <filter-name>cachingFilter</filter-name>
    <filter-class>somepackage.CachingFilter</filter-class>
</filter>

<filter-mapping>
    <filter-name>cachingFilter</filter-name>
    <url-pattern>/css/*</url-pattern>
</filter-mapping>
<filter-mapping>
    <filter-name>cachingFilter</filter-name>
    <url-pattern>/js/*</url-pattern>
</filter-mapping>


Hope that will help you.

Best regards

Tobias
thumbnail
Frederik Weishäupl, geändert vor 15 Jahren.

RE: CSS and js caching using HTTPS

Junior Member Beiträge: 46 Beitrittsdatum: 08.01.06 Neueste Beiträge
Great :-) Thx a lot!