posted at 2018-01-28

画像の無断転載を防ぐ方法アイデアメモ

公開していたイラストが別のWebサイトに勝手に転載されていたり、SNSのアイコンで使われていたり。
画像の無断利用に関して悩んだことのあるイラストレーターの方は少なくないと思います。

直接相談を受けたことはありませんがTwitterで無断利用に関するツイートをよく目にするので、私も何か助けになれることは無いかと思い、画像の無断転載を防ぐ方法を考えました。
備忘録ですが、誰かの助けになれたら嬉しいので、Qiitaに記載いたします。

他にも方法があれば、コメントなどで教えていただけると嬉しいです。

※ライブラリではありません。ただのアイデアです

無断利用を制限する一文を記載する

まずはWebサイト中に「無断利用禁止」など、無断での利用を認めていないという旨の注意文を記載しておきます。閲覧者の良識に訴える作戦ですね。

これだけでも無断利用しないようにする方が多いと思いますが、注意文に気づかない方、あえて無視する方も少なくないはずなので、効果は薄いかもしれません。

そもそも画像をダウンロードさせないようにする

無断利用禁止！と、いくら強く書いても聞く耳を持たない人はいますので、無断利用を防ぐには画像をダウンロードさせないことが一番有効です。

結論

調べていて思ったのですが、ダウンロードを100%防ぐことはできそうにありません……。

とはいっても可能な限り難しくすることは可能です。
昔からある方法も含め、ダウンロードの防止策を以下に記載します。

右クリックを禁止する

画像のダウンロードは、

右クリックでメニューを表示。
画像保存ボタンをクリック。

という手順で行われることが多いため、右クリックを無効にすることで、そもそも画像保存ボタンを表示させないようにする方法です。

ページ内のどこかをクリックすると、「右クリックは禁止しています」というダイアログボックスが出てくるWebサイトをよく目にします。ただ、あのような形式だと、OKボタンをクリックするまで操作ができなくなってしまうのでストレスを感じます。
右クリックしたときにアラートを表示するのではなく、コンテキストメニューが出ないようにするだけでも十分だと私は考えています。その方が閲覧者のストレスは少なくなるかもしれません。

以下のようなスクリプトで実現できます。

script.js

window.addEventListener('DOMContentLoaded', function(){
  var images = document.images
  var cancelContextMenu = function(e){
    e.preventDefault()
  };
  Array.prototype.forEach.call(images, function (elm) {
    elm.addEventListener('contextmenu', cancelContextMenu})
  })
})

※document.imagesには、ページ内に使われているimg要素が全て定義されています。

画像のドラッグを禁止する

ドラッグして別タブで画像を表示すると、そこでは右クリックできるので、ページ内で右クリックを制限しても実はあまり意味が無いのです。
加えて言うと、ドラッグさえ出来てしまえばfinderやExplorerに直接画像をコピーすることも可能です。
右クリックだけでなくドラッグも禁止しておけば、かなりの割合でダウンロードを防ぐことができると考えました。

右クリックを禁止するスクリプトを以下のように書き換えて実現できます。

script.js

window.addEventListener('DOMContentLoaded', function(){
  var images = document.images
  var cancelEvent = function(e){
    e.preventDefault()
  };
  Array.prototype.forEach.call(images, function (elm) {
    elm.addEventListener('contextmenu', cancelEvent})
    elm.addEventListener('dragstart', cancelEvent})
  })
})

img要素のsrc属性値をJavaScriptで動的に書き換える

右クリックとドラッグを禁止してしまえば、ダウンロード防止に非常に有効だと考えていますが、ソースコードを見られてしまうと画像のURLを見られてしまいます。
画像に直接アクセスされてしまうと、これまでの対策は全くの無意味です。
そのため、HTMLのソースコードだけでは画像のURLがわからないように、src属性値はJavaScriptを使ってセットすると無断転載防止に効果的かもしれません。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta charset="UTF-8">
  <title>画像をダウンロードさせないページサンプル</title>
</head>
<body>
  <img data-img-index="img1">
  <img data-img-index="img2">
  <img data-img-index="img3">
  <img data-img-index="img4">
  <img data-img-index="img5">
</body>
</html>

script.js

window.addEventListener('DOMContentLoaded', function(){
  var images = document.querySelectorAll('img[data-images-index]')
  var imagePath = {
    'img1': 'img/01.jpg',
    'img2': 'img/02.jpg',
    'img3': 'img/03.jpg',
    'img4': 'img/04.jpg',
    'img5': 'img/05.jpg',
  }
  var cancelEvent = function (e) {
    e.preventDefault()
  }
  Array.prototype.forEach.call(images, function (elm) {
    var attr = elm.getAttribute('data-images-index')
    elm.src = imagePath[attr] !== undefined ? imagePath[attr] : ''
    elm.addEventListener('contextmenu', cancelEvent, false)
    elm.addEventListener('dragstart', cancelEvent, false)
  })
})

例ではまず、ダウンロードさせたくない画像のimg要素からsrc属性を削除し、代わりにdata-img-index属性にユニークな値をセットしています。
script側には、新しくオブジェクトを作成して、data-img-index属性値をプロパティ名に、画像のURLを値に定義しています。

こうすることでhtml上では画像のURLがわからなくなるので、JavaScriptを知らない方が画像をダウンロードすることは困難になります。

また、右クリックとドラッグの禁止処理にはJavaScriptが動かない環境では動作しないという弱点があります。この方法を使うと、そういった環境ではそもそも画像が表示されないので、ユーザビリティは下がってしまいますが弱点をカバーすることも可能です。

画像の描画にcanvas要素を使う

ここまでの対策でも十分に防げると思います。ただ、主要なブラウザについている開発者ツールでは、JavaScriptで書き換えた後のsrc属性値も見えてしまいます。
img要素ではなくcanvas要素を使えば、属性値にURLを記載しなくても画像を表示できるので、画像のURLが見られないようにするために有効だと考えました。

htmlはそのままで、JavaScriptを次のように書き換えると、img要素を削除して、代わりにcanvas要素を挿入します。

script.js

window.addEventListener('DOMContentLoaded', function(){
  var images = document.querySelectorAll('img[data-images-index]')
  var imagePath = {
    'img1': 'img/01.jpg',
    'img2': 'img/04.jpg',
    'img3': 'img/02.jpg',
    'img4': 'img/03.jpg',
    'img5': 'img/05.jpg',
  }
  var cancelEvent = function (e) {
    e.preventDefault()
  }
  Array.prototype.forEach.call(images, function (elm) {
    const attr = elm.getAttribute('data-images-index')
    elm.src = imagePath[attr]
    elm.onload = function (e) {
      const canvas = document.createElement('canvas')
      const imageStyle = document.defaultView.getComputedStyle(elm, '')
      const ctx = canvas.getContext('2d')
      const imageWidth = imageStyle.width.replace(/px$/i, '')
      const imageHeight = imageStyle.height.replace(/px$/i, '')
      canvas.width = imageWidth
      canvas.height = imageHeight
      ctx.drawImage(elm, 0, 0, imageWidth, imageHeight)
      ctx.scale(0.5, 0.5)
      elm.parentElement.insertBefore(canvas, elm)
      elm.parentElement.removeChild(elm)
      canvas.addEventListener('contextmenu', cancelEvent)
      canvas.addEventListener('dragstart', cancelEvent)
    }
  })
})

※過度に縮小した画像をcanvas要素で表示すると、ジャギーが目立ってしまうようなのでご注意ください。

画像のURLにアクセスするとbase64文字列を返すようにする。

これまでの方法、実はjsファイルを見られてしまうと意味がなくなってしまいます。そのため画像のURLがわかっても簡単に保存できないように、もう少し踏み込んで対策を考えてみました。
サーバサイドのスクリプトを使って画像をbase64の文字列に変換し、それをJavaScriptで取得するような仕組みにすれば、もっとダウンロードが難しくなるのではないでしょうか。

例えば画像のURLへのアクセスに対して、以下のようなPHPスクリプトを経由するようにすれば、base64に変換して返すようになります。

routing.php

<?php
  //アクセスされたURLを取得
  $filepath = $_SERVER['REQUEST_URI'];

  //URLからファイル名を抜き出す
  $filepathArr = explode('/', $filepath);
  $filename = array_pop($filepathArr);

  //ファイル名がjpge,jpg,png,gifで終わっているものに対して変換処理
  if ( preg_match( "/\.(jpe?g|png|gif)$/", $filename )){
    try {
      if ($file = file_get_contents((dirname(__FILE__) . '/' . $filename ))){
        $img = base64_encode($file);
        echo $img;
      } else {
        throw new Exception();
      }
    } catch (Exception $e){
      return false;
    }
  } else {
    return false;
  }
?>

この方法なら画像のURLに直接アクセスされても、文字列しか表示されないのでbase64のことを知らない方が画像をダウンロードしづらくなります。

script.js

window.addEventListener('DOMContentLoaded', function () {
  var images = document.querySelectorAll('[data-img-index]')
  var imagePath = {
    'img1': './img/01.jpg',
    'img2': './img/04.jpg',
    'img3': './img/02.jpg',
    'img4': './img/03.jpg',
    'img5': './img/05.jpg',
  }
  var base64Type = {
    'jpg': 'data:image/jpeg;base64,',
    'jpeg': 'data:image/jpeg;base64,',
    'png': 'data:image/png;base64,',
    'gif': 'data:image/gif;base64,'
  }
  var cancelEvent = function (e) { e.preventDefault() }
  Array.prototype.forEach.call(images, function (elm) {
    var attr = elm.getAttribute('data-img-index')
    axios.get(imagePath[attr])
    .then( function (e) {
      var ext = e.config.url.match(/\/.*\.(\w+)$/)[1]

      elm.style.visibility = 'hidden';
      elm.src = (base64Type[ext] + e.data)

      elm.onload = function (e) {
        var canvas = document.createElement('canvas')
        var imageStyle = document.defaultView.getComputedStyle(elm, '')
        var ctx = canvas.getContext('2d')
        var imageWidth = imageStyle.width.replace(/px$/i, '')
        var imageHeight = imageStyle.height.replace(/px$/i, '')
        canvas.width = imageWidth
        canvas.height = imageHeight
        ctx.drawImage(elm, 0, 0, imageWidth, imageHeight)
        ctx.scale(0.5, 0.5)
        elm.parentElement.insertBefore(canvas, elm)
        elm.parentElement.removeChild(elm)
        canvas.addEventListener('contextmenu', cancelEvent)
        canvas.addEventListener('dragstart', cancelEvent)
      }
    })
  })

スクリーンショットの防止について

画像をダウンロードしづらくしてもスクリーンショットは通常通り撮れますので、こちらもどうにかして防ぎたいです。

Window Media Playerでは、保護されている動画のキャプチャを取ろうとすると、真っ黒なものしか撮れないらしいので参考に処理を考えてみました。
以下の場合に画面が真っ黒になれば、MacとPCのどちらもほとんどの場合にスクリーンショットを撮りづらくなります。

Command + Shiftが押されたとき
→Macでスクリーンショットを撮るとき、Command + Shift + 3(or 4)を押すため。
print screenキーが押されたとき
→PCでスクリーンショットを撮るときprint screenキーを押すため。
ブラウザが非アクティブになったとき
→スクリーンショットを撮るアプリケーションを起動したら、ブラウザが非アクティブになるため。

これらの要件をクリアするために、CSSとスクリプトを追加しました。

style.css

body.ov::after{
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000;
  top: 0;
  left: 0;
  z-index: 100;
}

bodyに.ovがついているとき、after擬似要素を追加し、画面全体を真っ黒にする。

script.js

  var addOverlay = function () {
    if (!document.body.classList.contains('ov')) {
      document.body.classList.add('ov')
    }
  }
  var removeOverlay = function () {
    if (document.body.classList.contains('ov')) {
      setTimeout(function () {
        document.body.classList.remove('ov')
      }, 300)
    }
  }
  var overlay = function () {
      addOverlay()
      removeOverlay()
  }
  var keyevent = function (e) {
    if (e.keyCode === 44) {
      overlay()
    }
    if (e.metaKey && e.shiftKey){
      addOverlay()
    } else if ( !e.metaKey || !e.shiftKey ) {
      removeOverlay()
    }
  }
  window.addEventListener('keydown', keyevent)
  window.addEventListener('keyup', keyevent)
  window.addEventListener('blur', addOverlay)
  window.addEventListener('focus', removeOverlay)

キーを押したとき、Shiftキー + metaキー(Commandキー）が同時に押されていたらbodyに.ovを追加。
PrtScーを押したときにbodyに.ovを追加、0.3秒後に、bodyの.ovを削除
キーを離したときShiftキー、metaキーのどちらかが押されていなかったらbodyの.ovを削除 windowが非アクティブのとき、bodyに.ovを追加
windowがアクティブのとき、bodyの.ovを削除

スマートフォンは解決策を見つけられませんでした……。

今後の課題とまとめ

最終的に次のような形になりました。
画像をダウンロードさせないページのデモ
 今回使ったファイル
(distディレクトリの中に入っているファイルがアップロードされています。設定ファイルの雑さはお目こぼしをお願いします。。)

canvasで画像を縮小表示するとどうしても荒くなってしまうので、スマートフォンなどでは気になってしまいます。
また、ウィンドウをリサイズしたあとも画像サイズがそのままになってしまっているので、その点を回収すればもう少し使い勝手がよくなるかもしれません。
それらの課題を解決して、一つのライブラリにまとめ、簡単に導入できるようにしたいと考えています。

TwitterやPixivに掲載しているイラストにはこの方法は使えませんが、イラストレーターの方がご自身で運営しているWebサイトには適用できると思います！