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); |
バグ修正