画像の不正2次利用を防止する方法 #JavaScript

案件のガイドラインで、表題の件について対応する必要があり色々調べて実装してみました。

はじめに言っておきますが、完璧に防ぐのは無理です。
どう頑張っても、画像パス直だたきされると画像は表示されちゃいます。
なので、僕達にできることはあくまで「ユーザーに、簡単には保存させないようにする」までです。

それでは、下記に対策方法をまとめます。

ドラッグ＆ドロップを無効にする

img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none; /* From IE10 only */
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

CSSではどうにも Firefox や IE では無効にならないようです。
下記JSを追加します。

// ※ jQuery を使用しております

// あとからDOMに追加した要素にもイベントを効かせるために、
// document にイベントを設定
$(document) 
  .on('mousedown', 'img', function (e) { e.preventDefault(); }); // return false でもOKか

これでマウスを押した際のアクションが無効化されるため、ドラッグ＆ドロップできなくなります。
このJSを使う場合はCSSの指定も不要になります。

右クリックでコンテキストメニューを開けないようにする

// ※ jQuery を使用しております

// あとからDOMに追加した要素にもイベントを効かせるために、
// document にイベントを設定
$(document) 
  .on('contextmenu', 'img', function () { return false; });

あとがき

結果的には、img の mousedown イベントと、contextmenu イベントを無効化するだけで画像の不正2次利用防止（ポーズだが）は実装できました。

ちなみに、css で img に対して、pointer-events: none を指定すると、上記すべてに一発で対応できます。
ただ、すべてのイベントを無効にするようなので、画像リンクがクリックできなくなったり、モーダルが出なくなったりする場合があります。
なので、こちらを使用する場合は img すべてといった広範囲の適用はせず、特定の要素にのみ適用させるようにしたほうがよさそうです。