BugMeNot is a great little service for bypassing the registration process for websites that really shouldn’t require it (ahem, nytimes.com). The bookmarklet brings up BugMeNot for the current website you’re viewing, and gives you login/password pairs which you can then copy and paste.
But wouldn’t it be better if it automagically filled in the username and password for you? I thought so, so I wrote a few lines of code in the form of a bookmarklet and a JSONP web service to do this.
BugMeNot doesn’t provide an API so I had to do a little screen scraping with Hpricot. They also try to obfuscate the usernames and passwords by shifting the characters by some offset calculated from a “key” then Base64 encoding the string, and prepending 4 characters. Luckily their obfuscation was no match for a single line of Ruby:
def bmn_decode(input, offset) # decode base64, strip first 4 chars, convert chars to ints, substract offset, convert back ints back to chars input.unpack("m*")[0][4..-1].unpack("C*").map{|c| c – offset }.pack("C*") end
The bookmarklet makes the request via an injected <script> tag. When it’s callback gets called it finds the most likely input elements for the username and password and fills them in with the result.
The Rails app consists of a single action that makes a request to bugmenot.com for the specified site, extracts and decodes the usernames and passwords, and picks the one with the highest rating. It then returns the result as JSON wrapped in a function callback (i.e. JSONP)
I’m not going to post the location of the live JSONP web service since BugMeNot limits the number of requests you can make, but the code is available on GitHub.
One very nice thing about JavaScript is it’s support for first-class functions and closures. Crockford calls JavaScript “Lisp in C’s Clothing”. I’m no Lisper, but I enjoy I discovering new tricks or applications of functional programming in JavaScript.
I wanted to hook all the browser’s asynchronous JavaScript “entry points” : events, timers, asynchronous XMLHttpRequests, script tags, and “javascript:” URLs. This article deals with the first two, events and timers.
To do this, I figured I could somehow “wrap” all the callback functions passed to setTimeout(), setInterval(), and addEventListener(). By “wrapped” I mean another function that we specify calls the original function, rather than the original function getting called directly. This allows us do whatever we want right before and after calling the original function, including manipulating the arguments and return value, logging to the console, calling other functions, putting it in a try/catch, etc.
Here’s the implementation of “callbackWrap”, the function that does all the work:
To use it, you need function that takes another function as a parameter and returns a wrapped version of that function which does whatever you want it to. In this case it just prints out “whoooaaaaa:” followed by the “extra” parameter:
Finally, to actually use this, we call callbackWrap with the object that contains the function we want to wrap, the name of the function property, the index of the callback argument to the function (0 for setTimeout/setInterval, 1 for addEventListener), a wrapper “factory” function, and optionally an extra argument that’s made available (via the closure) to the wrapped function. The extra parameter can be used for any data you need to pass to the wrapper function, or it can be ignored.
Here’s how this would be used on setTimeout, setInterval, and addEventListener on window, Element.prototype and Document.prototype (so it applies to all Elements and Documents):
callbackWrap(window, "setTimeout", 0, logWrapper, "wrapped a window.setTimeout!"); callbackWrap(window, "setInterval", 0, logWrapper, "wrapped a window.setInterval!"); callbackWrap(window, "addEventListener", 1, logWrapper, "wrapped a window.addEventListener!"); callbackWrap(Element.prototype, "addEventListener", 1, logWrapper, "wrapped a Element.addEventListener!"); callbackWrap(Document.prototype, "addEventListener", 1, logWrapper, "wrapped a Document.addEventListener!");
The first thing callbackWrap does is save the original function (window.setTimeout, for this example) in a local variable, “original”, since we’ll need it later. We then replace the original with a new function. When this new function is called (the new window.setTimeout), we first call the “wrapperMaker” function (“logWrapper” in the example), passing it the callback function, which is the argument at the argumentIndex position, and the optional “extra” argument. That function returns a new function which replaces the original callback argument, before we then call the original function (saved in the local variable “original”) with the same arguments (except the callback is now wrapped).
So really this blog post should have been called “a function that wraps other functions such that all callback functions passed to it are wrapped by yet another function”. There’s two levels of wrapping going on: the original function is wrapped, such that it wraps every callback given to it. If you’re confused I don’t blame you.
Why would I want to do this, you ask? There are a couple scenarios I had in mind, and I’m sure you can think of others.
First, I wanted to catch all uncaught exceptions for a debugging tool I’m working on. Sure, you can assign an error handler to the “onerror” property of the window object, but this only gives you the error name, file name, and line number – I wanted the full exception object to be caught by a try/catch.
Here’s a wrapper that catches all uncaught exceptions and alerts them:
Second, in Cappuccino we mimic Cocoa’s concept of a “run loop”, but due to the way browsers work the implementation is a bit different. A consequence of this was that we couldn’t automatically call “[[CPRunLoop currentRunLoop] performSelectors];” at the end of each run loop, which is required for various pieces of Cappuccino. If you’ve ever come across a situation where you perform some action but the UI doesn’t update until you move the mouse, it’s probably because performSelectors isn’t being called. This isn’t common, since Cappuccino encapsulates events, XMLHttpRequests, and now timers with CPEvent, CPURLConnection, and CPTimer, respectively. These Cappuccino classes handle calling performSelectors for you. However, if you wanted to integrate with a third party library or use setTimeout, XMLHttpRequest, etc directly, currently you would need to call performSelectors manually. With this new trick we can call it automagically.
Here’s the wrapper that does exactly that (note the inline Objective-J call to “[[CPRunLoop currentRunLoop] performSelectors]”):
functionperformSelectorsWrapper(func, extra) { returnfunction() { var result = func.apply(this, arguments); return [[CPRunLoop currentRunLoop] performSelectors];
}
}
One minor feature I didn’t demonstrate was that callbackWrap returns the original function that it wrapped. If you need the original for any reason you can save it to some other variable.
callbackWrap could use a few improvements. Currently this breaks on cases where you pass a string instead of a function. A simple check for the argument type, and appropriate handling would solve this (either skipping the wrapping, or compiling the the string with a “new Function()” call). But using strings instead of functions is considered poor practice anyway.
John Resig posted today about a nifty new feature available in Firefox nightlies, browser paint events. He also posted an example script and bookmarklet called TrackPaint. He goes into greater depth in his post, so I won’t bother here.
I wanted something more “real-time” and closer to the Quartz Debug utility included with the Mac OS X developer tools (which essentially provides this feature for all of OS X), so I present my modified bookmarklet and code:
// modified from John Resig’s example: http://ejohn.org/apps/paint/track.js (function(){ var container;
Rather than recording each event and displaying them when you click, this version immediately disables the MozAfterPaint event listener (to avoid the recursion issue), shows the translucent red divs, waits 100 ms, removes the rectangles, and re-enables the MozAfterPaint event listener.
It will miss some events during the 100 ms flash, but overall it seems to work pretty well. You could modify it to re-enable the event listener between adding and removing the divs, but I’m not sure it’s worth the effort.
A few months ago I started working on a JavaScript to Objective-C bridge. We had already implemented Objective-C in JavaScript, so I figured “why not?”
Well, I never got very far, but thankfully Patrick Geiller apparently had the same idea and actually executed it: He announcedJSCocoa today. It looks like it’s a solid bridge, about up to par with PyObjC and RubyCocoa.
While the included GUI interface for trying out JSCocoa is nice, I prefer command line interfaces for my languages, so I ripped out the few lines of code from my original bridge and plugged in JSCocoa.
It’s very bare bones at the moment: it will either read one or more file names from the command line arguments, or if no arguments are supplied it will present a no-frills REPL. Obviously line-editing, etc would be one of the next steps, but for now it works nicely with rlwrap.
My friend Andrew recently posted a teaser for a new project he’s working on, but with part of the headline pixelated to obscure what the project actually is. My curiosity got the best of me and I decided to do what any self-respecting geek would do: write a program to figure out what the censored text said.
Ultimately I failed to recover most of the censored text (except “to”), so I had to cheat a little. The following video is the program running on a very similar image I created. This proves it works in ideal conditions, but needs some improvement to work in less than ideal cases.
(and no, as far as I know my friend’s project has nothing to do with eating monkeys)
Applying a filter like Photoshop’s “mosaic” filter obscures the original data, but doesn’t remove it entirely. If we can reconstruct an image with *known* text that looks very similar to original image, then we can be pretty sure the original text is the same as our known text. This is very similar in principle to brute-force cracking a password hash. For a more detailed explanation see this article.
Photoshop was an obvious choice since I needed to recreate the exact same fancy styling as the original image, then apply the exact same mosaic filter. I figured I would have to write a script that tells Photoshop to generate images, then use an external tool to actually compare them to the original.
It turns out that Photoshop CS3 has all the features necessary to pull the whole thing off without any other programs or tools. The most important feature is the JavaScript scripting environment built into Photoshop, which is far more powerful than the AppleScript environment (and a *much* nicer language, in my opinion).
CS3 added two other features that are critical to this task: Smart Filters, and Measurements. Smart Filters lets you edit a layer (namely the text with effects applied) *after* you apply a filter that would have previously require rasterization. This lets us apply the censoring filter to our styled text, and later change the text without having to manually reapply the filter. The “measurements” feature lets you record various statistics about an image or portion of an image: in our case we’ll want the “average gray value” of the “difference” between the original and generated images.
First we need to prepare the environment. Open the original image in Photoshop, and attempt to replicate the original un-censored text as closely as possible (you need *some* uncensored text as a reference). Place your text layer on top of the original and toggle between normal and “difference” blending modes to see how you close you are. Ideally everything will be black in “difference” mode. It’s very important to precisely match the font, size, spacing, color, effects like drop shadows or outlines, and even the background. If these are off even by a little bit it will throw things off. I ended up having to cheat because I couldn’t match the slick styling of the original text with my lame Photoshop design skills.
Once the text matches and is lined up perfectly, select the layer then choose “Convert for Smart Filters” from the “Filter” menu. Now select the censored portion of the text and apply the same filter used on the original image, again matching it as closely as possible. For the mosaic filter, you can line up the “grid” by adjusting the origin and size of the selection (yeah, it’s a pain).
Finally, make sure your layer is on top of the original, and the blending mode on your layer is set to “difference”. Double-click the Smart Object layer to open it’s source document, and adjust the variables listed at the top of the JavaScript to match the names and layers. Also, in the menu “Analysis”: “Select Data Points”: “Custom…” make sure only “Gray Value (Mean)” is checked.
Code
Rather than attempting to explain it in detail here, just read the code and comments. Here’s a quick summary:
Start with the first character. Try setting it to each of the possibilities (a through z, and a space), and record the difference score between the original image and generated image. Only look at the first half of the current character (since the second half will be influenced by the *next* character).
Sort the results. Lower scores are better (less different)
Now try each of the top 3 characters along with every possibility for the *next* character. This time record score for the whole width of the current character since we’re checking the next character as well.
Pick the best choice, either the best permutation out of all 81 combinations (3 best * 27 possible), or out of the 3 averages for each best.
Repeat for the next character until done.
// change these parameters based on document names and layer ordering baseDocName = "base.psd";
baseDocTextLayer = 0;
textDocName = "The easy way to do somethingss12.psb";
textDocTextLayer = 0;
knownString = "The easy way "; // the part of the string that’s already known missingLength = 20; // number of characters to figure out
// get the top left corner of the text layer in the main doc var mainBounds = baseDoc.artLayers[baseDocTextLayer].bounds,
mainX = mainBounds[0].as("px"),
mainY = mainBounds[1].as("px");
// possible characters include space and lowercase. var possibleCharacters = [" "]; for(var i = 0; i < 26; i++)
{
possibleCharacters.push(String.fromCharCode("a".charCodeAt(0) + i)); //possibleCharacters.push(String.fromCharCode("A".charCodeAt(0) + i)); // uncomment for uppercase letters }
var fudgeFactor = 3, // number of top choices to try guess = ""; // guessed letters so far
// get the beginning and potential end (width of a "M") of the next character var w1 = getStringBounds(knownString + guess),
w2 = getStringBounds(knownString + guess + "M");
// PASS 1: half the potential width, since we’re not looking at the next character yet
// half the width of "M" setSelection(mainX, mainY, (w1[2].as("px") + w2[2].as("px")) / 2, 15);//w2[3].as("px"));
// get the score for every letter for(var i = 0; i < possibleCharacters.length; i++)
{ var val = getStringScore(knownString + guess + possibleCharacters[i])
var res = { ch: possibleCharacters[i], v: val };
results.push(res);
}
// sort from best (lowest) to worst score results = results.sort(function(a,b) { return a.v – b.v; });
// method 1: too simple, poor results if(method == 1)
{
guess += results[0].ch;
} else
{ // PASS 2: full (potential) width of the current character, testing each of the few top matches and every possible next character
// full width of "M" setSelection(mainX, mainY, w2[2].as("px"), 15);//w2[3].as("px"));
// try the few best from the first pass for(var i = 0; i < fudgeFactor; i++)
{ var sum = 0; for(var j = 0; j < possibleCharacters.length; j++)
{ // get the score for the potential best PLUS each possible next character var val = getStringScore(knownString + guess + results[i].ch + possibleCharacters[j])
// if the results aren’t consistent let us know if(debug && results[0].ch != minSumChar || minChar != minSumChar) alert(minChar + "," + minSumChar + " (" +results[0].ch + "," + results[1].ch+ "," + results[2].ch+ ")");
if(method == 2)
{ // method 2: best of all permutations guess += minChar;
} else
{ // method 3: best average guess += minSumChar;
}
} WaitForRedraw();
}
}
// measure the gray value mean in the current selection functiongetMeasurement()
{ // delete existing measurements app.measurementLog.deleteMeasurements();
// record new measurement app.activeDocument = baseDoc;
app.activeDocument.recordMeasurements();//MeasurementSource.MEASURESELECTION, ["GrayValueMean"]);
// export measurements to a file var f = newFile ("/tmp/crack-tmp-file.txt");
app.measurementLog.exportMeasurements(f);//, MeasurementRange.ACTIVEMEASUREMENTS, ["GrayValueMean"]);
// open the file, read, and parse f.open(); var line = f.read(); var matches = line.match(/[0-9]+(\.[0-9]+)?/); if(matches)
{ var val = parseFloat(matches[0]); return val;
} return null;
}
// sets the value of the test string functionsetString(string)
{
app.activeDocument = textDoc;
app.activeDocument.artLayers[textDocTextLayer].textItem.contents = string;
WaitForRedraw();
}
// gets the difference between the original and test strings in the currently selected area functiongetStringScore(string)
{ setString(string);
// save document to propagate changes parent of smart object app.activeDocument = textDoc;
app.activeDocument.save();
// return the average gray value returngetMeasurement();
}
// get the bounds of the text functiongetStringBounds(string)
{
app.activeDocument = textDoc; // set the string of the text document setString(string); // select top left pixel. change this if it’s not empty app.activeDocument.selection.select([[0,0], [0,1], [1,1], [1,0]]); // select similar pixels (i.e. everything that’s not text) app.activeDocument.selection.similar(1, false); // invert selection to get just the text app.activeDocument.selection.invert(); // return the bounds of the resulting selection return app.activeDocument.selection.bounds;
}
// sets the base document’s selection to the given rectange functionsetSelection(x, y, w, h)
{
app.activeDocument = baseDoc;
app.activeDocument.selection.select([[x,y], [x,y+h], [x+w,y+h], [x+w,y]]);
}
// pauses for Photoshop to redraw. taken from reference docs. functionWaitForRedraw()
{ // return; // uncomment for slight speed boost var eventWait = charIDToTypeID("Wait") var enumRedrawComplete = charIDToTypeID("RdCm") var typeState = charIDToTypeID("Stte") var keyState = charIDToTypeID("Stte") var desc = newActionDescriptor()
desc.putEnumerated(keyState, typeState, enumRedrawComplete) executeAction(eventWait, desc, DialogModes.NO)
}
This problem is particularly tricky for proportional fonts, since if you get any character wrong and it’s width is different than the actual character, then all subsequent characters will be misaligned, causing more incorrect guesses, compounding the problem even more, and so on. I’m not sure how to deal with this, other than improving the overall matching quality. Ideally we would test every possible combination for the entire string, but that would require 27^n tests, where n is the number of unknown characters. This is obviously not feasible.
With the simplistic method of iterating over each position and trying each possible character, it turned out that almost every single “guess” was for the letters “m” or “w”. This was because for positions where the original was narrower characters, the “m” would “bleed” over into the *next* position, improving the score regardless of how well it actually matched the current character. To get around this, we only look at the difference for the first *half* of the character’s position.
Since looking at the first half of the character removes some valuable information, we then do a second pass using the top several guesses from the first pass, this time looking at the full width of the current character along with each of the possible next characters (27 tests + 3 runs times 27 tests results in 108 tests per character).
Further improvements could definitely be made, but I’ve already spent several hours too many on this.
The current algorithm runs at about 3 characters per minute. The overhead of Photoshop saving the Smart Object document on every individual test case is significant. If this were a special purpose program manipulating images directly it would likely be much faster. The tradeoff, of course, is you have all of Photoshop’s flexibility at your disposal for matching the original document’s font, size, style, spacing, and censoring effects, which is very important. For small amounts of text speed isn’t a problem.
Conclusion
While my original goal of recovering the censored text on my friend’s page was never achieved, the project was a success. It works well on my test image, and I learned about 3 obscure but cool and useful features of Photoshop!
Oh, and *that’s* why ██████████ uses black ink to ██████ their ██████!
I find it incredibly annoying when an embedded YouTube video can’t be made fullscreen, and I have to switch to YouTube.com just to watch it.
So, I wrote this simple little bookmarklet which modifies the embed code for any YouTube videos to allow fullscreen. It could also easily be made into a user script for GreaseMonkey, etc, to perform the modifications automatically.
Recently I’ve been doing a lot of work in Rhino, Mozilla’s JavaScript interpreter written in Java. While it’s a bit slower than some of the other JavaScript interpreters out there it has the advantage of being able to call Java libraries. This is immensely useful since JavaScript is pretty bare-bones in terms of built-in libraries.
Anyway, I had a simple logging system with the usual “error”, “warn”, “info”, etc levels, which was great except the important errors and warnings would get lost in the hundreds of info and debug messages. I didn’t know much about ANSI escape codes except that it allows for neat things like coloring text in your terminal, so I wrote a little code to help with this:
ANSIControlCode(code, parameters) takes in a control code as a string (a single alphabetic character, see above Wikipedia article), and zero or more parameters, either as a single string/number or array of strings/numbers (again, see above Wikipedia article). It returns a string with the control sequence.
There are also two helpers functions for setting text properties:
ANSITextApplyProperties(string, properties) wraps “string” in a pair of control sequences. First the sequence to set text properties (“m” along with the given parameters), second the reset text properties sequence (“m” with no parameters). It returns the wrapped string. This lets you easily apply a number of properties to a string.
ANSITextColorize(string, color) simply sets the foreground color of a string, and returns the wrapped string.
Here are examples of the helper functions:
Note that color control codes must be combined with either ANSI_FG or ANSI_BG.
Also note that this is completely useless in the browser. Only shells can understand these control codes, so use it in Rhino and other command line JavaScript interpreters (while this code is written in JavaScript, the same concepts be applied to any other programming language that can run in a shell: C, Python, Ruby, etc).
Now that iPhone 2.0 is out I started playing around with some of the new web features, and soon found that I had created the prototypical virtual light table that’s an essential demo for anynewmultitouchtechnology.
It’s about 100 lines of JavaScript. It grabs the 10 latest photos from Flickr’s “interesting photos” API and randomly places them on the screen for you to play with:
This is great if you have an iPhone with the 2.0 software, but desktop browsers should get some multitouch love too. So I started writing a little bridge that fakes multitouch events in desktop browsers. It’s far from complete, but it’s just good enough to get the virtual light table demo working.
So go ahead and load it up in the new iPhone MobileSafari or Safari 3.1+ / WebKit nightly (requires CSS transforms):
In desktop browsers it uses the previous clicked location as a second “touch”, so you can click a photo then click and drag another spot on the photo to resize and rotate (notice the yellow dot).
Clearly the reverse of this bridge would be even more useful, since iPhone only sends mouse events under specific conditions. The mousedown, mouseup, and mousemove events could be emulated using the touch equivalents to make certain web apps work on the iPhone without much additional work. Of course you would need to either cancel the default actions (i.e. panning and zooming) on touch events, or have some way to manage the interactions between them.
I released a new project yesterday, diff for JSON. It’s very simple, but useful. Simply paste two chunks of JSON you want to diff into the two fields, and click “Compare”:
