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