Webサイト上にあるコンテンツのコピーを出来なくさせるプラグインを書いてみた。
Ajaxと併用するといい感じ。
ロジックは以下:
- 透過画像をbody全体に被せる(オプション:cover)
- oncopy を return false;
- Ctrl+AとCtrl+Cを無効にする
- B:前に戻る N:次に進む(オプション:move)
主な弱点と対策:
- メニューから選ぶ「すべて選択」「コピー」
→メニューやステータスバーを消した別窓に表示 - ファイルへの直アクセス
→アクセス制限、データベースの使用 - ソース表示
→この記事やこの記事のようにデータベースやデータファイルからXHRでコンテンツを得る
→jsファイルの難読化
いずれも開発者ツールには無力です。
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); |
バグ修正