Работа с содержимым HTTP на страницах HTTPS - PullRequest
86 голосов
/ 10 июня 2010

У нас есть сайт, доступ к которому полностью осуществляется через HTTPS, но иногда отображается внешний контент , который является HTTP (изображения из RSS-каналов, в основном). Подавляющее большинство наших пользователей также привязаны к IE6.

В идеале я бы хотел выполнить оба следующих действия:

  • Предотвратить предупреждение IE о небезопасном содержимом (чтобы я мог показать менее навязчивое, например, заменив изображения значком по умолчанию, как показано ниже)
  • Подарите пользователям что-то полезное вместо изображений, которые они не видят иначе; если бы был какой-то JS, я бы смог выяснить, какие изображения не были загружены, и заменить их на наше, вместо этого это было бы здорово.

Я подозреваю, что первая цель просто невозможна, но второй может быть достаточно.

В худшем случае я анализирую RSS-каналы, когда мы импортируем их, извлекаю изображения, сохраняю их локально, чтобы пользователи могли получить к ним доступ таким образом, но это кажется большой болью за разумно малую выгоду. *

Ответы [ 10 ]

146 голосов
/ 15 июня 2010

Ваш худший сценарий не так плох, как вы думаете.

Вы уже анализируете RSS-канал, поэтому у вас уже есть URL-адреса изображений. Скажем, у вас есть URL изображения, например http://otherdomain.com/someimage.jpg. Вы переписываете этот URL как https://mydomain.com/imageserver?url=http://otherdomain.com/someimage.jpg&hash=abcdeafad. Таким образом, браузер всегда отправляет запрос через https, поэтому вы избавляетесь от проблем.

Следующая часть - создайте прокси-страницу или сервлет, который выполняет следующее -

  1. Считать параметр url из строки запроса и проверить хеш
  2. Загрузите изображение с сервера и верните его обратно в браузер
  3. При желании кэшируйте образ на диск

Это решение имеет ряд преимуществ. Вам не нужно загружать изображение во время создания 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);
    }    
}
12 голосов
/ 04 июня 2017

Если вы ищете быстрое решение для загрузки изображений по HTTPS, вам может заинтересовать бесплатный сервис обратного прокси по номеру https://images.weserv.nl/. Это было именно то, что я искал.

Если вы ищете платное решение, я ранее использовал Cloudinary.com, который также хорошо работает, но, на мой взгляд, слишком дорог, исключительно для этой задачи.

3 голосов
/ 14 июня 2010

Я не знаю, подойдет ли это для того, что вы делаете, но в качестве быстрого решения я бы "обернул" содержимое http в скрипт https. Например, на вашей странице, которая обслуживается через https, я бы ввел iframe, который заменит ваш RSS-канал, а в атрибуте src iframe поместил URL-адрес скрипта на ваш сервер, который захватывает канал и выводит HTML. скрипт читает канал через http и выводит его через https (таким образом, «оборачивая»)

Просто мысль

2 голосов
/ 14 июня 2010

Что касается вашего второго требования - вы можете использовать событие onerror, т.е.<img onerror="some javascript;"...

Обновление:

Вы также можете попробовать перебрать document.images в DOM.Существует логическое свойство complete, которое вы можете использовать.Я не знаю наверняка, подойдет ли это, но, возможно, стоит исследовать.

0 голосов
/ 02 апреля 2018

Принятый ответ помог мне обновить это как для 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://stackoverflow.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;
}
0 голосов
/ 21 июля 2017

Лучший способ работы для меня

<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" /> 
0 голосов
/ 12 января 2016

Я понимаю, что это старый поток, но один из вариантов - просто удалить часть http: из URL-адреса изображения, чтобы 'http://some/image.jpg' стало' //some/image.jpg '.Это также будет работать с CDN

0 голосов
/ 03 мая 2012

Иногда, как в приложениях Facebook, у нас не может быть незащищенного содержимого на защищенной странице. и мы не можем сделать это содержимое локальным. например, приложение, которое будет загружаться в iFrame, не является простым содержимым, и мы не можем сделать его локальным.

Я думаю, что мы никогда не должны загружать содержимое http в https, также мы не должны возвращать страницу https к http-версии, чтобы предотвратить появление ошибки.

единственный способ обеспечить безопасность пользователя - использовать https-версию всего содержимого, http://developers.facebook.com/blog/post/499/

0 голосов
/ 14 июня 2010

Было бы лучше всего иметь http-контент на https

0 голосов
/ 14 июня 2010

Просто: НЕ ДЕЛАЙТЕ ЭТОГО.Содержимое Http на странице HTTPS небезопасно.Точка.Вот почему IE показывает предупреждение.Избавиться от предупреждения - это глупый подход.

Вместо этого HTTPS-страница должна только содержать HTTPS-контент.Убедитесь, что контент может быть загружен через HTTPS, и укажите ссылку через https, если страница загружена через https.Для внешнего контента это будет означать загрузку и кэширование элементов локально, чтобы они были доступны через https - обязательно.К сожалению, нет пути к этому.

Предупреждение есть по уважительной причине.Шутки в сторону.Потратьте 5 минут на размышления о том, как вы можете захватить показанную https-страницу с пользовательским контентом - вы будете удивлены.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...