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