Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to preserve SSL with HTML5 application cache

I have an existing site that works fine over http and https (SSL). The SSL certificate is valid and can be confirmed by inspecting in the browser.

I am starting to use a manifest file to enable the HTML5 application cache on my website. This is useful for making the page load faster, and eventually for offline capabilities. This is working great when using a regular http connection. The problems happens when accessing the site over https (SSL). When I do this, I can access my website's content just fine, and the URL says "https" however I see the following behavior:

Safari: It displays the lock icon, but when I click the lock icon to inspect the certificate, it says that the certificate is invalid.

Firefox: Does not display the colored address bar indicating encryption, and when inspecting the certificate, it says that there is no certificate.

Chrome and Opera: Correctly displays the secure nature of the URL, and when clicking the lock icon it displays the SSL certificate information. Yes!

I understand that using the application cache causes resources to be served locally from the browser, and as such there is no encryption happening, however customers don't necessarily know that there is an application cache happening in the background, and they are expecting to see a valid SSL certificate and indications that the connection is secure. Safari and Firefox appear to be doing this incorrectly, unless I am missing something. That is my question. Does anyone know how to get Safari and Firefox to display the SSL certificate for pages served from the application cache? Is there something special that you need to do, or is it a Safari and Firefox bug?

like image 293
Jake Avatar asked Jan 23 '12 23:01

Jake


People also ask

What is the difference between HTML5 application cache and regular HTML browser cache?

HTML5 provides application cache, which means that a web application is cached, and accessible without an internet connection. whereas HTML browsers use caching to store HTML web pages by storing a copy of visited pages and then using that copy to render when you re-visit that page.

What is the purpose of AppCache API in HTML5?

The Application Cache (or AppCache) allows a developer to specify which files the browser should cache and make available to offline users.

How do I use HTML cache?

To use cache-control in HTML, you use the meta tag, e.g. The value in the content field is defined as one of the four values below. HTTP 1.1. Allowed values = PUBLIC | PRIVATE | NO-CACHE | NO-STORE.


1 Answers

I believe someone has discussed this with me before. Please let me know if this helps.

Change all of your script and css references from http:// or https:// to //.

If you haven't any then it is moot, but if you do, please let me know if that has an effect.

I believe this may be related to not being able to verify the references from a cached page.

like image 56
DrM Avatar answered Oct 26 '22 19:10

DrM