29 September 2014

Disabling Text Selection / Right click on Websites is Stupid

So, I run into this every once in a while, and it is a minor thing that majorly irritates me: Websites who attempt to disable text selection or right-click.

First of all, this is utterly futile. HTML on a web page can't reasonably be protected from copying. The source of a web page can be viewed and manipulated (client side) at any time, even without right-click. Rather than just copying your text anyone can completely grab layout, style, script, etc. To illustrate this point to co-workers, I will go to a well-known website and change the main page by adding their name to it, for instance. It only shows up on their local browser until they reload the page, but it makes the point that HTML content is not readily securable and wasn't designed to be. If you want that control, use another format.

Second, there are valid use cases for highlighting text, as it has become a normal and expected thing in browsers. One such case is citation where you include the link, but the page's text is lengthy, and you want to block quote a passage to highlight it. There is also reporting a problem with the website. There are also accessibility/usability cases for text selection (e.g. text clipped in container). Personally, I sometimes highlight text subconsciously as I read, which is actually what led to this blog post when I found I could not do that.

Thirdly, I respect people's copyrighted / licensed work, but that respect ends with trying to hijack/disable basic functionality on my browser. Sorry, but find another way. Maybe inject a page link when someone copies text so they get a proper citation with no extra steps?

So, I made this post (where you can freely select the text if you like) to document the ways I have found to defeat this asinine infringement of browser functionality.

Javascript Selection disabling

The one I ran into most recently was a WordPress plugin called "Blog Protector". This style is very easy to disable. This should cover text selection on most browsers (not fully tested). On Chrome, the only line I needed to run was the first one.

Open a Javascript console (Chrome is Ctrl-Shift-J, IE is F12 then Console) and run this:

if(document.body.onselectstart) document.body.onselectstart = null;
if(document.body.style.MozUserSelect) document.body.style.MozUserSelect = null;
if(document.body.onmousedown) document.body.onmousedown = null;


I'll update this post if I run into more. This is mainly for my own reference, so I won't be taking requests, sorry.