Работа с содержимым HTTP на страницах HTTPS
У нас есть сайт, доступ к которому полностью осуществляется через HTTPS, но иногда отображается внешний контент, который является HTTP (изображения в основном из RSS-каналов). Подавляющее большинство наших пользователей также застряли на IE6.
В идеале я хотел бы сделать оба следующих
- Запретите предупреждающее сообщение IE о небезопасном контенте (чтобы я мог показать менее навязчивое, например, заменив изображения значком по умолчанию, как показано ниже)
- Предоставьте пользователям что-то полезное вместо изображений, которые они не могут увидеть иначе; если бы был какой-то JS, я бы смог выяснить, какие изображения не были загружены, и заменить их на наш, вместо этого это было бы здорово.
Я подозреваю, что первая цель просто невозможна, но второй может быть достаточно.
В худшем случае я анализирую RSS-каналы, когда мы импортируем их, извлекаю изображения, сохраняю их локально, чтобы пользователи могли получить к ним доступ таким образом, но это кажется большой болью для разумно небольшого выигрыша.
10 ответов
Ваш худший сценарий не так плох, как вы думаете.
Вы уже анализируете канал RSS, поэтому у вас уже есть URL-адреса изображений. Скажем, у вас есть изображение URL, как http://otherdomain.com/someimage.jpg, Вы переписываете этот URL как https://mydomain.com/imageserver?url=http://otherdomain.com/someimage.jpg&hash=abcdeafad, Таким образом, браузер всегда делает запрос через https, поэтому вы избавляетесь от проблем.
Следующая часть - создайте прокси-страницу или сервлет, который выполняет следующее -
- Прочитайте параметр url из строки запроса и проверьте хеш
- Загрузите изображение с сервера и верните его обратно в браузер
- При желании кэшируйте изображение на диске
Это решение имеет ряд преимуществ. Вам не нужно загружать изображение во время создания HTML. Вам не нужно хранить изображения локально. Кроме того, вы не имеете гражданства; URL содержит всю информацию, необходимую для обслуживания изображения.
Наконец, параметр hash для безопасности; вы хотите, чтобы ваш сервлет обслуживал изображения только для тех URL, которые вы создали. Итак, когда вы создаете URL, вычислить md5(image_url + 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, я бы ввел iframe, который заменит ваш RSS-канал, а в атрибуте src iframe поместил URL-адрес скрипта на ваш сервер, который захватывает канал и выводит html. скрипт читает канал через http и выводит его через https (таким образом, "оборачивая")
Просто мысль
Принятый ответ помог мне обновить это как для 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 см. http://stackru.com/questions/8719276/cors-with-php-headers?noredirect=1&lq=1 для получения дополнительной информации о CORS
<?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;
}
Что касается вашего второго требования - вы можете использовать событие onerror, т.е. <img onerror="some javascript;"...
Обновить:
Вы также можете попробовать повторить document.images в дом. E сть complete логическое свойство, которое вы можете использовать. Я не знаю точно, подойдет ли это, но, возможно, стоит исследовать.
Иногда, как в приложениях Facebook, у нас не может быть незащищенного содержимого на защищенной странице. и мы не можем сделать это содержимое локальным. например, приложение, которое будет загружаться в iFrame, не является простым содержимым, и мы не можем сделать его локальным.
Я думаю, что мы никогда не должны загружать содержимое http в https, также мы не должны возвращать страницу https к http-версии, чтобы предотвратить появление ошибки.
единственный способ обеспечить безопасность пользователя - использовать https-версию всего содержимого, http://developers.facebook.com/blog/post/499/
Просто: НЕ ДЕЛАЙТЕ ЭТОГО. Содержимое Http на странице HTTPS небезопасно. Точка. Вот почему IE показывает предупреждение. Избавиться от предупреждения - глупый подход к фигням.
Вместо этого страница HTTPS должна содержать только содержимое HTTPS. Убедитесь, что контент может быть загружен через HTTPS, и укажите ссылку на него через https, если страница загружена через https. Для внешнего контента это будет означать загрузку и кэширование элементов локально, чтобы они были доступны через https - обязательно. К сожалению, нет.
Предупреждение есть по уважительной причине. Шутки в сторону. Потратьте 5 минут на размышления о том, как вы можете перейти на показанную страницу https с пользовательским контентом - вы будете удивлены.
Лучший способ работы для меня
<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" />
Я понимаю, что это старый поток, но один из вариантов - просто удалить часть http: из URL изображения, чтобы http://some/image.jpg превратился в //some/image.jpg. Это также будет работать с CDN