it-roy-ru.com

Работа с содержимым HTTP на страницах HTTPS

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

В идеале я хотел бы сделать оба следующих

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

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

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

86
El Yobo

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

Вы уже анализируете канал 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);
    }    
}
145
Sripathi Krishnan

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

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

11
nullable

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

Просто мысль

3
Raine

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

Обновление:

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

2
UpTheCreek

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

0
Daniel

Принятый ответ помог мне обновить его как до 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
CFP Support

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

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

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

0
Mohammad Ali Akbari