HTTPSを介して完全にアクセスされるサイトがありますが、HTTP（主にRSSフィードからの画像）である外部コンテンツを表示する場合があります。ユーザーの大多数もIE6を使用しています。
私は理想的には次の両方を行いたいです
最初の目的は単に不可能であると思いますが、2番目の目的で十分かもしれません。
最悪のシナリオは、RSSフィードをインポートするときに解析し、画像をローカルに保存して、ユーザーがその方法でアクセスできるようにすることですが、あまり利益が得られないのは大変なことです。
回答:
あなたの最悪のシナリオはあなたが思っているほど悪くはありません。
RSSフィードを既に解析しているので、すでに画像のURLを取得しています。のような画像のURLがあるとしますhttp://otherdomain.com/someimage.jpg。このURLをに書き換えますhttps://mydomain.com/imageserver?url=http://otherdomain.com/someimage.jpg&hash=abcdeafad。このように、ブラウザーは常にhttps経由でリクエストを行うため、問題を取り除くことができます。
次のパート-次を実行するプロキシページまたはサーブレットを作成します-
このソリューションにはいくつかの利点があります。HTMLの作成時に画像をダウンロードする必要はありません。画像をローカルに保存する必要はありません。また、あなたは無国籍です。URLには、画像を提供するために必要なすべての情報が含まれています。
最後に、ハッシュパラメータはセキュリティ用です。作成したURLの画像をサーブレットに提供するだけです。したがって、URLを作成するときは、md5(image_url + secret_key)それをしてハッシュパラメータとして追加します。リクエストを処理する前に、ハッシュを再計算して、渡されたものと比較します。secret_keyはあなたしか知らないので、他の誰も有効なURLを構築することはできません。
Javaで開発している場合、サーブレットはほんの数行のコードです。以下のコードを他のバックエンド技術に移植できるはずです。
/*
targetURL is the url you get from RSS feeds
request and response are wrt to the browser
Assumes you have commons-io in your classpath
*/
protected void proxyResponse (String targetURL, HttpServletRequest request,
HttpServletResponse response) throws IOException {
GetMethod get = new GetMethod(targetURL);
get.setFollowRedirects(true);
/*
* Proxy the request headers from the browser to the target server
*/
Enumeration headers = request.getHeaderNames();
while(headers!=null && headers.hasMoreElements())
{
String headerName = (String)headers.nextElement();
String headerValue = request.getHeader(headerName);
if(headerValue != null)
{
get.addRequestHeader(headerName, headerValue);
}
}
/*Make a request to the target server*/
m_httpClient.executeMethod(get);
/*
* Set the status code
*/
response.setStatus(get.getStatusCode());
/*
* proxy the response headers to the browser
*/
Header responseHeaders[] = get.getResponseHeaders();
for(int i=0; i<responseHeaders.length; i++)
{
String headerName = responseHeaders[i].getName();
String headerValue = responseHeaders[i].getValue();
if(headerValue != null)
{
response.addHeader(headerName, headerValue);
}
}
/*
* Proxy the response body to the browser
*/
InputStream in = get.getResponseBodyAsStream();
OutputStream out = response.getOutputStream();
/*
* If the server sends a 204 not-modified response, the InputStream will be null.
*/
if (in !=null) {
IOUtils.copy(in, out);
}
}
HTTPS経由で画像をロードする簡単なソリューションを探している場合は、https： //images.weserv.nl/にある無料のリバースプロキシサービスある興味があるかもしれません。それはまさに私が探していたものでした。
有料のソリューションを探しているなら、私は以前はCloudinary.comを使用しましたが、これもうまく機能しますが、このタスクだけでは高すぎると思います。
これがあなたのやっていることに合うかどうかはわかりませんが、簡単な修正として、httpコンテンツをhttpsスクリプトに「ラップ」します。たとえば、httpsを介して提供されるページで、rssフィードを置き換えるiframeを導入し、iframeのsrc属性に、フィードをキャプチャしてHTMLを出力するスクリプトのURLをサーバーに配置します。スクリプトはhttpを介してフィードを読み取り、httpsを介して出力します（つまり「ラッピング」）。
ちょっとした考え
2番目の要件について-onerrorイベントを利用できる場合があります。 <img onerror="some javascript;"...
更新：
またdocument.images、domで反復処理を試すこともできます。あるcompleteあなたが使用することができるかもしれないブールプロパティが。これが適切かどうかはわかりませんが、調査する価値があるかもしれません。
Facebookアプリのように、安全なページに安全でないコンテンツを含めることができない場合があります。また、これらのコンテンツをローカルにすることはできません。たとえば、iFrameに読み込まれるアプリは単純なコンテンツではなく、ローカルにすることはできません。
エラーのダイアログを防ぐために、httpのコンテンツをhttpsにロードしないでください。また、httpsページをhttpバージョンにフォールバックしないでください。
ユーザーのセキュリティを確保する唯一の方法は、すべてのコンテンツのhttpsバージョンを使用することです。http：//developers.facebook.com/blog/post/499/
受け入れられた答えはこれをPHPとCORSの両方に更新するのに役立ちましたので、私は他の人のための解決策を含めると思いました：
純粋なPHP / HTML：
<?php // (the originating page, where you want to show the image)
// set your image location in whatever manner you need
$imageLocation = "http://example.com/exampleImage.png";
// set the location of your 'imageserve' program
$imageserveLocation = "https://example.com/imageserve.php";
// we'll look at the imageLocation and if it is already https, don't do anything, but if it is http, then run it through imageserve.php
$imageURL = (strstr("https://",$imageLocation)?"": $imageserveLocation . "?image=") . $imageLocation;
?>
<!-- this is the HTML image -->
<img src="<?php echo $imageURL ?>" />
javascript / jQuery：
<img id="theImage" src="" />
<script>
var imageLocation = "http://example.com/exampleImage.png";
var imageserveLocation = "https://example.com/imageserve.php";
var imageURL = ((imageLocation.indexOf("https://") !== -1) ? "" : imageserveLocation + "?image=") + imageLocation;
// I'm using jQuery, but you can use just javascript...
$("#theImage").prop('src',imageURL);
</script>
imageserve.php CORSの詳細については、http： //stackoverflow.com/questions/8719276/cors-with-php-headers？noredirect = 1＆lq = 1を参照してください
<?php
// set your secure site URL here (where you are showing the images)
$mySecureSite = "https://example.com";
// here, you can set what kinds of images you will accept
$supported_images = array('png','jpeg','jpg','gif','ico');
// this is an ultra-minimal CORS - sending trusted data to yourself
header("Access-Control-Allow-Origin: $mySecureSite");
$parts = pathinfo($_GET['image']);
$extension = $parts['extension'];
if(in_array($extension,$supported_images)) {
header("Content-Type: image/$extension");
$image = file_get_contents($_GET['image']);
echo $image;
}
単に：それをしないでください。HTTPSページ内のHttpコンテンツは本質的に安全ではありません。ポイント。IEが警告を表示するのはこのためです。警告を取り除くことは愚かな大掃除のアプローチです。
代わりに、HTTPSページがすべきのみはHTTPSコンテンツをがあります。コンテンツがHTTPS経由でもロードできることを確認し、ページがhttps経由でロードされている場合はhttps経由でコンテンツを参照します。外部コンテンツの場合、これは、要素をローカルでロードおよびキャッシュして、https経由で利用できるようにすることを意味します。残念ながらそれを回避する方法はありません。
警告は正当な理由でそこにあります。真剣に。カスタムコンテンツを含むhttps表示ページをどのように引き継ぐことができるかを5分間考えます。
これは古いスレッドですが、1つのオプションは、http：部分を画像URLから削除して、「http：//some/image.jpg」が「//some/image.jpg」になるようにすることです。これはCDNでも機能します
私にとって最良の方法
<img src="/path/image.png" />// this work only online
or
<img src="../../path/image.png" /> // this work both
or asign variable
<?php
$base_url = '';
if($_SERVER['HTTP_HOST'] == 'localhost')
{
$base_url = 'localpath';
}
?>
<img src="<?php echo $base_url;?>/path/image.png" />