Webページ上の画像を守る不完全な方法

はじめに

とある開発中の教育関係システムに対する「ページに載せている学生の顔写真をユーザが保存できないようにしたい」という要望に対応した時に使った方法を紹介。

HTMLに張られているIMGタグの画像に対して、以下の動作が出来なくなります。

• 右クリック
• ドラッグアンドドロップ

一般的なレベル（？）のユーザが画像の保存をできなければOKということで、要望元には納得して頂けました。

ソース

index.html

一部抜粋

  <img class="undraggable" src="./images/fig1.png" alt="undraggable image"  ondragstart="return false;"  oncontextmenu="return false;"/>

hoge.css

/* 学生の顔写真を保存不可にする*/
.undraggable {
    /* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
    /* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
    -moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */

    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    user-drag: none;
}

hoge.js

window.onload = init;

function init() {

  var elements = document.getElementsByClassName("undraggable"); 

  for (var i = elements.length; i--; ) {
    disableDraggingFor(elements[i]);
  }  

}

function disableDraggingFor(element) {
  // this works for FireFox and WebKit in future according to  http://help.dottoro.com/lhqsqbtn.php
  element.draggable = false;
  // this works for older web layout engines
  element.onmousedown = function(event) {
    event.preventDefault();
    return false;
  };
}

終わりに

上記のように設定したところで、ページ全体を保存したりスクリーンショットを撮ったりと、
画像を保存するやり方は色々あるので、”画像を保存できないようにしてるよ！”というポーズにしかなっていないのが悲しいですね。

電子書籍の分野では画像にユーザを特定可能な"すかし"をいれたり、スクリーンショットのキーを押された時に画像を閉じるようにしたりしているそうです。

参考

How to disable dragging of images and text selection in web pages
電子透かし wiki
draggable attribute