Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

Self-contained data: URI kitchen

I couldn’t resist this. Hixie has released a new version of his data: URI kitchen, to celebrate the addition of data: URI support to the latest Opera beta. In the spirit of recursion, I present this reformulation of the data: URI kitchen that uses client side Javascript. What better way to deliver such a thing than as a data URI?

Self contained data: URI kitchen

Update (12th August 10:40am): I’ve changed the above to take in to account a bug report from Hixie in the comments.

This is Self-contained data: URI kitchen by Simon Willison, posted on 11th August 2003.

View blog reactions

Next: Don't use document.all

Previous: Code personalities

14 comments

  1. You need to %-escape the content part of the URI on the way out. Otherwise the result of "test", turned into base 64, contains two "=" characters, which aren't valid data:-URL characters IIRC.

    Ian Hickson - 11th August 2003 17:00 - #

  2. This is fun. Ian's script can also handle images (and probably also other stuff). I only have to fix the mime-type. Tested with IE6, but there it doesn't seem to work. Too bad, otherwise my whole site could be made in one page.

    Martijn - 11th August 2003 17:29 - #

  3. I was doing a bit of work with data: uri's earlier this week and have a question that I hope someone here can answer: what is the maximum practical size of a data uri? I know IE has a short URL limit, but what is the min(opera,gecko) size?

    Gary F - 11th August 2003 21:04 - #

  4. Martijn: My script can handle anything, in theory. :-) Let me know if you have any problems with it. (You do, as you say, have to give the right MIME type, of course.)

    IE (any version) doesn't support data:. Nor does Safari, as far as I know.

    GaryF: Opera's limit is 4KB. As far as I can tell, Mozilla's limit is 2GB, although I really wouldn't recommend testing that. ;-) In practice this means you can only really expect serious uses of data: to work with Gecko-based browsers, but you can use data: URLs for simple things (like stylesheets, small background images, or short pieces of text) without any trouble.

    Ian Hickson - 12th August 2003 09:33 - #

  5. Wow, the data: URI is really poowerfull.

    GaryF: IE's limit is also 4KB.

    P01 - 12th August 2003 23:42 - #

  6. In fact I was talking about the limit of a classical http: url. I assume it applies to the data: URI ... unless some obscure reasons are involved.

    P01 - 13th August 2003 00:40 - #

  7. There seems to be a problem with the base64 string generation. It's adding a '%3D' to the end. My brain's not in gear so I'm not sure why... Oh I'm running Mozilla 1.4 if that's any help.

    Simon Proctor - 13th August 2003 11:57 - #

  8. Ian: Thanks for the information on length. While 4kb isn't great, it's enough to do what I plan to do with it. Po1: AFAIK, IE doesn't support data:uri's at all. At least the last time I tried, it didn't understand.

    Gary F - 13th August 2003 15:53 - #

  9. GaryF: You're right, in my 2nd comment I meant "I assume it should applies to the data: URI". Sorry, I'm so amazed by the possibilites that I've been unclear.

    P01 - 13th August 2003 20:32 - #

  10. %3D is URI-encoding for "=" which is found at the end of base64 encoded data for padding. It's perfectly normal. Nothing to see here. Move along now.

    Ian Hickson - 14th August 2003 10:04 - #

  11. The thing the the %3D is that it means tha base64 encoded data URI's being created won't work correctly in Mozilla 1.4... Well at least they won't for me.

    But if you take if off then end of the string it works fine. Which is why I think there's a problem. But I'm rather busy with some other stuff at the moment so can't look into it too hard, thus I raised the issue.

    Simon Proctor - 14th August 2003 13:27 - #

  12. A bit more insteresting, it appears that the link works fine if the '=' at the end is an equals but the URI-encoding of it to %3D messes up the link. This would appear to be a a problem with the script. Or the way Mozilla deals with the URI.

    Simon Proctor - 14th August 2003 13:32 - #

  13. Nice script, but is there any way to use files from the filesystem, i.e. images?

    Joe H - 27th June 2005 18:49 - #

  14. I've created a page that is similar to the "data: URI kitchen" but will encode directly to an HTML img element or JavaScript source code ready to pasted into a nice greasemonkey script.

    data: URI image encoder

    -Mike

    Mike Scalora - 5th September 2005 22:49 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/08/11/selfContained

A django site