Nsfw JS

Released: December 28th, 2006
Author: Michi Kono

Download (version 1.0).

Nsfw JS protects your visitors by:

  1. Prompting them when they click on "dangerous" links.
  2. Doesn't load "naughty" images without a click.
  3. Profanity-filled sections of text are simply blacked out.

The best part about this script is that it works by scanning your page for you so there is hardly no additional coding to be done! All you have to do is add the following line at the bottom of the page:

<script>Nsfw.initialize();</script>

The most significant feature (gave me huge headaches) is that it DOES NOT OVERWRITE other onClick actions! This guarantees you can really, truly, drop this into any site without worries!

You can also download nsfw.gif, or use your own by declaring it.

<script>Nsfw.defaultImage = 'http://www.google.com/intl/en_ALL/images/logo.gif'</script>

Demo / Example

You can see it in action right here: Google is no longer safe for work! The source for this demo:

// rel="adult" works too
<a href="http://www.google.com/" rel="nsfw">Google is no longer safe for work</a>
<script>Nsfw.initialize();</script>

You can also have something like this: Neither is Yahoo.

<a href="http://www.yahoo.com/" rel="adult">Neither is Yahoo</a>
<script>Nsfw.initialize('Yahoo is known for pr0n. Make sure your boss isn\'t around before continuing.');</script>

To demonstrate how this script doesn't overwrite original functionality... Click on this innocent link and hit OK to see how the prior onClick was preserved.

<a onclick="alert('original action.');" rel="nsfw" href="#">innocent</a>
<script>Nsfw.initialize();</script>

It also does images and div (just the text inside) tags! Notice that classes and images must use "class" instead of "rel." Link tags (above) can use either.

The following image would be adult content

This is bad text!

<img class="adult" src="/resources/images/2006/gear.png" width="128" height="128" />
<div class="nsfw">This is bad text!</div>
<script>Nsfw.div();</script>
<script>Nsfw.img();</script>

Notice this example uses Nsfw.img(). Nsfw.initialize() is more work than necessary most of the time. Nsfw.img() only looks at the img tags on the page. There is also a Nsfw.a() method that looks for a tags only, and also a Nsfw.div() method for div and p tags. Nsfw.initialize() does all of them at once.

There are two hidden "easter eggs" in this script. All converted tags gain the class "adult-content". You can use this do your own higher order effects to blocked content, such as placing blood red borders around them or making the links black like the evil it is. The sky's the limit. The second egg is the promptText and promptImages properties in the class. Change these to false if you don't want dialog boxes confirming clicks on images or text blocks.

Nsfw.promptText = false;
Nsfw.promptImages = false; // before you initialize()

Lastly, for these examples I used Nsfw.initialize() a bunch, but in real life, you only need to call it once. I made it an explicit function call so that those of you doing AJAX can re-initialize portions that are dynamically loaded in. See the page source to see how calling initialize multiple times can work, and how it ignores stuff that is rendered after it (which is why you have to call it again).

Feedback

See the entry about this class. Leave me comments there.