[MooTools] テキストや画像のコピー禁止処理

Webサイト上にあるコンテンツのコピーを出来なくさせるプラグインを書いてみた。
Ajaxと併用するといい感じ。

ロジックは以下:

  1. 透過画像をbody全体に被せる(オプション:cover)
  2. oncopy を return false;
  3. Ctrl+AとCtrl+Cを無効にする
  4. B:前に戻る N:次に進む(オプション:move)

主な弱点と対策:

  • メニューから選ぶ「すべて選択」「コピー」
    →メニューやステータスバーを消した別窓に表示
  • ファイルへの直アクセス
    →アクセス制限、データベースの使用
  • ソース表示
    この記事この記事のようにデータベースやデータファイルからXHRでコンテンツを得る
    →jsファイルの難読化

window.openで表示

普通に表示

いずれも開発者ツールには無力です。
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);

バグ修正

Leave a Comment.