Detecting copying with Javascript - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Detecting copying with Javascript

Adding copyright message to copied material

Solution1

3:19 pm on Jan 12, 2013 (gmt 0)

10+ Year Member

Top Contributors Of The Month

On the most popular part of one of my websites, I have since many years had an onCopy event on the body tag, which launches an alertbox with a copyright message, like this:

<body oncopy="alert('Copyright My Name 2013');">

This used to work only in Internet Explorer, but I noticed that it now also works in Firefox, Chrome, Opera and Safari. Good.

Since people still copy my material (articles with photos) without permission, I'm looking for ways to improve this.

I wonder whether there are others ways that people have to copy, than using copy and paste, that I can detect happening with Javascript. I vaguely remember having read that some blog systems allow for copying webpages in some sort of automated way. Is that so, and can it be detected with Javascript?

I'm thinking about automatically adding a copyright message to any piece of copied text. Any other ideas?

I'm already using Pinterest's meta tag, like this:

<meta name="pinterest" content="nopin">

Are there any other social media that have a similar meta tag or other code to prevent copying?

whoisgregg

5:35 pm on Jan 12, 2013 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

The important thing to remember with using JavaScript to keep users from doing something they want to do is that a determined user can simply disable JavaScript to remove those barriers.

Also, JavaScript is not even executed by automated scrapers -- which typically represent the majority of content theft for site owners.

I'm sure folks can recommend some technical approaches to use, but keep the above in mind when formulating your overall strategy.

Solution1

6:06 pm on Jan 12, 2013 (gmt 0)

10+ Year Member

Top Contributors Of The Month

I'm aware that users can disable javascript, and I know that about 0.5 % of legitimate users on my site actually have it disabled.

I actually don't want to completely block copying, as I want to allow users to copy something to quote, and put a link next to that quote. I just want to tell them that what they are copying is copyrighted, and that I do not permit republishing without permission.

I hope that I'm blocking at least some of the scrapers in my .htaccess.

whoisgregg

12:08 am on Jan 13, 2013 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Gotcha. :)

I would recommend taking a look at Tynt -- it might do what you want. If it's not what you want, it could serve as an example of the same sort of script you'll want to make for your purposes.

Solution1

9:26 am on Jan 13, 2013 (gmt 0)

10+ Year Member

Top Contributors Of The Month

Thanks for mentioning Tynt :-)
That indeed gave me some interesting ideas I could code myself. They seem to believe that the majority of copying goes through copy and paste, so for the time being I'll focus on just that.

Perhaps I could detect it when users copy an entire article to the clipboard, and in that case replace the copied text with the contents of the description meta tag, with a link to the page, and a copyright message.

If they're copying just a part of an article, I could add a link underneath the text.

And if they're copying just a few words, they're probably copying keywords that they'll put into a search box somewhere. No need to do anything to that.

Solution1

2:09 pm on Jan 13, 2013 (gmt 0)

10+ Year Member

Top Contributors Of The Month

I wrote this code (adapting from various sources on the web) to make what I described in my previous post (more or less). It should work fine in Internet Explorer 9 and higher, and latest versions of Firefox, Chrome, Opera, Safari for Windows.

The article is expected to be within ARTICLE tags.
The description meta tag should have the word "description" in lower case, or else the alternative message will show.


<style>
#copymsg {
display: none;
}
</style>
<body oncopy="mentionCopyright();">
<div id="copymsg">&copy; Example.com 2013</div>

<script type="text/javascript">
function mentionCopyright()
{
document.getElementById('copymsg').style.display='block';

// Prepare page link and copyright message, to append to copied content
var pageurl = document.location.href.match(/https?:\/\/(.+)/)[1];
var pagelink = "<br>Read more at: <a href='"+document.location.href+"'>"+pageurl+"</a><br>Copyright &copy; Example.com 2013";

if (window.getSelection)
{
// Get selected part of the article
var selection = window.getSelection();
var selectionContents = selection.getRangeAt(0).cloneContents();
var selectionSize = selection.toString().length;

// Check if contents of more than one HTML element is copied
var container = selection.getRangeAt(0).commonAncestorContainer;
if (container.nodeName == "ARTICLE")
{
// Helper DIV
var newdiv = document.createElement('div');
newdiv.style.position='absolute';
newdiv.style.left='-99999px';

var body_element = document.getElementsByTagName('body')[0];
body_element.appendChild(newdiv);

var newpar=document.createElement("p");
newpar.innerHTML = pagelink;

// Check whether more than just a quote is copied
if (selectionSize < 900)
newdiv.appendChild(selectionContents);
else {
// Replace copied part with contents of description meta tag
var desc;
var descs = document.getElementsByName('description')[0];
if (typeof descs !== 'undefined')
desc = descs.getAttribute('content');
else
desc = "Please copy no more than a quote from this article ('fair use' as to international copyright laws).";
var newcontent=document.createElement("p");
newcontent.innerHTML = desc;
newdiv.appendChild(newcontent);
}
newdiv.appendChild(newpar);

selection.selectAllChildren(newdiv);

window.setTimeout(function() {
body_element.removeChild(newdiv);
},0);
}
}
}
</script>