from http://appcachefacts.info/:
Over SSL, all resources in the manifest must respect the same-origin
policy.
The exception is Google Chrome, which doesn't follow the specification in this regard. Over SSL, Chrome will load resources from different origins so long as they are still served over SSL.
I would really like to load static assets like images,css and javascripts from a CDN close to the user and avoid serving them from my webserver just because i use HTTPS
Is there any way we can work arround those security limitations ?
my goal:
Main html loaded from : https://mydomain.com.
Assets loaded from : https://cdn.mydomain.com (subdomain but not same origin..)
Appcache file I use at the moment, but does not seem to work on safari and iOS iphone :
CACHE MANIFEST
CACHE:
https://cdn.mydomain.com/main.css
https://cdn.mydomain.com/main.zepto.js
NETWORK:
/
*
Unfortunately no, Sorry actually according to http://en.wikipedia.org/wiki/Same_origin_policy currently the only browser that allows for Cross-Domain caching is Chrome and that is only because they are willfully not adhering to the same origin policy. If you want to make your offline site exclusively for chrome users you can do dual servers, otherwise you'll have to stick with one until the different browsers come up with a new policy.
If you want to get tricky you could attempt something like running a jQuery to a html file on your asset server that loads the manifest there, but I doubt that will work during offline use.
Related
I am working on an HTML app for a client. The entire app front end is done with 1 HTML file, 1 Javascript file, 1 CSS file (plus jquery) and a few images. There are a few php scripts sitting on the server, which are called using AJAX, but only if an internet connection is available. If no connection is available, then the site will use locally cached data (using localStorage).
To make the site available offline, I'm declaring the cache manifest in my HTML. My HTML looks like this:
<!DOCTYPE html>
<html manifest="cache.manifest.php" language="en">
...
</html>
The cache.manifest.php's output look like this:
CACHE MANIFEST
#VersionHash: 80b9345e6c39efbbe8431e394b014b4f
CACHE:
/css/ebot.css
/favicon.ico
/images/appicon.png
/images/list-arrow.png
/images/list-checkmark.png
/images/woman.png
/index.html
/js/jquery-1.8.3.min.js
/js/ebot.ls.js
NETWORK:
/emaillog.php
/getdata.php
/uploadlog.php
So far so good. Now, I access the site from a browser with the internet connection available. I get a little notification asking whether to allow the site to store information for offline use - I allow it. When I check in settings, I see that the site stores 316K of data - about right.
Now I turn off internet connection and attempt to access http://www.mysite.com/index.html - and get an error message saying "Internet connection not available" (or something to that extent) and the page is not displayed. This is happening in 3 browsers I tested on my dev machine (firefox, safari and chrome) as well as on the client's ipad (the app is eventually for consumption on an ipad).
What am I missing here? What am I doing wrong?
There could be many reasons for this.
Take a look at this articles:
http://www.fuckyeahtml5.com/2011/06/debugging-html5s-offline-web-apps
http://appcachefacts.info/
http://diveintohtml5.info/offline.html
https://developer.mozilla.org/en/docs/HTML/Using_the_application_cache
I guess that you didn't specify proper content type (MIME) for your manifest. It shoud be 'text/cache-manifest'.
Check events in console in Chrome. You should see something like this when appcache manifest is correct:
Creating Application Cache with manifest http://example.com/manifest.appcache
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (YYY of XXX)
Application Cache Cached event
I would suggest to start from the simplest manifest to make sure that manifest is parsed. Try:
CACHE MANIFEST
NETWORK:
*
such manifest should cache only your start html page.
We have a number of websites which use the same codebase to run different sites depending on the domain name used, and we're looking to use the HTML5 Application Cache to improve the performance of these sites to cache things like web fonts and other large, rarely-updated files.
Currently, we're hard-coding fully qualified URLs, using HTTPS, just in case one of the websites is using SSL. Our 'static' website server can handle both HTTP and HTTPS, so instead of doing this:
CACHE MANIFEST
# Cache Version 3198.729
https://static.ourdomain.co.uk/fonts/webfont1.eot
https://static.ourdomain.co.uk/fonts/webfont1.ttf
https://static.ourdomain.co.uk/fonts/webfont1.woff
We'd like to be able to do this:
CACHE MANIFEST
# Cache Version 3198.729
//static.ourdomain.co.uk/fonts/webfont1.eot
//static.ourdomain.co.uk/fonts/webfont1.ttf
//static.ourdomain.co.uk/fonts/webfont1.woff
Are we likely to run into any issues by doing this?
//static.ourdomain.co.uk/fonts/webfont1.eot is just a relative URL. It is just as permissible as /fonts/webfont1.eot, wherever relative URLs are acceptable.
I have a special kiosk-solution with chrome where I need chrome to upon application start, load the start-url from cache, not try to fetch it online.
The reason is that this is, like I said, a kiosk-mode presentation, is is a screen standing in the public that reboots every night, and if the reboot happens while the ISP has downtime on the internet connection, chrome will only show an error page.
If I can get it to load the cached version of the page though, instead of trying to fetch it online, then the last valid version of the page will show, and through some nifty ajax-workings of mine ;) it will automatically update after a while. If THAT update fails, the currently displayed version of the page will remain until a subsequent update succeeds.
See my problem?
In a browser like firefox I could do it by starting the browser in off-line mode and after page load switch it to online-mode. Only FF doesn't work for me in the particulat project, and Chrome doesn't seem to have an off-line mode?
You could use HTML5 Offline Web Applications to accomplish that. It's probably very easy to set up in your case, just add a file like the following to your app's directory:
CACHE MANIFEST
index.html
help.html
style/default.css
images/logo.png
images/backgound.png
NETWORK:
server.cgi
This manifest should contain all the files you'll need to display some useful information and later grab current content via AJAX. There's also a NETWORK section, where you have to specify things that should not be cached (ie the script that delivers your Updates via AJAX).
You can load the manifest file by adding a manifest attribute to your tag (cache-manifest is the name of the file above):
<html manifest="cache-manifest">
Make sure your server delivers the cache manifest with a MIME-type of
text/cache-manifest MIME
Type or copy-paste the below flag setting into the chrome address bar.
chrome://flags/#enable-offline-mode
scroll down to enable offline stale mode.
Restart your browser.
If an offline version of the page is available in the system cache it will load up when you are not connected.
I'm trying to get HTML5 offline storage working in a basic way. I read the information on DiveIntoHTML5 and it seems to make sense, but it just doesn't seem to be working for me. I wondered if someone could help me to debug this.
Basically I've set up a home page for the application, index.htm. So my application is on the web at http://www.mydomain.com/online/index.htm. Users will visit this page, where they'll ordinaraily do all of their stuff day-to-day. Visiting this URL will create a bunch of cached files so they can then visit http://www.mydomain.com/offline and view a working version of the application when they're offline.
The top few lines of code in the online homepage are:
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
...etc
I've generated a plain text file called 'cache.txt' and added the following content to it in Notepad:
CACHE MANIFEST
http://www.mydomain.com/offline/scripts/jquery-1.6.3.min.js
http://www.mydomain.com/offline/scripts/jquery-ui-1.8.16.custom.min.js
http://www.mydomain.com/offline/scripts/modernizr.min.js
http://www.mydomain.com/offline/scripts/json2.min.js
http://www.mydomain.com/offline/scripts/jquery.deserialize.js
http://www.mydomain.com/offline/scripts/jquery.cookie.js
http://www.mydomain.com/offline/scripts/main.js
http://www.mydomain.com/offline/css/main.css
http://www.mydomain.com/offline/css/structure-details.css
http://www.mydomain.com/offline/css/ui-lightness/jquery-ui-1.8.16.custom.css
http://www.mydomain.com/img/header.gif
http://www.mydomain.com/offline/img/bg.png
http://www.mydomain.com/offline/img/header_riser.gif
http://www.mydomain.com/offline/img/logo.png
http://www.mydomain.com/offline/img/offline.png
http://www.mydomain.com/offline/index.htm
I've then renamed this file to 'cache.manifest' and uploaded it to the root of the online application (at the same level as my home-page) so that it's accessible at http://www.mydomain.com/online/cache.manifest.
The hosting company have supposedly added the content type of 'text/cache-manifest' to all files with the extension of .manifest in IIS. I think this is working because when I view the file in Firefox at http://www.mydomain.com/online/cache.manifest Firebug tells me the content type is:
Content-Type cache-manifest
Or should this be returning 'text/cache-manifest'? Perhaps this is the problem?
When I view the offline storage folder on my system (C:\Users\Me\AppData\Local\Mozilla\Firefox\Profiles\b12u6xza.default there's nothing in there related to this domain at all.
Can anyone suggest what might be going wrong - as I'm a little stumped?
First of all, the specification have changed, you should now use .appcache as manifest extension.
Second, the mime type should be defined as you say text/cache-manifest. I'm not really related to IIS but seems like there's two ways to add this MIME type , either trough IIS administration UI or via web.config file
Also, I would recommend you testing this with Google Chrome, since its console show all the manifest parsing data and errors, including when the manifest MIME type is not being correctly recognized.
There are some issues you have to be care about:
Chrome (And I guess that all the browsers at last) only handles the cache file over secure requests. If your request is not secure, your cache won't be executed.
Mobile browsers (At least, the devices I could test), doesn't care about secure or unsecure requests. But I'd prefer to be ready for the politics change.
I was breaking my head trying to understand why in Android my file worked fine and in iOS it was failing, and the reason was that I was running my browser in incognito mode. iOS in incognito mode can't cache the page, and you get error.
If I find more issues, I'll write it down.
Regards.
I spend a lot of time on this (on my own problem), offline cache was not working. Did everything possible I could do, changed cache file name, added handler via htaccess, uploaded the file from local to live server, still the same problem. Finally got some help from this question myself.
I tested it in safari and it was working fine. The problem was Chrome browser. I also tried https as another user suggested, that also did not fix the problem. So may be there is an extension in chrome that is forbidding it from using the cache file. Before troubleshooting your problem first test it in standard browsers Safari, FireFox, IE, Opera. Do not test in non-standard browsers such as Brave, it did not work in it.
Officially from google
Which confirms deprecation in Ver 61 and onward. I am running 80.
Chrome support for applicationcache and manifest for offline html5 application.
Application Cache / Offline Application / Manifest Cache.
Aware that applicationcache has been deprecated, but whilst
replacement (service workers) not ratified have yet to replace in
legacy systems we have.
However, recent browser update seems to have disabled offline
functionality on HTTPS site. Our manifest files are now ignored and
chrome dinosaur displayed instead.
On checking back through browsers seems this is common from Chrome 61
and newer however it only seems to have manifested recently.
Chrome issue? or combination of Chrome and underlying OS? We have
android/windows both showing same problem from 61 onwards.
Note : HTML5 Cache is being deprecated
All browsers are going to drop this feature, I noticed they are not working in any of the latest browsers. This MDN Mozilla strongly advises against it and not to use it.
try to add these lines in httpd.conf ..this might help you
AddType text/cache-manifest .manifest
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/cache-manifest "access plus 0 seconds"
</IfModule>
You'd better test using chrome's console !(you can't see these in chrome's network)
My example(visit:www.mustrank.com/views/1.php ).
Look at chrome's console output below,manifest file "website.appcache" is created first,and then sources "1.html" and "main.css" are downloaded
[Creating Application Cache with manifest
www.mustrank.com/views/website.appcache 1.php:1
Application Cache Checking event 1.php:1
Application Cache Downloading event 1.php:1
Application Cache Progress event (0 of 2)
www.mustrank.com/views/1.html 1.php:1
Application Cache Progress event (1 of 2)
www.mustrank.com/css/main.css 1.php:1
Application Cache Progress event (2 of 2) 1.php:1
Application Cache Cached event ]
On an intranet site, let's say I want to link to a file on a share using UNC, at:
\\servername\foldername\filename.rtf
It seems the correct way to do this is with markup like this:
filename.rtf
That's five slashes - two for the protocol, one to indicate the root of the file system, then two more to indicate the start of the server name.
This works fine in IE7, but in Firefox 3.6 it will only work if the html is from a local file. I can't get it to work when the file comes from a web server. The link is "dead" - clicking on it does nothing.
Is there a workaround for this in Firefox? Those two browsers should be all I need to worry about for now.
Since this is obviously a feature of Firefox, not a bug, can someone explain what the benefit is to preventing this type of link?
This question has been asked at least twice before, but I was unable to find those posts before posting my own (sorry):
Open a direct file on the hard drive from firefox (file:///)
Firefox Links to local or network pages do not work
Here is a summary of answers from all three posts:
Use WebDAV — this is the best solution for me, although much more involved than I had anticipated.
Use http:// instead of file:///// — this will serve up a copy of the document that the user cannot edit and save.
Edit user.js on the client as described here — this worked for me in Firefox 3.6.15, but without access to client machines, it's not a solution.
In Firefox, use about:config, change the Security.fileuri.strict_origin_policy setting to false — this doesn't work for me in 3.6.15. Other users on [SO] have also reported that it doesn't work.
Use the locallinks Firefox extension — this sets the Security.fileuri.strict_origin_policy to true for you, and appears to have no other effect.
Read the file server-side and send it as the response — this presents the same problem as simply configuring your web server to use http://.
Browsers like Firefox refuse to open the file:// link when the parent HTML page itself is served using a different protocol like http://.
Your best bet is to configure your webserver to provide the network mapped file as a web resource so that it can be accessed by http:// from the same server instead of by file://.
Since it's unclear which webserver you're using, I can't go in detail as to how to achieve this.
In Firefox to Open File:\\\\\yourFileServer\docs\doc.txt for example you need to turn on some options in Firefox configuration:
user_pref("capability.policy.policynames", "localfilelinks");
user_pref("capability.policy.localfilelinks.sites", "http://yourServer1.companyname.com http://yourServer2.companyname.com");
user_pref("capability.policy.localfilelinks.checkloaduri.enabled", "allAccess");
As it turns out, I was unaware that Firefox had this limitation/feature. I can sympathize with the feature, as it prevents a user from unwittingly accessing the local file system. Fortunately, there are useful alternatives that can provide a similar user experience while sticking to the HTTP protocol.
One alternative to accessing content via UNC paths is to publish your content using the WebDAV protocol. Some content managements systems, such as MS SharePoint, use WebDAV to provide access to documents and pages. As far as the end-user experience is concerned, it looks and feels just like accessing network files with a UNC path; however, all file interactions are performed over HTTP.
It might require a modest change in your file access philosophy, so I suggest you read about the WebDAV protocol, configuration, and permission management as it relates to your specific server technology.
Here are a few links that may be helpful if you are interested in learning more about configuring and using WebDAV on a few leading HTTP servers:
Apache Module mod_dav
IIS 7.0 WebDAV Extension
Configuring WebDAV Server in IIS 7, 6, 5
Add your own policy, open configuration "about:config" in the location bar and add three new entries:
capability.policy.policynames MyPolicy
capability.policy.MyPolicy.sites http://localhost
capability.policy.MyPolicy.checkloaduri.enabled allAccess
Replace http://localhost with your website.
Works with Firefox 70.0.
I don't know if this will work, but give it a shot! Old article, but potentially still useful.
http://www.techlifeweb.com/firefox/2006/07/how-to-open-file-links-in-firefox-15.html