Annoying.js: How to be an asshole

Javascript, 23 May 2011, 2 minute read

In January I came across a website that had a whole slew of JavaScript that attempted to prevent you from selecting text, right clicking or dragging any content onto your desktop. I decided to copy the JavaScript and create a library with examples of JavaScript techniques you can use if you want to scare your visitors away, or want to piss them off. Annoying.js is the result.

Annoying.js #

	/**
	* Annoying.js - How to be an asshole to your users
	*
	* DO NOT EVER, EVER USE THIS.
	*
	* Copyright (c) 2011 Kilian Valkhof (kilianvalkhof.com)
	* Visit https://gist.github.com/767982 for more information and changelogs.
	* Visit http://kilianvalkhof.com/2011/javascript/annoying-js-how-to-be-an-asshole/ for the introduction and weblog
	* Check out https://gist.github.com/942745 if you want to annoy developer instead of visitors
	*
	* Licensed under the MIT license. http://www.opensource.org/licenses/mit-license.php
	*
	*/
	/jshint forin: false, immed: true, curly: true, eqeqeq: true, bitwise: true, noempty: true /
	(function(a) {
	/**
	* Resize the window to fullscreen (1024x768 always)
	*/
	a.fullScreen = function () {
	window.resizeTo(1024,768);
	};
	/**
	* Always keep the browser full screen
	*/
	a.keepFullScreen = function () {
	window.onresize = function() {
	window.resizeTo(1024, 768);
	};
	};
	/**
	* Disable right click so users can not copy!
	*/
	a.noRightClick = function () {
	document.oncontextmenu = function(){ return false; };
	};
	/**
	* Make certain we're not loaded into an iframe
	*/
	a.onTop = function () {
	if (parent.frames.length > 0) { top.location.replace(document.location); }
	};
	/**
	* Disable users dragging photos or text to they can't copy them
	*/
	a.noDrag = function () {
	document.ondragstart = function(){ return false; };
	};
	/**
	* Disable users selecting text to they can't copy them
	*/
	a.noSelect = function () {
	//no text selection, in IE
	document.onselectstart = function () {
	if (event.srcElement.type != "text" && event.srcElement.type != "textarea" && event.srcElement.type != "password") {
	return false;
	} else {
	return true;
	}
	};
	//no text selection, in Firefox
	document.onmousedown=function(e){
	var obj=e.target;
	if (obj.tagName.toUpperCase() == "INPUT" \|\| obj.tagName.toUpperCase() == "TEXTAREA" \|\| obj.tagName.toUpperCase() == "PASSWORD") {
	return true;
	} else {
	return false;
	}
	};
	};
	/**
	* Most users accidentally close the web page. Remind them of this.
	* @param {string} msg optional message. If empty, "Please come back!!1" is displayed.
	*/
	a.dontLeave = function (msg) {
	var message = msg \|\| "Please come back!!1";
	window.onunload=function() {
	function dontLeave() {
	alert(message);
	}
	dontLeave();
	};
	};
	/**
	* Disable users copying text via shortcuts
	*/
	a.noCopy = function () {
	window.onkeydown = function(e) {
	if ( e.ctrlKey ) {
	return false;
	}
	};
	};
	/**
	* Refresh the page every minute so it stays up to date
	*/
	a.keepUpToDate = function(){
	setTimeout(
	function(){window.location = window.location;},
	1000*60
	);
	};
	/**
	* suppress all error messages so we never have any
	*/
	a.neverAnyBugs = function () {
	window.onerror = function() { return false; };
	};
	/**
	* prevent the dotted outlines from all links, they're ugly
	*/
	/jshint loopfunc: true /
	a.preventOutlines = function () {
	for(var i in (a = document.getElementsByTagName('a'))) {
	a[i].onmousedown = function() {
	this.blur(); // most browsers
	this.hideFocus = true; // ie
	this.style.outline = 'none'; // mozilla
	};
	a[i].onmouseout = a[i].onmouseup = function() {
	this.blur(); // most browsers
	this.hideFocus = false; // ie
	this.style.outline = null; // mozilla
	};
	}
	};
	/jshint loopfunc: false /
	/**
	* open all links in a new window so users stay on the site
	*/
	a.stayOnSite = function () {
	for(var i in (a = document.getElementsByTagName('a')) ) {
	a[i].href = "javascript:window.open('" + a[i].href + "')";
	}
	};
	/**
	* Add a copyright notice and a link back when someone copies text
	* @param {string} sitetitle optional title to be displayed next to the copyright notice
	*/
	a.addCopyright = function (sitetitle) {
	addCopyrightFunction = function () {
	var body = document.getElementsByTagName('body')[0],
	selection = window.getSelection(),
	copyright = sitetitle \|\| "annoying.js",
	pagelink = "<br />Read more at: <a href='"+document.location.href+"'>"+document.location.href+"</a><br />Copyright ©" + copyright,
	newdiv = document.createElement('div');

	newdiv.style.position='absolute';
	newdiv.style.left='-99999px';
	body.appendChild(newdiv);
	newdiv.innerHTML = selection + pagelink;

	selection.selectAllChildren(newdiv);
	window.setTimeout(function() {
	body_element.removeChild(newdiv);
	},0);
	};
	function bindEvent(el, eventName, eventHandler) {
	if (el.addEventListener){
	el.addEventListener(eventName, eventHandler, false);
	} else if (el.attachEvent){
	el.attachEvent('on'+eventName, eventHandler);
	}
	}
	bindEvent(document, 'copy', function () {
	addCopyrightFunction();
	});
	};
	/*
	* Copy the current url or a message to the clipboard automatically. Only works in IE!
	*/
	a.copyToClipboard = function (msg) {
	var text = location.href \|\| msg;
	if (window.clipboardData && clipboardData.setData) {
	clipboardData.setData('text', s);
	}
	};
	/**
	* prevent the user from using the back button
	*/
	a.preventBack = function () {
	try {
	history.forward();
	setTimeout('preventBack()', 500);
	} catch (e) {}
	};
	/**
	* Execute all the annoying.js functions
	*/
	a.kitchensink = function () {
	this.fullScreen();
	this.keepFullScreen();
	this.noRightClick();
	this.onTop();
	this.noDrag();
	this.noSelect();
	this.dontLeave();
	this.noCopy();
	this.keepUpToDate();
	this.neverAnyBugs();
	this.preventOutlines();
	this.stayOnSite();
	this.addCopyright(); //useless with the noCopy(); function!
	this.copyToClipboard();
	this.preventBack();
	};
	}(Annoying));

view raw annoying.js hosted with ❤ by GitHub

The file itself is commented with “functionality”, so I won’t bother repeating it here. You can invoke different functions via the Annoying object: Annoying.noSelect(); will disable text selection, Annoying.noRightClick(); will disable the context menu, and Annoying.kitchensink(); Will turn all the functionality on. But you’re not going to use it anyway, right? ;)

JavaScript is evil! #

As you can see, you can do some pretty bad things with JavaScript that will certainly drive your visitors away (or insane!). So why is this kind of functionality available? Some functions is actually very useful if you’re writing complex “html5” web applications. By disabling text-selection on interface elements you can make the application easier to use, and you can re-implement the right click menu using your own options.

Breaking out of iframes is something I think more websites should implement, actually, if only to prevent the “OMG!!!! Look What this Kid did to his School after being Expelled! ” scams that all of my friends on Facebook keep falling for.

Using JavaScript to resize someone’s browser without consent should be reason enough to revoke someone’s license to making websites, though.

Let me know if you have any horrible additions!