WEBサイトのテキスト・画像のコピー・キャプチャ防止策まとめ
WEBサイトのテキストや画像の無断使用などを防ぎたい時に、⌘+Cや画像のドラッグ操作ができないようにする方法。
Index
テキストコピー防止
コピー無効化
- bodyタグに「onCopy=”return false;”」を記述
<body onCopy="return false;">サイト全体をコピーさせたくない。</body>これをするとテキストを選択して「右クリック+コピー」または「⌘+C」などをしてもコピーした内容がペーストできない。
特定のタグ内の文字をコピー禁止したい場合は、対象となるタグに「onCopy=”return false;”」を記述。
<h2 onCopy="return false;">特定のコンテンツをコピーさせたくない。</h2>2. CSSのuser-selectを使用する (追記)
<div style="-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">コピーさせたくないコンテンツを記述 </div>
3. Javascriptでのコピー無効化 (追記)
document.body.oncopy = function(event) {
event.preventDefault();
}コピー操作をした時にアラートを表示する場合
「onCopy」に「alert(‘アラートに出るメッセージ’);」を追加します。
<div onCopy="alert('ここだけコピーしちゃだめ。'); return false;">コピーさせたくないコンテンツ。</div>右クリックの操作を禁止
右クリックした時にアラートを出す方法。
<body onContextmenu="return false;">右クリックしちゃだめ。</body>IE向けテキスト選択無効
<body onMouseDown="return false;" onSelectStart="return false">画像のダンロード、コピー防止
画像をドラッグ&ドロップさせない
JSで実装する場合
<script>
/*<![CDATA[*/
document.ondragstart = function(){return false;};
/*]]>*/
</script>CSSで実装する場合その１
img {
pointer-events: none;
}解説 : pointer-events
pointer-events – CSS: カスケーディングスタイルシート | MDN
CSSで実装する場合その２(SCSS)
.protect{
position:relative;
disply:block;
&:before{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
background:url('画像のURL/mask.png');
z-index:1;
}
}html
<div class="protect"><img src="画像のURL" alt=""></div>背景画像に指定してるmask.pngは1x1pxの透過のpng画像にする。
そうすることでimgタグで指定している画像の上に透過の画像が敷き詰められてドラッグやコピーができない仕組み。
スマホでの長押し操作無効
CSS
.protect{
pointer-events:none;
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-touch-callout:none;
-moz-user-select:none;
touch-callout:none;
user-select:none;
}html
<div class="protect"><img src="画像のURL" alt=""></div>
IE向けイメージツールバーの無効化
htmlのhead内に下記を追加。
<meta http-equiv="imagetoolbar" content="no" />スクリーンショット(画面キャプチャ)防止
手軽にできるスクリーンショット(スクショ)の防止対策はほぼない。
WindowsのPrintscreen禁止はあるみたいだけど検証してないので、参考urlだけのせとく。
Macに関してはスクショする際に必要なボタン(⌘ + Shift + 3 or 4 or 5)のいずれかを押すとjsで制御する方法を試したけど⌘(コマンド)が起点となってるので他のショートカットが使えずかなり不便。しかもfirefoxでは撮れてしまって無意味っていう結論。。。
まとめ
あくまで簡易的な防止策のまとめです。探せばいくらでも抜き取れる方法はあります。
インターネットはみんなのものだけど、個人の財産にもなるので導入してみてはいかがでしょうか。
(スクショ防止はなにかいい方法あれば更新する。)
