質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.58%

HTML内で画像のURLを見られないようにしたい

受付中

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 1,512

yuyumemo

score 10

 前提・実現したいこと

blogにおける画像の保護。
画像URLが見えるまでひと手間かかるようにしたい。

■参考
画像の描画にcanvas要素を使う
https://qiita.com/a_haru/items/2b8af48f84432e03f199

 発生している問題・エラーメッセージ

iphone,retinaディスプレイにおける描画でボケてしまう。

 該当のソースコード

<!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>
window.addEventListener('DOMContentLoaded', function(){
  var images = document.querySelectorAll('img[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 cancelEvent = function (e) {
    e.preventDefault()
  }
  Array.prototype.forEach.call(images, function (elm) {
    const attr = elm.getAttribute('data-img-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)
    }
  })
})

 試したこと

drawimageが原因でボケてしまう記述を見つけ、それ以外の方法をとろうとしたものの、canvasタグへの変換を維持できず、URLが見えてしまう。
試している元画像は2000px。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/10/27 23:45

    JavaScriptに記載されている時点でURLから直アクセスされる材料があるわけですが、そこは考慮しないということですか?

    キャンセル

  • yuyumemo

    2018/10/27 23:57

    今回はひと手間かかるようにできればよしという考えです。

    キャンセル

回答 4

+2

画像部分をDIVで枠を作っておいてCSSでその枠に背景として画像を表示させるようにすれば、HTML側には画像のURLは表示されないです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/28 13:02

    確かに!しかしあまりにURLが簡単に見えてしまうので、CSSを除外もしくはJavaScript難読化を前提としているべきでした。すみません…。

    キャンセル

+2

最終的に画像URLを見られてしまったら.htaccessにて、直接アクセスさせないという対応にすれば随分シンプルになりますよ。

○ CSS で右クリック、ドラッグアンドドロップの禁止
○ デベロッパツールにてCSSをオフにしようとした時には、body 内容を消す。
○ javascript がOFFで、通常アクセスの時にはコンテンツ非表示
○ ソースを開いたり、javascript がOFFで、デベロッパーツールを開いた場合には画像URLがばれるが、.htaccess により対応。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta charset="UTF-8">
  <title>画像をダウンロードさせないページサンプル</title>
  <style>
  </style>
</head>
<body style="pointer-events: none;">
  <div id="container">
    <noscript>
      <p>JavaScriptがオンになっていないと利用できません</p>
    </noscript>
    <div id="content"></div>
    <script type="text/javascript">
    <!--
    var blogContent = 'ここには記事内容やイメージタグなどが書かれています。'
    +'<img src="images/1.jpg">'
    +'<img src="images/2.jpg">'
    +'<img src="images/3.jpg">'
    +'<img src="images/4.jpg">'
    +'<img src="images/5.jpg">';
    document.getElementById('content').innerHTML = blogContent;
    //-->
  </script>

</div><!-- #container end -->
<!-- デベロッパツールでCSSを解除しようとした時の対策 -->
<script src="https://sindresorhus.com/devtools-detect/index.js"></script>
<script>
window.addEventListener('devtoolschange', function () {
  document.body.innerHTML ='';
});
</script>
</body>
</html>
SetEnvIf Referer "^http://example\.com" allow_ref
SetEnvIf Referer "^https://example\.com" allow_ref
order deny,allow
deny from all
allow from env=allow_ref

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/29 12:55

    教えていただいてありがとうございます!
    .htaccessが使えるととても強力で見つけたときには夢を見ました。現在ブログサービスを使って行っているので、次回サーバーを操作できる環境にあるときには挑戦してみようと思います。
    CSSオフに対して対策ができるのははじめて知りました>.> 追加してみます!

    分割画像を一枚に表示することはできたのであともう少しですることはできたように感じています。

    キャンセル

  • 2018/10/29 15:23

    ああ。ブログサービスなんですね。
    使えるのは、javascript だけでしょうか?
    phpが使えるなら、javascript オフの時にソースを見せないというのも出来るのですが、、、。

    キャンセル

  • 2018/10/29 19:39

    現在tumblrで試しているのでjavascriptぐらいに思えています。
    collingさんの言葉を聞いているとwordpress系のほうが向いているように聞こえてきましたφ(..)

    キャンセル

+2

絶対にHTMLソースは、見せたくないぞ!という意気込みのやり方。
○ CSSで右クリック、ドラッグアンドドロップの禁止
○ ajaxにてコンテンツ書き出し
○ デベロッパツール禁止
○ ソースでajaxの通信先は見えるが、以下で対応
○ ajax時にはrefererをとって、別の場所から来たリクエストには答えない。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta charset="UTF-8">
  <title>画像をダウンロードさせないページサンプル</title>
  <script>
  </script>
  <style>
  </style>
</head>
<body style="pointer-events: none;">
  <noscript>
    <p>JavaScriptがオンになっていないと利用できません</p>
  </noscript>

  <div id="content"></div>

  <!-- デベロッパツールでCSSを解除しようとした時の対策 -->
  <script src="https://sindresorhus.com/devtools-detect/index.js"></script>
  <script>
  window.addEventListener('devtoolschange', function () {
    document.body.innerHTML ='';//bodyを空に
  });
  //------- デベロッパツール対策ここまで

  window.onload = function(){//onload時
    var postData = ('');//--- post先でチェックするのは referer なので空でいい
    ajax_get_contents(postData);//-------- ajax 送信  ajax_get_contents()
  }
  function ajax_get_contents(postData){//------- ajax 送信
    var chk = window.outerWidth - window.innerWidth;
    if(chk < 3){//デベロッパツールが開いたままリロードしたらajaxさせない
    //---------------------- ajax ここから
    var req = new XMLHttpRequest();
    req.onreadystatechange = function() {
      var result = document.getElementById('content');//#content に書き出し
      if (req.readyState == 4) { // 通信の完了時
        if (req.status == 200) { // 通信の成功時
          result.innerHTML = req.responseText;
        }
      }else{
        result.innerHTML = "通信中...";
      }
    }
    req.open('POST', 'content_ret.php', true);//phpファイルの置き場所
    req.setRequestHeader('content-type','application/x-www-form-urlencoded;charset=UTF-8');
    req.send(postData);
    //---------------------- ajax ここまで
    }
  }
</script>
</body>
</html>
<?php
ini_set('display_errors','Off');
$blogURL = '呼び出し元URL';
$referer = $_SERVER['HTTP_REFERER'];
if($referer == $blogURL){
/*以下コンテンツ内容はデータベースから引っ張り出すなり、
file_get_contentsでダミーブログから引っ張ってくるでも構いません。*/
?>
ここには記事内容やイメージタグなどが書かれています。
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<?php
}else{//---------- リクエストが違うところから来たら no access と表示 //何も表示しないにしてもいいかも
  echo 'no access';
}
 ?>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/29 20:22

    collingさんはまさに救世主…。
    wordpress系だときっと試せますよね…。むしろ試したくなります。
    tumblrが不可能でwordpressがあまりに簡単だったら…いいデザインを探して引っ越しを考えそうです。

    キャンセル

  • 2018/10/29 22:00

    wordpressの、自分でサーバにインストールして使う wordpress.orgのほうなら工夫すればこのやり方が使えます。ブログサービス版の方は、多分無理でしょう。(使ったことないのでわかりません)
    スクリプト組んで自分で色々やりたいなら、安いサーバ借りて試してみるのがいいですよー。

    キャンセル

  • 2018/10/29 22:51

    php , .htaccess が簡単ということですね…。レンタルサーバーも考えてみますφ(..)こんなに丁寧に…ありがとうございます!

    キャンセル

0

(※ちゃんと確認していないうえでの提案です)
画像の上に透明な要素を重ねてしまって、画像を選択できないようにしてはどうでしょう?imgに:afterや:beforeが使えないので、divでimgをぴったりと囲わせ、divに:afterや:beforeを上にかぶせるような形が取れればよいかなーと思いました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/28 12:08

    "HTML内で画像のURLを見られないようにしたい"
    です。JavaScriptは難読化します。

    キャンセル

  • 2018/10/28 12:17

    なるほど。だんだん質問内容からずれている気がしますが一応。通信履歴は割とパッと見えるし、取得できるので、javascript読まずにそっちを取得して一括スクレイピングされる可能性のほうが高いですよ。

    キャンセル

  • 2018/10/28 12:35 編集

    はい。不可能にすることは難しく、画像分割して配置することなども考えていますが、まずは"HTML内で画像のURLを見られないようにしたい"を解決したいです。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る