Q&A
JavaScriptに記載されている時点でURLから直アクセスされる材料があるわけですが、そこは考慮しないということですか？
前提・実現したいこと
blogにおける画像の保護。
画像URLが見えるまでひと手間かかるようにしたい。
■参考
画像の描画にcanvas要素を使う
https://qiita.com/a_haru/items/2b8af48f84432e03f199
発生している問題・エラーメッセージ
iphone,retinaディスプレイにおける描画でボケてしまう。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta name="viewport" content="width=device-width,initial-scale=1"> 5 <meta charset="UTF-8"> 6 <title>画像をダウンロードさせないページサンプル</title> 7</head> 8<body> 9 <img data-img-index="img1"> 10 <img data-img-index="img2"> 11 <img data-img-index="img3"> 12 <img data-img-index="img4"> 13 <img data-img-index="img5"> 14</body> 15</html>
js
1window.addEventListener('DOMContentLoaded', function(){ 2 var images = document.querySelectorAll('img[data-img-index]') 3 var imagePath = { 4 'img1': 'img/01.jpg', 5 'img2': 'img/04.jpg', 6 'img3': 'img/02.jpg', 7 'img4': 'img/03.jpg', 8 'img5': 'img/05.jpg', 9 } 10 var cancelEvent = function (e) { 11 e.preventDefault() 12 } 13 Array.prototype.forEach.call(images, function (elm) { 14 const attr = elm.getAttribute('data-img-index') 15 elm.src = imagePath[attr] 16 elm.onload = function (e) { 17 const canvas = document.createElement('canvas') 18 const imageStyle = document.defaultView.getComputedStyle(elm, '') 19 const ctx = canvas.getContext('2d') 20 const imageWidth = imageStyle.width.replace(/px$/i, '') 21 const imageHeight = imageStyle.height.replace(/px$/i, '') 22 canvas.width = imageWidth 23 canvas.height = imageHeight 24 ctx.drawImage(elm, 0, 0, imageWidth, imageHeight) 25 ctx.scale(0.5, 0.5) 26 elm.parentElement.insertBefore(canvas, elm) 27 elm.parentElement.removeChild(elm) 28 canvas.addEventListener('contextmenu', cancelEvent) 29 canvas.addEventListener('dragstart', cancelEvent) 30 } 31 }) 32})
試したこと
drawimageが原因でボケてしまう記述を見つけ、それ以外の方法をとろうとしたものの、canvasタグへの変換を維持できず、URLが見えてしまう。
試している元画像は2000px。
回答4件
0
絶対にHTMLソースは、見せたくないぞ！という意気込みのやり方。
○ CSSで右クリック、ドラッグアンドドロップの禁止
○ ajaxにてコンテンツ書き出し
○ デベロッパツール禁止
○ ソースでajaxの通信先は見えるが、以下で対応
○ ajax時にはrefererをとって、別の場所から来たリクエストには答えない。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta name="viewport" content="width=device-width,initial-scale=1"> 5 <meta charset="UTF-8"> 6 <title>画像をダウンロードさせないページサンプル</title> 7 <script> 8 </script> 9 <style> 10 </style> 11</head> 12<body style="pointer-events: none;"> 13 <noscript> 14 <p>JavaScriptがオンになっていないと利用できません</p> 15 </noscript> 16 17 <div id="content"></div> 18 19 <!-- デベロッパツールでCSSを解除しようとした時の対策 --> 20 <script src="https://sindresorhus.com/devtools-detect/index.js"></script> 21 <script> 22 window.addEventListener('devtoolschange', function () { 23 document.body.innerHTML ='';//bodyを空に 24 }); 25 //------- デベロッパツール対策ここまで 26 27 window.onload = function(){//onload時 28 var postData = ('');//--- post先でチェックするのは referer なので空でいい 29 ajax_get_contents(postData);//-------- ajax 送信 ajax_get_contents() 30 } 31 function ajax_get_contents(postData){//------- ajax 送信 32 var chk = window.outerWidth - window.innerWidth; 33 if(chk < 3){//デベロッパツールが開いたままリロードしたらajaxさせない 34 //---------------------- ajax ここから 35 var req = new XMLHttpRequest(); 36 req.onreadystatechange = function() { 37 var result = document.getElementById('content');//#content に書き出し 38 if (req.readyState == 4) { // 通信の完了時 39 if (req.status == 200) { // 通信の成功時 40 result.innerHTML = req.responseText; 41 } 42 }else{ 43 result.innerHTML = "通信中..."; 44 } 45 } 46 req.open('POST', 'content_ret.php', true);//phpファイルの置き場所 47 req.setRequestHeader('content-type','application/x-www-form-urlencoded;charset=UTF-8'); 48 req.send(postData); 49 //---------------------- ajax ここまで 50 } 51 } 52</script> 53</body> 54</html>
php
1<?php 2ini_set('display_errors','Off'); 3$blogURL = '呼び出し元URL'; 4$referer = $_SERVER['HTTP_REFERER']; 5if($referer == $blogURL){ 6/*以下コンテンツ内容はデータベースから引っ張り出すなり、 7file_get_contentsでダミーブログから引っ張ってくるでも構いません。*/ 8?> 9ここには記事内容やイメージタグなどが書かれています。 10<img src="images/1.jpg"> 11<img src="images/2.jpg"> 12<img src="images/3.jpg"> 13<img src="images/4.jpg"> 14<img src="images/5.jpg"> 15<?php 16}else{//---------- リクエストが違うところから来たら no access と表示 //何も表示しないにしてもいいかも 17 echo 'no access'; 18} 19 ?>
投稿2018/10/29 08:49
編集2018/10/29 10:09
総合スコア798
スクリーンショット対策は、javascriptで入れてください。
javascriptオフだと、コンテンツそのものが見えてないので有効だと思います。
回答修正しました。
（デベロッパツール開いたままリロードすると通信ログに見えてた件を修正）
collingさんはまさに救世主…。
wordpress系だときっと試せますよね…。むしろ試したくなります。
tumblrが不可能でwordpressがあまりに簡単だったら…いいデザインを探して引っ越しを考えそうです。
wordpressの、自分でサーバにインストールして使う wordpress.orgのほうなら工夫すればこのやり方が使えます。ブログサービス版の方は、多分無理でしょう。（使ったことないのでわかりません）
スクリプト組んで自分で色々やりたいなら、安いサーバ借りて試してみるのがいいですよー。
php , .htaccess が簡単ということですね…。レンタルサーバーも考えてみますφ(..)こんなに丁寧に…ありがとうございます！
0
最終的に画像URLを見られてしまったら.htaccessにて、直接アクセスさせないという対応にすれば随分シンプルになりますよ。
○ CSS で右クリック、ドラッグアンドドロップの禁止
○ デベロッパツールにてCSSをオフにしようとした時には、body 内容を消す。
○ javascript がOFFで、通常アクセスの時にはコンテンツ非表示
○ ソースを開いたり、javascript がOFFで、デベロッパーツールを開いた場合には画像URLがばれるが、.htaccess により対応。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta name="viewport" content="width=device-width,initial-scale=1"> 5 <meta charset="UTF-8"> 6 <title>画像をダウンロードさせないページサンプル</title> 7 <style> 8 </style> 9</head> 10<body style="pointer-events: none;"> 11 <div id="container"> 12 <noscript> 13 <p>JavaScriptがオンになっていないと利用できません</p> 14 </noscript> 15 <div id="content"></div> 16 <script type="text/javascript"> 17 <!-- 18 var blogContent = 'ここには記事内容やイメージタグなどが書かれています。' 19 +'<img src="images/1.jpg">' 20 +'<img src="images/2.jpg">' 21 +'<img src="images/3.jpg">' 22 +'<img src="images/4.jpg">' 23 +'<img src="images/5.jpg">'; 24 document.getElementById('content').innerHTML = blogContent; 25 //--> 26 </script> 27 28</div><!-- #container end --> 29<!-- デベロッパツールでCSSを解除しようとした時の対策 --> 30<script src="https://sindresorhus.com/devtools-detect/index.js"></script> 31<script> 32window.addEventListener('devtoolschange', function () { 33 document.body.innerHTML =''; 34}); 35</script> 36</body> 37</html>
htaccess
1SetEnvIf Referer "^http://example.com" allow_ref 2SetEnvIf Referer "^https://example.com" allow_ref 3order deny,allow 4deny from all 5allow from env=allow_ref
投稿2018/10/28 18:02
総合スコア798
教えていただいてありがとうございます！
.htaccessが使えるととても強力で見つけたときには夢を見ました。現在ブログサービスを使って行っているので、次回サーバーを操作できる環境にあるときには挑戦してみようと思います。
CSSオフに対して対策ができるのははじめて知りました>.> 追加してみます！
分割画像を一枚に表示することはできたのであともう少しですることはできたように感じています。
ああ。ブログサービスなんですね。
使えるのは、javascript だけでしょうか？
phpが使えるなら、javascript オフの時にソースを見せないというのも出来るのですが、、、。
現在tumblrで試しているのでjavascriptぐらいに思えています。
collingさんの言葉を聞いているとwordpress系のほうが向いているように聞こえてきましたφ(..)
0
（※ちゃんと確認していないうえでの提案です）
画像の上に透明な要素を重ねてしまって、画像を選択できないようにしてはどうでしょう？imgに:afterや:beforeが使えないので、divでimgをぴったりと囲わせ、divに:afterや:beforeを上にかぶせるような形が取れればよいかなーと思いました。
投稿2018/10/27 16:41
退会済みユーザー
総合スコア0
透明画像重ね、ドラッグ禁止、右クリック禁止、キーボードショートカット禁止、ウィンドウ非アクティブ時のコンテンツ描画なし、など実施済みです。
なるほど。それ書いといた方がよかです
そこまでやってるならひと手間以上かかりますね。
これ以上何を望むのでしょうか…
公開している以上は閲覧者はどのようにもできるものでは。
画像を有料にでもしてるのですか？
"HTML内で画像のURLを見られないようにしたい"
です。JavaScriptは難読化します。
なるほど。だんだん質問内容からずれている気がしますが一応。通信履歴は割とパッと見えるし、取得できるので、javascript読まずにそっちを取得して一括スクレイピングされる可能性のほうが高いですよ。
はい。不可能にすることは難しく、画像分割して配置することなども考えていますが、まずは"HTML内で画像のURLを見られないようにしたい"を解決したいです。
あなたの回答
tips
プレビュー
