img タグへの各属性付与によるコピー抑止まとめ
ひとまず簡易的に画像コピー抑止をしたいという話が来たので、ざっと調べた内容の備忘録。
| attr/event | effect | ie7 | ie8 | ie9 | ie10 | chrome | firefox | safari |
|---|---|---|---|---|---|---|---|---|
| user-select: none; | マウスドラッグ等で要素選択できなくする | x | x | x | x | o | o | o |
| draggable="false" | 要素をマウスでドラッグ＆コピーできなくする | x | x | x | o | o | o | o |
| unselectable="on" | 上のdraggableのIE独自拡張版？ | o | o | o | o | x | x | x |
| oncontextmenu="return false;" | イベントをバインドして、メニューを開かせない（属性） | o | o | o | o | o | o | o |
| $('****').on('contextmenu', function(){ return false;}); | イベントをバインドして、メニューを開かせない（JS） | o | o | o | o | o | o | o |
img タグに追加する属性は以下。
何でもかんでも画像に入れるのはややナンセンスな気も。今回は「高解像度画像の自由なコピーをなるべく抑止」という温度感だったので、拡大画像のみ入れるとかそんな感じになりそう。適宜判断して必要な箇所のみに入れるのが良さげ。
イベントを直接 img タグに書く場合
<img src="hoge.jpg" alt="hoge" **draggable="false" unselectable="on" oncontextmenu="return false;**">
JavaScript でまとめてイベント処理をする場合
<img src="hoge.jpg" alt="hoge" draggable="false" unselectable="on" class="js--no-contextmenu">
<script>
(function($){
$('.js--no-contextmenu').on('contextmenu', function(){
return false;
});
})(jQuery);
</script>
結果として
- ○ マウスによるデスクトップへのドラッグコピーはできなくなる。
- ○ 右クリックで出るコンテキストメニューから、コピー及び保存はできなくなる。
- × 画面キャプチャによるコピーは依然可能
- × htmlソースコードから対象画像を保存する事は依然可能
##サンプル