Webサイト上にあるコンテンツのコピーを出来なくさせるプラグインを書いてみた。
Ajaxと併用するといい感じ。
ロジックは以下:
- 透過画像をbody全体に被せる(オプション:cover)
- oncopy を return false;
- Ctrl+AとCtrl+Cを無効にする
- B:前に戻る N:次に進む(オプション:move)
主な弱点と対策:
- メニューから選ぶ「すべて選択」「コピー」
→メニューやステータスバーを消した別窓に表示 - ファイルへの直アクセス
→アクセス制限、データベースの使用 - ソース表示
→この記事やこの記事のようにデータベースやデータファイルからXHRでコンテンツを得る
→jsファイルの難読化
いずれも開発者ツールには無力です。
Ajax中心でいろいろ考えてみたけど、やっぱり画像にしたりFlash使うのが最強なのかな。
HTML5環境であればCanvasを使用するのがいいかもしれない。
ヴァニラJavaScriptや他のライブラリでも同じことが可能。
要素を指定しない場合はbody全体が対象となる。
new CopyBlocker($("content"),{"spacer":"images/spacer.png"});
(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);
バグ修正