एचटीटीपीएस पृष्ठों में HTTP सामग्री के साथ काम करना

Question 1

हमारे पास एक ऐसी साइट है जो पूरी तरह से HTTPS तक पहुंचती है, लेकिन कभी-कभी बाहरी सामग्री प्रदर्शित करती है जो HTTP (आरएसएस फ़ीड से चित्र, मुख्य रूप से) है। हमारे उपयोगकर्ताओं के विशाल बहुमत भी IE6 पर अटके हुए हैं।

मैं आदर्श रूप से निम्नलिखित दोनों को करना चाहूंगा

असुरक्षित सामग्री के बारे में IE चेतावनी संदेश को रोकें (ताकि मैं कम घुसपैठ दिखा सकूं, जैसे नीचे दिए गए डिफ़ॉल्ट आइकन के साथ छवियों को बदलकर)
उन छवियों के स्थान पर उपयोगकर्ताओं के लिए कुछ उपयोगी प्रस्तुत करें जिन्हें वे अन्यथा नहीं देख सकते हैं; अगर कुछ जेएस था तो मैं यह पता लगाने के लिए दौड़ सकता हूं कि कौन सी छवियां लोड नहीं हुई हैं और उन्हें हमारी जगह एक छवि के साथ बदल दें, जो बहुत अच्छा होगा।

मुझे संदेह है कि पहला उद्देश्य केवल संभव नहीं है, लेकिन दूसरा पर्याप्त हो सकता है।

सबसे खराब स्थिति यह है कि मैं आरएसएस फ़ीड को पार्स करता हूं जब हम उन्हें आयात करते हैं, छवियों को स्थानीय स्तर पर संग्रहीत करते हैं ताकि उपयोगकर्ता उन्हें इस तरह से एक्सेस कर सकें, लेकिन यह काफी कम लाभ के लिए बहुत दर्द की तरह लगता है।

Question 2

आपका सबसे खराब मामला उतना बुरा नहीं है जितना आप सोचते हैं।

आप पहले से ही आरएसएस फ़ीड को पार्स कर रहे हैं, इसलिए आपके पास पहले से ही छवि URL हैं। मान लें कि आपके पास एक छवि URL जैसा है http://otherdomain.com/someimage.jpg। आप इस URL को फिर से लिखें https://mydomain.com/imageserver?url=http://otherdomain.com/someimage.jpg&hash=abcdeafad। इस तरह, ब्राउज़र हमेशा https पर अनुरोध करता है, जिससे आपको समस्याओं से छुटकारा मिलता है।

अगला भाग - एक प्रॉक्सी पृष्ठ या सर्वलेट बनाएं जो निम्नलिखित कार्य करता है -

क्वेरी स्ट्रिंग से url पैरामीटर पढ़ें, और हैश सत्यापित करें
सर्वर से छवि डाउनलोड करें, और इसे वापस ब्राउज़र पर प्रॉक्सी करें
वैकल्पिक रूप से, डिस्क पर छवि को कैश करें

इस उपाय के कुछ फायदे हैं। Html बनाने के समय आपको इमेज डाउनलोड नहीं करनी है। आपको छवियों को स्थानीय रूप से संग्रहीत करने की आवश्यकता नहीं है। इसके अलावा, आप स्टेटलेस हैं; url में छवि की सेवा के लिए आवश्यक सभी जानकारी शामिल है।

अंत में, हैश पैरामीटर सुरक्षा के लिए है; आप केवल अपने सर्वलेट को आपके द्वारा बनाए गए यूआरएल के लिए छवियों की सेवा करना चाहते हैं। इसलिए, जब आप url बनाते हैं, तो गणना करें md5(image_url + secret_key)और इसे हैश पैरामीटर के रूप में जोड़ें। इससे पहले कि आप अनुरोध परोसें, हैश को पुनः स्थापित करें और इसकी तुलना करें कि आपको क्या पारित किया गया था। चूंकि secret_key केवल आपके लिए जाना जाता है, कोई और मान्य url का निर्माण नहीं कर सकता है।

यदि आप जावा में विकसित कर रहे हैं, तो सर्वलेट कोड की कुछ पंक्तियाँ हैं। आपको किसी अन्य बैक-एंड तकनीक पर नीचे दिए गए कोड को पोर्ट करने में सक्षम होना चाहिए।

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

Question 3

यदि आप HTTPS पर छवियों को लोड करने के लिए एक त्वरित समाधान की तलाश कर रहे हैं तो https://images.weserv.nl/ पर मुफ्त रिवर्स प्रॉक्सी सेवा आपको रुचि दे सकती है। मुझे ठीक इसी की तलाश थी।

यदि आप सशुल्क समाधान की तलाश कर रहे हैं, तो मैंने पहले Cloudinary.com का उपयोग किया है जो अच्छी तरह से काम करता है, लेकिन इस कार्य के लिए बहुत महंगा है, मेरी राय में।

Question 4

मुझे नहीं पता कि यह आपके लिए उपयुक्त है या नहीं, लेकिन एक त्वरित समाधान के रूप में मैं http सामग्री को एक https स्क्रिप्ट में "लपेट" दूंगा। उदाहरण के लिए, आपके पेज पर जिसे मैं https के माध्यम से परोसा जाता है, एक iframe पेश करेगा जो आपके rss फ़ीड को बदल देगा और iframe के src attr में आपके सर्वर पर एक स्क्रिप्ट का url डाल देगा जो फ़ीड को कैप्चर करता है और html को आउटपुट करता है। स्क्रिप्ट http के माध्यम से फ़ीड पढ़ रहा है और इसे https के माध्यम से आउटपुट करता है (इस प्रकार "रैपिंग")

सिर्फ एक विचार

Question 5

अपनी दूसरी आवश्यकता के बारे में - आप ऑनरर ईवेंट का उपयोग करने में सक्षम हो सकते हैं, अर्थात। <img onerror="some javascript;"...

अपडेट करें:

तुम भी document.imagesडोम में के माध्यम से पुनरावृत्ति की कोशिश कर सकते हैं । एक completeबूलियन संपत्ति है जिसे आप उपयोग करने में सक्षम हो सकते हैं। मैं यह सुनिश्चित करने के लिए नहीं जानता कि यह उपयुक्त होगा, लेकिन जांच के लायक हो सकता है।

Question 6

यह सबसे अच्छा होगा बस https पर http कंटेंट हो

Question 7

कभी-कभी फेसबुक ऐप्स की तरह हम सुरक्षित पेज में गैर-सुरक्षित सामग्री नहीं रख सकते। इसके अलावा, हम उन सामग्रियों को स्थानीय नहीं बना सकते हैं। उदाहरण के लिए एक ऐप जो iFrame में लोड होगा वह एक साधारण सामग्री नहीं है और हम इसे स्थानीय नहीं बना सकते हैं।

मुझे लगता है कि हमें कभी भी http कंटेंट को https में लोड नहीं करना चाहिए, साथ ही हमें एरर डायलॉग को रोकने के लिए https पेज को http वर्जन पर वापस नहीं करना चाहिए।

एकमात्र तरीका जो उपयोगकर्ता की सुरक्षा सुनिश्चित करेगा, वह सभी सामग्रियों के https संस्करण, http://developers.facebook.com/blog/post/499/ का उपयोग करेगा।

Question 8

स्वीकृत उत्तर ने मुझे 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 ?>" />

जावास्क्रिप्ट / 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>

images.php देखें http://stackoverflow.com/questions/8719276/cors-with-php-headers?noredirect=1&lq=1 for 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;
}

Question 9

बस: यह मत करो। HTTPS पेज के भीतर Http कंटेंट स्वाभाविक रूप से असुरक्षित है। बिंदु। यही कारण है कि IE एक चेतावनी दिखाता है। चेतावनी से छुटकारा पाना एक मूर्ख हॉगवाश दृष्टिकोण है।

इसके बजाय, एक HTTPS पेज ही चाहिए HTTPS सामग्री । सुनिश्चित करें कि सामग्री को HTTPS के माध्यम से भी लोड किया जा सकता है, और इसे https के माध्यम से संदर्भित करें यदि पृष्ठ को https के माध्यम से लोड किया गया है। बाहरी सामग्री के लिए इसका मतलब स्थानीय स्तर पर तत्वों को लोड करना और कैशिंग करना होगा ताकि वे https - ज़रूर उपलब्ध हों। उसके आसपास कोई रास्ता नहीं, दुख की बात है।

चेतावनी एक अच्छे कारण के लिए है। गंभीरता से। 5 मिनट यह सोचकर खर्च करें कि आप कस्टम सामग्री के साथ https दिखाए गए पृष्ठ पर कैसे ले जा सकते हैं - आपको आश्चर्य होगा।

Question 10

मुझे एहसास है कि यह एक पुराना धागा है, लेकिन एक विकल्प सिर्फ http: part को इमेज URL से निकालने का है ताकि ' http: //some/image.jpg ' ' //some/image.jpg ' बन जाए। यह CDN के साथ भी काम करेगा

Question 11

मेरे लिए सबसे अच्छा तरीका है काम

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