How to Disable Copy Paste (Browser)

How to Disable Copy Paste (Browser)

You can't.

You can sort of try to block some vectors (like hacks to make right clicking more difficult, intercepting ctrl+c, making it difficult to select text)… But they will only sort of work, and it's impossible to block all vectors (edit -> copy? view source? wget? etc…).

If you are trying to protect your content from less technical users, these methods might be okay… But as the comments here suggest, they will frustrate more technical users.

If you have sensitive content that must be protected, you might want to consider embedding it in a Flash blob or a DRM'd PDF. These are still possible to reverse engineer, but it will take a slightly more intelligent attacker.

Disable copy and paste

In short, how to disable copy paste from browser extension?

I don't think this is possible from the page Javascript, because extensions run at a higher trust level than the webpage. They can do things that webpages cannot such as change the browser's own behavior.

In my opinion the best way to handle this is server-side. Give each post a spam score determined by relevant factors such as frequency of posts from the same user, duplicate content in posts, external links only, downvotes from other users... If a post exceeds a spam score limit, don't show it to other users. You could still show it to the poster herself if you want to make it harder for spammers to determine whether their spam is actually getting through.

Disabling copy-paste for all users seems heavy handed to me.

Prevent user from copying text on mobile browsers

Thanks for your amazing solutions. I tested all of them, and in short some of them worked only on a PC, some only on Chrome and Firefox and some only on Safari, but unfortunately none of them worked 100%.

Although @Max answer might be safest, I didn't tag with PHP in the question because if I use this solution dealing with answers, it will be hard because I don't have access to words on the client side!

So the ultimate solution I came with was combining all of the provided answers plus some new methods (like clearing the clipboard every second) into a jQuery plugin. Now it works on multiple elements too and worked 100% on PC browsers, Firefox, Chrome, and Safari.


What this plugin does

  1. Prevent pasting (optional)
  2. Clearing clipboard (looks like it doesn't work well)
  3. Absorbs all touch events
  4. Disable right click
  5. Disable user selections
  6. Disable pointer events
  7. Add a mask with a z-index inside any selected DOM
  8. Add a transparent div on any selected DOM

A jsFiddle:

(function($) {

$.fn.blockCopy = function(options) {

var settings = $.extend({
blockPasteClass : null
}, options);

if(settings.blockPasteClass){
$("." + settings.blockPasteClass ).bind('copy paste cut drag drop', function (e) {
e.preventDefault();
return false;
});
}

function style_appender(rule){
$('html > head').append($('<style>'+rule+'</style>'));
}

function html_appender(html){
$("body").append(html);
}

function clearClipboard() {
var $temp = $("#bypasser");
$temp.val("You can't cheat !").select();
document.execCommand("copy");
}

function add_absolute_div(id) {
html_appender("<div id='noClick"+id+"' onclick='return false;' oncontextmenu='return false;'> </div>");
}

function absorbEvent_(event) {
var e = event || window.event;
e.preventDefault && e.preventDefault();
e.stopPropagation && e.stopPropagation();
e.cancelBubble = true;
e.returnValue = false;
return false;
}

function preventLongPressMenu(node) {
node.ontouchstart = absorbEvent_;
node.ontouchmove = absorbEvent_;
node.ontouchend = absorbEvent_;
node.ontouchcancel = absorbEvent_;
}

function set_absolute_div(element,id){
var position = element.position();
var noclick = "#noClick" + id;

$(noclick).css({
height: (element.height()),
width: (element.width()),
position: 'absolute',
top: position.top,
left: position.left,
'z-index': 100
})
}

$("body").bind("contextmenu", function(e) {
e.preventDefault();
});

//Append needed rules to CSS
style_appender(
"* {-moz-user-select: none !important; -khtml-user-select: none !important; -webkit-user-select: none !important; -ms-user-select: none !important; user-select: none !important; }"+
".content {position: relative !important; }" +
".content .mask {position: absolute !important ; z-index: 1 !important; width: 100% !important; height: 100%!important;}" +
".content a {position: relative !important; z-index: 3 !important;}"+
".content, .content .mask{ pointer-events: none;}"
);

//Append an input to clear the clipboard
html_appender("<input id='bypasser' value='nothing' type='hidden'>");

//Clearing clipboard Intervali
setInterval(clearClipboard,1000);

var id = 1;

return this.each( function() {

//Preventing using touch events
preventLongPressMenu($(this));

//Add CSS preventer rules to selected DOM & append mask to class
$(this).addClass("content").append("<div class='mask'></div>");

//Append an absolute div to body
add_absolute_div(id);

//Set position of the div to selected DOM
set_absolute_div($(this),id);

id++;
});
}
}(jQuery));

Usage

$(document).ready(function(){

$(".words").blockCopy({
blockPasteClass : "noPasting"
});

});

HTML for demo:

<div class="words">Test1: Can you copy me or not?</div><br>
<div class="words">Test2: Can you <br> copy me or not?</div><br>
<textarea class="words">Test3: Can you <br>copy me or not?</textarea><br>

<textarea class="noPasting" placeholder="Test1: Paste content if you can" ></textarea><br>

<textarea class="noPasting" placeholder="Test2: Paste content if you can" ></textarea>

Let me know your opinions. Thanks.

Sources

  • Answers to this question

  • Copy text to clipboard

  • Add CSS rule using jQuery

Disable Copying on a website

Selecting text, copy, the right click can be disabled on a web page easily using jQuery. Below is the simple jQuery code snippet which can do this task easily:

<script type="text/javascript">
// Disable right click on web page
$("html").on("contextmenu",function(e){
return false;
});
// Disable cut, copy and paste on web page
$('html').bind('cut copy paste', function (e) {
e.preventDefault();
});
</script>

Source: Disable right click, copy, cut on web page using jQuery

how to disable copy for particular element in html

Use This CSS Style to disable Selection. By this The Text will not be selected. Thus can't be copied also.

#notcp {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}


Related Topics



Leave a reply



Submit