HTTPS 페이지에서 HTTP 콘텐츠 다루기

HTTPS 페이지에서 HTTP 콘텐츠 다루기

---

전적으로 HTTPS를 통해 액세스되는 사이트가 있지만 때로는 HTTP (주로 RSS 피드의 이미지) 인 외부 콘텐츠 를 표시 합니다. 대다수의 사용자도 IE6에 갇혀 있습니다.

이상적으로는 다음 두 가지를 모두 수행하고 싶습니다.

• 안전하지 않은 콘텐츠에 대한 IE 경고 메시지를 방지합니다 (예 : 이미지를 아래와 같이 기본 아이콘으로 대체하여 덜 방해가되는 콘텐츠를 표시 할 수 있음).
• 다른 방법으로는 볼 수없는 이미지 대신 사용자에게 유용한 것을 제시하십시오. JS가 있다면 어떤 이미지가로드되지 않았는지 알아 내고 대신 우리의 이미지로 대체하면 좋을 것입니다.

첫 번째 목표는 불가능하다고 생각하지만 두 번째 목표는 충분할 수 있습니다.

최악의 시나리오는 RSS 피드를 가져올 때 구문 분석하고 이미지를 로컬에 저장하여 사용자가 그런 식으로 액세스 할 수 있도록하는 것입니다.

---

최악의 시나리오는 생각만큼 나쁘지 않습니다.

이미 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에는 이미지를 제공하는 데 필요한 모든 정보가 포함되어 있습니다.

마지막으로 해시 매개 변수는 보안을위한 것입니다. 서블릿이 작성한 URL에 대한 이미지 만 제공하기를 원합니다. 따라서 URL을 만들 때 계산 md5(image_url + secret_key)하고 해시 매개 변수로 추가하십시오. 요청을 처리하기 전에 해시를 다시 계산하고 전달 된 것과 비교하십시오. secret_key는 본인 만 알고 있으므로 다른 사람은 유효한 URL을 구성 할 수 없습니다.

Java로 개발하는 경우 Servlet은 코드 몇 줄에 불과합니다. 다른 백엔드 기술에서 아래 코드를 이식 할 수 있어야합니다.

/*
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);
    }    
}

---

If you're looking for a quick solution to load images over HTTPS then the free reverse proxy service at https://images.weserv.nl/ may interest you. It was exactly what I was looking for.

If you're looking for a paid solution, I have previously used Cloudinary.com which also works well but is too expensive solely for this task, in my opinion.

---

I don't know if this would fit what you are doing, but as a quick fix I would "wrap" the http content into an https script. For instance, on your page that is served through https i would introduce an iframe that would replace your rss feed and in the src attr of the iframe put a url of a script on your server that captures the feed and outputs the html. the script is reading the feed through http and outputs it through https (thus "wrapping")

Just a thought

---

Regarding your second requirement - you might be able to utilise the onerror event, ie. <img onerror="some javascript;"...

Update:

You could also try iterating through document.images in the dom. There is a complete boolean property which you might be able to use. I don't know for sure whether this will be suitable, but might be worth investigating.

---

It would be best to just have the http content on https

---

Sometimes like in facebook apps we can not have non-secure contents in secure page. also we can not make local those contents. for example an app which will load in iFrame is not a simple content and we can not make it local.

I think we should never load http contents in https, also we should not fallback https page to http version to prevent error dialog.

the only way which will ensure user's security is to use https version of all contents, http://developers.facebook.com/blog/post/499/

---

The accepted answer helped me update this both to PHP as well as CORS, so I thought I would include the solution for others:

pure 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 see http://stackoverflow.com/questions/8719276/cors-with-php-headers?noredirect=1&lq=1 for more on 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;
}

---

Simply: DO NOT DO IT. Http Content within a HTTPS page is inherently insecure. Point. This is why IE shows a warning. Getting rid of the warning is a stupid hogwash approach.

Instead, a HTTPS page should only have HTTPS content. Make sure the content can be loaded via HTTPS, too, and reference it via https if the page is loaded via https. For external content this will mean loading and caching the elements locally so that they are available via https - sure. No way around that, sadly.

The warning is there for a good reason. Seriously. Spend 5 minutes thinking how you could take over a https shown page with custom content - you will be surprised.

---

I realise that this is an old thread but one option is just to remove the http: part from the image URL so that 'http://some/image.jpg' becomes '//some/image.jpg'. This will also work with CDNs

---

Best way work for me

<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" /> 

참고URL : https://stackoverflow.com/questions/3011222/dealing-with-http-content-in-https-pages