Black lives matter
Portrait Dr. Axel Rauschmayer
Dr. Axel Rauschmayer
Homepage | Twitter
Cover of book “JavaScript for impatient programmers”
Book, exercises, quizzes
(free to read online)
Cover of book “Deep JavaScript”
Book (50% free online)
Cover of book “Tackling TypeScript”
Book (first part free online)
Logo of newsletter “ news”
Newsletter (free)

JavaScript hack: send the current web page to another server

[2011-01-26] dev, javascript, clientjs
(Ad, please don’t block)

Marco Arment explains how InstaPaper works its magic. In case you don’t know: InstaPaper has a bookmarklet that, when clicked on, uploads the current web page to the InstaPaper server. Afterwards, the page can be downloaded by one of the InstaPaper apps for offline reading. Naively, you would expect the bookmarklet to send the URL of the current page to the InstaPaper server which would then crawl the contents of the page. But that would not work with sites where you need to log in. Thus, Arment implemented the following hack.

[...] instead of calling a simple GET request to save the page, since an entire page’s contents would quickly overrun any URL-length limits in the stack, it injects a FORM with a POST action and populates a hidden value with the page contents.

But form-data requests from browsers aren’t Gzip-compressed, so the resulting data is huge and needs to be sent over people’s (often slow, often mobile) upstream connections. So I found an open-source DEFLATE implementation in Javascript — really — and the bookmarklet compresses the page data right there in the browser before sending it.

The whole procedure is hideously complex, but works incredibly well.
 [Source: Daring Fireball]