use local files on web page

Question

I'm trying to use local images on a web page in FireFox. The problem is whatever I do, I see a security message and images won't load:

Security Error: Content at http://domain.com/ may not load or link to file:///E:/path/to/file/file.png.

I put the following content into user.js and copied that file in FireFox profile directory.

user_pref("capability.policy.policynames", "localfilelinks");
user_pref("capability.policy.localfilelinks.sites",  'http://domain.com');
user_pref("capability.policy.localfilelinks.checkloaduri.enabled", "allAccess");

What I want to do is add css file and use that for styling the page.

Edit: I wrote an extension which alters HTTP response and replace remote css files with local ones. But as I said , Firefox prevent local css files from loading.

Edit 2
Please do NOT remove firefox-addon tag from this question.

Answer 1

Don't do this - access to the file:// protocol has been locked down for a reason. If your goal is to replace images with local data then just don't use the file:// protocol, there are plenty of others available. You can use the data: protocol for example. This is the SO icon as a data: URL:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAABrUlEQVR42mNkwAOepOgxMTD9mwhk5gDxQSB2l5l15SeyGkYGAuBJMtAQ5n%2BrgcwgIF4ENCCeJAOghvADXbIHqNoEyK0BGtKK14DXU9lAThZiYPw%2FXTTr92uId3SVgKoPA8WkgNxIoCErsBrwdhoL57%2F%2FTGeATC0gfgVUMRlo%2B2zRjD8vn6RrmzH8ZT4E5IOU%2BgAN2YNhwMOJ%2FEy8bJ%2BVgGYnAQ3K%2Ff%2BfkQco%2FAYYDjP%2BfeHs%2FfNQyub%2FN44NQJe0ysy5VI83DF5M5pRkY%2FmVyfCfIRtomNB%2Fpv9v%2F%2F9infbnucgZ5l%2FMW8T7HvxDMWB9hT3nXwbmrH%2F%2FmO4Bubc4Wb%2Ff9W09%2BuNmjwQPP%2FvHNHaWXwX%2FGf7LsjD9k%2BFLZ3iKEQYbKmy1%2FjKwXIXx%2F%2F1nfPvvP%2FMVJsZ%2FRzlYfpwX4nj%2FT5zrNbtK8evlWGNhcYU3Px%2FDR%2Bf%2FDExGQK4pEKsCseJ%2FoDKgF0AGMvxjZLIP79xzCMWA3Jyc%2FyB68pQpGGEyuyJEhJXhtwYLELMx%2FNL9wcDRcfqLwjOYegwDYGxcAFkNbQxgIALgNIBUQBUDAFi2whGNUZ3eAAAAAElFTkSuQmCC

This URL is easily generated:

var url = "data:image/png;base64," + btoa(imageData);

Alternatively you could use resource:// URLs that can be mapped to directories on disk using nsIResProtocolHandler but that's more complicated. Keep in mind that all contents of the mapped directory become accessible to all websites. You should make sure that it doesn't contain any sensitive information.

Asker:* I added content of the link:

var ioService = Components.classes["@mozilla.org/network/io-service;1"]
                          .getService(Components.interfaces.nsIIOService);
var resProt = ioService.getProtocolHandler("resource")
                       .QueryInterface(Components.interfaces.nsIResProtocolHandler);

var aliasFile = Components.classes["@mozilla.org/file/local;1"]
                          .createInstance(Components.interfaces.nsILocalFile);
aliasFile.initWithPath("/some/absolute/path");

var aliasURI = ioService.newFileURI(aliasFile);
resProt.setSubstitution("myalias", aliasURI);

// assuming the code modules are in the alias folder itself

Answer 2

That is correct. Attempting to use images directly off of the user's filesystem is a security vulnerability. Newer browsers have implemented the FileReader API, which allows you to access the user's files in a safe way.

Here are a few examples:

http://www.html5rocks.com/en/tutorials/file/dndfiles/

http://html5demos.com/file-api

Answer 3

I doubt it's worth the effort, but you can use httpd.js as an XPCOM component.

Edit: I just realized that the Add-on SDK offers httpd.js