Categories CSS JavaScript

Code chống copy, click chuột phải và ctrl + u, song kiếm hợp bích CSS và JavaScript

Ngăn thao tác quét bài viết là cách chống copy đơn giản nhưng khá hiệu quả. Tuy nó không chống lại được các đối tượng sao chép có chuyên môn về công nghệ thông tin, nhưng với các đối tượng copy thông thường thì rất hữu hiệu.

Trong bài viết này Kiến càng sẽ “song kiếm hợp bích” cả 2 biện pháp là sử dụng CSS kết hợp với JavaScript. Bạn chỉ cần đưa đoạn code sau vào trước thẻ đóng </head> của mẫu HTML trang web của bạn là thành công:

<style>
     body{
          -webkit-touch-callout: none;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          -o-user-select: none;
           user-select: none;
         }
</style>
        
<script>
     function killCopy(e){
           return false;
     }

     function reEnable(){
           return true;
     }

     document.onselectstart=new Function ("return false");

     if (window.sidebar){
           document.onmousedown=killCopy;
           document.onclick=reEnable;
     }
</script>

Nếu bạn muốn chống thêm cả thao tác chuột phải (hạn chế tình trạng sao chép ảnh và văn bản), thì đây là đoạn code… Vị trí thì vẫn thế, bạn cứ để nó trước thẻ đóng </head>:

<script type="text/JavaScript">
var message="NoRightClicking"; function defeatIE() {if (document.all) {(message);return false;}} function defeatNS(e) {if (document.layers||(document.getElementById&&!document.all)) { if (e.which==2||e.which==3) {(message);return false;}}} if (document.layers) {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=defeatNS;} else{document.onmouseup=defeatNS;document.oncontextmenu=defeatIE;} document.oncontextmenu=new Function("return false") 
</script>

Phần dưới đây tôi sẽ giải thích ý nghĩa những dòng code trong bài, nếu bạn không phải là dân công nghệ thông tin thì không cần đọc cho đỡ nhức đầu, đưa các đoạn code trên vào trước thẻ </head> là bạn chống hành vi copy được rồi…

Đoạn CSS:

<style>
body{
   -webkit-touch-callout: none;
   -webkit-user-select: none; 
   -moz-user-select: none;    
   -ms-user-select: none;     
   -o-user-select: none;
    user-select: none;
}
</style>

Ở trên là đoạn CSS3 chống copy, -webkit, -moz, -ms, -o là để tương thích với các trình duyệt khác nhau, vì là CSS3 nên nếu trình duyệt nào chưa hỗ trợ đầy đủ thì nó không hoạt động, nghĩa là đối tượng vẫn copy được! Do vậy ta mới cần thêm JavaScript – cái này thì hoạt động tốt trên hầu hết trình duyệt.

Tuy nhiên JavaScript lại có điểm yếu là đối tượng có thể chủ động tắt JavaScript của trình duyệt để copy… Và đó là lý do ta nên kết hợp cả hai, vì CSS thì đối tượng lại không thể tự tắt. Phối hợp cả 2 làm cho chúng bù lấp các điểm yếu của nhau.

PS: Đoạn code JavaScript có tham khảo từ trang này.


Chống thêm thao tác ctrl + u

Ở phần bình luận có bạn nói rằng còn thao tác ctrl + u để xem mã nguồn hiện vẫn không chống được, 5 năm sau tôi đã có câu trả lời :))

Nó đây bạn:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
document.onkeydown = function(e) {
        if (e.ctrlKey && 
            (e.keyCode === 67 || 
             e.keyCode === 86 || 
             e.keyCode === 85 || 
             e.keyCode === 117)) {
            return false;
        } else {
            return true;
        }
};
$(document).keypress("u",function(e) {
  if(e.ctrlKey)
  {
return false;
}
else
{
return true;
}
});
</script>

Đây là mã của anh bạn này.

P/S: đã biết đến thao tác ctrl + u thì khả năng cao là học công nghệ thông tin rồi. Mà đã biết thì tôi nói thiệt cũng không chống được hẳn. Nhưng mà thôi, đỡ được đâu thì đỡ vậy.

Demo tổng hợp kết quả bạn có thể xem ở link này nhé: https://static.kiencang.net/2020/js/chong-copy.html


Ưu và nhược điểm

Chống copy đồng nghĩa với việc bạn làm giảm tiện lợi cũng như chắc chắn gây ra nhiều tình huống khó chịu cho người dùng, ngay cả trong trường hợp họ không có ý định sao chép toàn bộ văn bản của bạn.

Ví dụ họ chỉ muốn copy một cụm từ nào đó trên trang để thực hiện việc tìm kiếm. Hay khi họ muốn chuột phải để mở link trong tab mới.

Nếu lý do chủ yếu của việc chống copy là tránh trang khác copy nội dung của bạn có thứ hạng tốt hơn thì dưới đây là cách để bạn khắc phục điều đó mà không phải dùng mã trên:

  • Sau khi đăng bài bạn vào công cụ quản trị web Google Search Console, đưa link vào để công cụ tìm kiếm lập chỉ mục hoặc ít nhất là biết thời điểm tồn tại của trang;
  • Trong bài viết bạn tích cực sử dụng các dấu ấn riêng, ví dụ như tên trang của bạn, các đường liên kết nội bộ, điều đó khiến cho việc copy để lại thông tin rất rõ liên quan đến trang;
  • Nếu trang bạn có nhiều ảnh giá trị, xem xét việc đóng logo lên ảnh. Đóng logo lên ảnh thì bạn nên thử nghiệm cho khéo, để nó vừa đủ khẳng định chủ quyền nhưng cũng đừng quá lố. Logo đóng thường là đóng cứng, do vậy bạn cũng cần cân nhắc chọn logo thật cẩn thận, tránh đổi logo rồi làm trang trông tạp nham. Cách khác là bạn lưu ảnh gốc, nếu có lỡ đổi logo thì chịu khó đóng lại ảnh gốc;

Nhìn chung, với các đối tượng copy không chuyên, việc được copy lại tốt cho thứ hạng của bạn, vì có thể tạo thêm backlink, ngoài ra là được quảng bá thương hiệu miễn phí.

Comments are closed.

Back to Top