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:
- All marked <a> tags prompt the visitor
- Marked <img> tags are replaced with a placeholder until they are clicked on.
- 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.