A New Library: NSFW JS — Protect Your Visitors at Work

I wrote a drop-in library in JavaScript that protects your visitors from accidentally viewing material not suitable at work.

It is based on an article about adding a new “NSFW” attribute:

I am now proposing a new attribute:

rel=”nsfw”

NSFW is an abbreviation often used to indicate that content is “not safe for work.”

Check out the demo and source code here. There are tons of examples on the page so I won’t post any sample code here. It could probably be a little more efficient, but I got lazy. But despite my “laziness,” the script does three major things:

  1. All marked <a> tags prompt the visitor
  2. Marked <img> tags are replaced with a placeholder until they are clicked on.
  3. Marked <div> and <p> tags masked so that all the text is the same color as the background until it is clicked on.

I went a step further and made it also check the CSS class name as well as use the text “adult” interchangeably with “nsfw”. Here is an example of #2 (the content is safe for work, despite the warning message):

For those of you still reading, the version I wrote took me longer than I hoped because I had one major goal in mind:

Dropping this script in should not break any site, ever.

Well, that’s difficult given the current state of the Internet: tons of links out there already have “onClick” actions. Any regular drop in script would overwrite those actions! So I had to make sure my version would work even in those situations. So, granted, it probably won’t work exactly as I’m hoping on some small percentage of sites out there (who knows), but for 99.999% of the cases, this should work.

I have appropriately called this script Nsfw JS and released it for free as usual.

Update: I plan on releasing an update to this library soon, so if you plan on adopting this now, make sure to check back later.

4 thoughts on “A New Library: NSFW JS — Protect Your Visitors at Work”

  2. I thought about implementing it using CSS to cover it up. That is why easter egg #1 (automatic class assignment) is in place. However, hiding div blocks wasn’t a solution I was pleased with since my goal was to never break any site. Large pieces of content dissapearing would present a problem. However, using visibility: hidden was exactly what I was going for with the coloring, so I will fix that.

    I’ll try to release another version over the weekend that will address the following:

    1. individual initialization of objects rather than blanket initialization for speedier rendering of pages with lots of content but only very few NSFW tags.
    2. Use visibility: hidden instead of re-coloring.
    3. Add more support tags (span).
    4. Create an auto-bind so that calling initialize is no longer required except when doing AJAX.

Comments are closed.