[MooTools] テキストや画像のコピー禁止処理

Webサイト上にあるコンテンツのコピーを出来なくさせるプラグインを書いてみた。
Ajaxと併用するといい感じ。

ロジックは以下:

  1. 透過画像をbody全体に被せる(オプション:cover)
  2. oncopy を return false;
  3. Ctrl+AとCtrl+Cを無効にする
  4. B:前に戻る N:次に進む(オプション:move)

主な弱点と対策:

  • メニューから選ぶ「すべて選択」「コピー」
    →メニューやステータスバーを消した別窓に表示
  • ファイルへの直アクセス
    →アクセス制限、データベースの使用
  • ソース表示
    この記事この記事のようにデータベースやデータファイルからXHRでコンテンツを得る
    →jsファイルの難読化

window.openで表示

普通に表示

いずれも開発者ツールには無力です。
Ajax中心でいろいろ考えてみたけど、やっぱり画像にしたりFlash使うのが最強なのかな。
HTML5環境であればCanvasを使用するのがいいかもしれない。

ヴァニラJavaScriptや他のライブラリでも同じことが可能。

要素を指定しない場合はbody全体が対象となる。

1
new CopyBlocker($("content"),{"spacer":"images/spacer.png"});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
(function($){
this.CopyBlocker = new Class({
    Implements: [Options,Events],
    options: {
        "spacer":"spacer.png",
        "move":false,
        "cover":false
    },
    initialize: function(area,options) {
        this.setOptions(options);
        this.parent = area || $(document.body);
        this.s = this.parent.getStyles("paddingTop","paddingBottom","paddingLeft","paddingRight");
        if(this.options.cover){
            this.wrapper = new Element("img",{"src":this.options.spacer,"id":"copyblocker","styles":{"position":"absolute","top":0,"left":0,"z-index":999,"width":this.parent.getSize().x,"height":this.parent.getSize().y}});
            this.wrapper.inject(this.parent,"top");
        }
        window.addEvents({
            'keydown':function(event){
                //A=65 C=67
                if(event.control == true && event.code == 65 || event.control == true && event.code == 67) return false;
                if(this.options.move){
                    switch(event.code){
                        case(66): history.back(); break;//B
                        case(78): history.go(1); break;//N
                    }
                }
            }.bind(this),
            "copy":function(){ return false;},
            "resize":function(){ if(this.options.cover) this.wrapper.setStyles({"width":this.parent.getSize().x,"height":this.parent.getSize().y}); }.bind(this)
            });
    }
});
})(document.id);

バグ修正

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.