এইচটিটিপিএস পৃষ্ঠাগুলিতে এইচটিটিপি বিষয়বস্তু নিয়ে কাজ করা


90

আমাদের কাছে এমন একটি সাইট রয়েছে যা পুরোপুরি এইচটিটিপিএস এর মাধ্যমে অ্যাক্সেস করা থাকে তবে কখনও কখনও প্রদর্শিত হয় এইচটিটিপি হয় এমন বাহ্যিক সামগ্রী (মূলত আরএসএস ফিডের চিত্রগুলি)। আমাদের ব্যবহারকারীর সংখ্যাগরিষ্ঠ অংশও আই 6 এ আটকে আছে।

আমি আদর্শভাবে নিম্নলিখিত দুটি কাজ করতে চাই

  • অনিরাপদ বিষয়বস্তু সম্পর্কে IE সতর্কতা বার্তাটি প্রতিরোধ করুন (যাতে আমি কম হস্তক্ষেপমূলক দেখতে পারি, উদাহরণস্বরূপ চিত্রগুলির পরিবর্তে নীচে ডিফল্ট আইকন দিয়ে)
  • ব্যবহারকারীর কাছে চিত্রগুলির স্থানে এমন কিছু উপস্থাপন করুন যা তারা অন্যথায় দেখতে পারে না; যদি কিছু জেএস থাকত আমি কোন চিত্রটি লোড করা হয়নি তা খুঁজে বের করতে দৌড়াতে পারি এবং তার পরিবর্তে আমাদের একটি চিত্র দিয়ে প্রতিস্থাপন করতে পারি যে দুর্দান্ত হবে।

আমি সন্দেহ করি যে প্রথম লক্ষ্যটি কেবল সম্ভব নয়, তবে দ্বিতীয়টি পর্যাপ্ত হতে পারে।

সবচেয়ে খারাপ পরিস্থিতিটি হ'ল আমি আরএসএস ফিডগুলি পার্স করি যখন আমরা সেগুলি আমদানি করি, ছবিগুলি স্থানীয়ভাবে সংরক্ষণ করি যাতে ব্যবহারকারীরা সেভাবে তাদের অ্যাক্সেস করতে পারে তবে যুক্তিযুক্ত সামান্য লাভের জন্য এটি প্রচুর ব্যথার মতো বলে মনে হয়।

উত্তর:


148

আপনার খারাপ পরিস্থিতিটি আপনি যা ভাবেন তেমন খারাপ নয়।

আপনি ইতিমধ্যে আরএসএস ফিডটি পার্স করছেন, সুতরাং আপনার ইতিমধ্যে ইমেজ ইউআরএল রয়েছে। বলুন আপনার মত একটি চিত্র URL আছে http://otherdomain.com/someimage.jpg। আপনি এই ইউআরএল হিসাবে নতুন করে লিখুন https://mydomain.com/imageserver?url=http://otherdomain.com/someimage.jpg&hash=abcdeafad। এইভাবে, ব্রাউজারটি সর্বদা https- র মাধ্যমে অনুরোধ করে, যাতে আপনি সমস্যা থেকে মুক্তি পান।

পরবর্তী অংশ - একটি প্রক্সি পৃষ্ঠা বা সার্লেট তৈরি করুন যা নিম্নলিখিতগুলি করে -

  1. কোয়েরি স্ট্রিং থেকে url প্যারামিটারটি পড়ুন এবং হ্যাশটি যাচাই করুন
  2. সার্ভার থেকে চিত্রটি ডাউনলোড করুন এবং এটি ব্রাউজারে ফিরে যান
  3. Allyচ্ছিকভাবে, ডিস্কে চিত্রটি ক্যাশে করুন

এই সমাধানের কিছু সুবিধা রয়েছে। এইচটিএমএল তৈরি করার সময় আপনাকে চিত্রটি ডাউনলোড করতে হবে না। আপনার স্থানীয়ভাবে ছবিগুলি সংরক্ষণ করতে হবে না। এছাড়াও, আপনি রাষ্ট্রহীন; ইউআরএলে চিত্রটি পরিবেশন করার জন্য প্রয়োজনীয় সমস্ত তথ্য রয়েছে।

অবশেষে, হ্যাশ প্যারামিটারটি সুরক্ষার জন্য; আপনি কেবল চান যে আপনার সার্লেটটি আপনার নির্মিত url গুলির জন্য চিত্র সরবরাহ করতে পারে। সুতরাং, আপনি যখন ইউআরএল তৈরি করবেন তখন md5(image_url + 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);
    }    
}

4
খুব সুন্দর, এবং আমি মনে করি এটিই আমি রোল করব। আমরা পিএইচপি ব্যবহার করছি, তবে বাস্তবায়নও তুচ্ছ হবে। আমি আমাদের পাশেও ক্যাচিং বাস্তবায়ন করব, যেহেতু প্রতিবার কেউ যখন অনুরোধ করবে (পারফরম্যান্স এবং ব্যান্ডউইথ ব্যবহারের জন্য) আমি ছবিটি ডাউনলোড করতে চাই না। সুরক্ষা পদ্ধতির জন্য পরামর্শগুলি দুর্দান্ত (যদিও আমরা আমাদের মানক সুরক্ষা মডেলটি উপরের হিসাবেও প্রয়োগ করব)। আপনার পরামর্শের জন্য ধন্যবাদ.
এল ইয়োব

33
এই পদ্ধতির একমাত্র গুরুতর অসুবিধা হ'ল আপনি নিজের সিস্টেমের মাধ্যমে সমস্ত বাহ্যিক সংস্থানকে রুট করছেন। যা কেবল দায়বদ্ধতা নয়, বরং ব্যয়বহুলও হতে পারে।
টিম মোলেন্ডিজক

আমি দ্বিতীয় টিমমোলেনডিজকে যুক্ত করে যোগ করেছি যে এটি কেবল ব্যয় এবং রক্ষণাবেক্ষণের যোগ করে না তবে এমন কোনও সিডিএনও পরাস্ত করে যা নিকটবর্তী সার্ভারগুলিতে যেতে বা নিষ্ক্রিয় ব্যক্তিদের ভারসাম্য বজায় রাখার কথা বলে।
লেভেন্ত পঞ্চজেল

4
নোডজেএস এর সমাধান কী?
stkvtflw

4
@ টিমমোলেনডিজকের জন্য আর একটি +1 তবে এর সমাধান কী হবে? এইচটিটিপিএস-এর মাধ্যমে পরিবেশন করা সাইটটি এইচটিটিপি-র মাধ্যমে বিতরণ করা চিত্রগুলির সাথে ভাল খেলবে বলে মনে হচ্ছে না
ফুলস্ট্যাকফোর্জার

16

আপনি যদি এইচটিটিপিএস-এর মাধ্যমে চিত্রগুলি লোড করার একটি দ্রুত সমাধান খুঁজছেন তবে https://images.weserv.nl/ এ ফ্রি বিপরীত প্রক্সি পরিষেবাটি আপনার আগ্রহী হতে পারে। এটা ঠিক আমি যা খুঁজছিলাম ছিল।

যদি আপনি কোনও প্রদত্ত সমাধানের সন্ধান করেন তবে আমি এর আগে ক্লাউডাইনারি ডট কম ব্যবহার করেছি যা আমার মতে এই কাজটির জন্য খুব ব্যয়বহুল।


ধরাটা কী? দুর্দান্ত কাজ করে
জ্যাক

4
@ জ্যাকনিচলসন আমি এটি 2 বছর ধরে তুলনামূলকভাবে ভারী বোঝার নিচে ব্যবহার করছি। দুর্দান্ত কাজ! দুই দেবকে কুদোস।
nullable

আমার কিছু লিঙ্ক আছে (ভিডিও বা সাইট) যা এইচটিটিপি দিয়ে শুরু হয় এবং আমি আমাদের https সাইটে কোনও ইফ্রামে এগুলি প্রদর্শন করতে অক্ষম। এটি ননসিকিউর লিঙ্ক হিসাবে এটি কাজ করছে না। একটি চিত্রের জন্য, আমি ইমেজ ক্যাশে ব্যবহার করে সমস্যার সমাধান করেছি। যে কোনও ধারণা আছে
int14

@ int14 আপনাকে http সাইটের জন্য একটি বিপরীত প্রক্সি স্থাপন করতে হবে, আপনি AWS API গেটওয়ের মতো কিছু দিয়ে এটি করতে পারেন।
nullable

3

আপনি যা করছেন তা এটি ফিট করে কিনা আমি জানি না তবে দ্রুত সমাধান হিসাবে আমি https স্ক্রিপ্টে http সামগ্রীটি "মোড়ানো" করব। উদাহরণস্বরূপ, আপনার পৃষ্ঠায় যা https এর মাধ্যমে পরিবেশন করা হয় আমি একটি iframe প্রবর্তন করব যা আপনার আরএসএস ফিডকে প্রতিস্থাপন করবে এবং iframe এর src এট্রে আপনার সার্ভারে একটি স্ক্রিপ্টের url রাখবে যা ফিড ক্যাপচার করে এবং এইচটিএমএল আউটপুট দেয়। স্ক্রিপ্টটি HTTP- র মাধ্যমে ফিডটি পড়ছে এবং https এর মাধ্যমে আউটপুট করে (এভাবে "মোড়ানো")

শুধু একটি ভাবনা


আমার কাছে মনে হয় যে এটি এখন আমি যেমন আছি তেমন অবস্থায় আমাকে ছেড়ে চলে যাবে; আমি ইতিমধ্যে এইচটিটিপিএস পৃষ্ঠায় লিখিত সামগ্রীটি দেখিয়ে দিচ্ছি - সমস্যাটি হ'ল http: // src মান সহ সামগ্রীটিতে <img> ট্যাগ রয়েছে - যা প্রদর্শিত হয় না এবং বিরক্তিকর বার্তা দেখা দেয়।
এল ইয়োব

ঠিক আছে, হ্যাঁ, আপনি যদি চিত্রগুলির মূল লিঙ্কগুলি রাখেন তবে সমস্যাটি এড়ানোর কোনও উপায় নেই। মোড়কের স্ক্রিপ্টে চিত্রগুলির জন্য আরএসএস ফিডের সামগ্রী স্ক্যান করতে হবে এবং সেগুলি সরিয়ে ফেলতে হবে। যেমন আপনি অন্য একটি মন্তব্যে উল্লেখ করেছেন - আপনি যে সামগ্রীটি পপআপের কারণ হয়ে থাকে সেটি লোড করতে এবং পরিবর্তে তথ্যমূলক কিছু দেখাতে চান না। এটি "মাঝখানে স্ক্রিপ্ট" এর কারণ
hndcrftd

এমনকি আপনি আপনার প্রধান ব্যাকএন্ড স্ক্রিপ্টে, iframe ছাড়াই এটি করতে পারেন, তবে এই ক্ষেত্রে আপনি আরএসএস ফিডটি প্রক্রিয়াজাত হওয়ার আগে ফিরে আসার এবং একটি পৃষ্ঠায় আউটপুট দেওয়ার জন্য অপেক্ষা করছেন। আমি একটি আইফ্রেম করব যাতে আপনার পৃষ্ঠাটি আরএসএস ফিডের সাথে তাত্পর্যপূর্ণভাবে লোড হয়। আইফ্রেম এড়াতে যদি আপনি সেখানে যেতে চান তবে এজ্যাক্স অপশনও রয়েছে। শুধু কৌতূহলী - আপনার ব্যাকএন্ড প্ল্যাটফর্মটি কী?
hndcrftd

2

আপনার দ্বিতীয় প্রয়োজনীয়তা সম্পর্কে - আপনি সম্ভবত অনারর ইভেন্টটি ব্যবহার করতে সক্ষম হতে পারেন। <img onerror="some javascript;"...

হালনাগাদ:

আপনি ডোমেও পুনরাবৃত্তি করতে চেষ্টা করতে পারেন document.images। এখানে একটি completeবুলিয়ান সম্পত্তি রয়েছে যা আপনি ব্যবহার করতে সক্ষম হতে পারেন। এটি উপযুক্ত হবে কিনা তা আমি নিশ্চিতভাবে জানি না তবে এটি তদন্তের পক্ষে উপযুক্ত।


আকর্ষণীয়, আমি এমনকি জানি না সেখানে ছিল একটি onerror ইভেন্ট। আমাকে এইচটিএমএলটি আবার লিখতে হবে (যেমন এটি কোনও বাহ্যিক উত্স থেকে আসছে) তবে এটি ইতিমধ্যে এইচটিএমএল পিউরিফায়ার দিয়ে স্যানিটাইজ করা হচ্ছে, তাই ফিল্টার হিসাবে যুক্ত করা সম্ভব হতে পারে।
এল ইয়াবো

জাভাস্ক্রিপ্টে কিছু করার সুযোগ পাওয়ার আগে কোনও ব্রাউজারের সুরক্ষা সতর্কতা কি ঘটবে না?
মিঃ হোয়াইট

0

Https এ কেবলমাত্র http লিখিত সামগ্রী থাকা ভাল


4
যদি আমি আমার প্রশ্নে এটি পরিষ্কার না করি তবে এইচটিটিপি বিষয়বস্তু অন্য ব্যক্তির সার্ভারের নয় আমার। বিশেষত, এটি এইচটিএমএলে <img> লিঙ্কগুলি যা আমি আরএসএস ফিডগুলি থেকে পুনরুদ্ধার করেছি। আমি এখন প্রশ্নে এই জোর দিয়েছি।
এল ইয়োব


0

কখনও কখনও ফেসবুক অ্যাপ্লিকেশনগুলির মতো আমাদের সুরক্ষিত পৃষ্ঠায় অ-সুরক্ষিত সামগ্রী থাকতে পারে না। এছাড়াও আমরা সেই সামগ্রীগুলি স্থানীয় করতে পারি না। উদাহরণস্বরূপ এমন অ্যাপ্লিকেশন যা আইফ্রেমে লোড হবে এটি কোনও সাধারণ সামগ্রী নয় এবং আমরা এটিকে স্থানীয় করতে পারি না।

আমি মনে করি আমাদের কখনই https তে লিখিত সামগ্রী লোড করা উচিত নয়, ত্রুটি কথোপকথন রোধ করতে আমাদের https পৃষ্ঠাটি HTTP সংস্করণে ফ্যালব্যাক করা উচিত নয়।

ব্যবহারকারীর সুরক্ষা নিশ্চিত করার একমাত্র উপায় হ'ল সমস্ত সামগ্রীর https সংস্করণ ব্যবহার করা, http://developers.facebook.com/blog/post/499/


4
এটি ফেসবুকের মাধ্যমে সম্ভব হতে পারে তবে সমস্ত সামগ্রীর জন্য নয় এবং এই প্রশ্নটি ফেসবুক সম্পর্কে নয়।
এল ইয়াবো

0

গ্রহণযোগ্য উত্তর আমাকে পিএইচপি পাশাপাশি সিওআরএস এ উভয় আপডেট করতে সহায়তা করেছে, তাই আমি ভেবেছিলাম যে আমি অন্যদের জন্য সমাধানটি অন্তর্ভুক্ত করব:

খাঁটি পিএইচপি / এইচটিএমএল:

<?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>

চিত্র সংরক্ষণ.এফপি দেখুন সিওআরএস-এর আরও তথ্যের জন্য http://stackoverflow.com/questions/8719276/cors-with-php-headers?noredirect=1&lq=1 দেখুন

<?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;
}

-2

সহজভাবে: এটি করবেন না। এইচটিটিপিএস পৃষ্ঠার মধ্যে এইচটিপি বিষয়বস্তু অন্তর্নিহিত সুরক্ষিত। পয়েন্ট। এজন্য আইই একটি সতর্কতা দেখায়। সতর্কতা থেকে মুক্তি পাওয়া একটি বোকা হোগওয়াশ পদ্ধতির।

পরিবর্তে, এইচটিটিপিএস পৃষ্ঠাটি কেবল হওয়া উচিত HTTPS সামগ্রী থাকতে হবে। এইচটিটিপিএসের মাধ্যমেও সামগ্রীটি লোড করা যায় তা নিশ্চিত করুন এবং পৃষ্ঠাটি https এর মাধ্যমে লোড করা থাকলে https এর মাধ্যমে রেফারেন্স করুন। বাহ্যিক সামগ্রীর জন্য এর অর্থ স্থানীয়ভাবে উপাদানগুলি লোড করা এবং ক্যাশে করা হবে যাতে তারা https- এর মাধ্যমে উপলব্ধ থাকে - নিশ্চিত। দুঃখের সাথে এর আশেপাশে কোনও উপায় নেই।

সতর্কতা একটি ভাল কারণে আছে। গম্ভীরভাবে। আপনি কীভাবে কাস্টম সামগ্রী সহ https দেখানো পৃষ্ঠায় নিয়ে যেতে পারেন তা ভেবে 5 মিনিট ব্যয় করুন - আপনি অবাক হয়ে যাবেন।


4
সহজ সেখানে, আমি সচেতন যে এর একটি ভাল কারণ আছে; আমি মনে করি যে আইআই এর আচরণ এ ক্ষেত্রে এফএফ চেয়ে ভাল। আমি যা লক্ষ্য করছি তা বিষয়বস্তু লোড করা নয় ; আমি কেবল অনুপ্রবেশকারী পপআপ শৈলীর সতর্কতা এড়াতে এবং সামগ্রীর জায়গায় তথ্যবহুল কিছু দেখাতে চাই।
এল ইয়াবো

4
এর জন্য কোনও সুযোগ নেই - যদি না আপনি বেরোনোর ​​পথে এইচটিএমএলটি পুনরায় লেখেন। যে কোনও জাভাস্ক্রিপ্ট পোস্ট লোডের চেষ্টা ইতিমধ্যে সংলাপটি দেখিয়েছে।
টমটম

তিনি কেবল চিত্রগুলি সম্পর্কে জিজ্ঞাসা করেছিলেন এবং তিনি কোনও সুরক্ষিত পাঠ্য বা স্ক্রিপ্টের জন্য অনুরোধ করছেন না যাতে আমরা url পুনরায় লিখে সতর্কতাটি পাস করতে পারি pass
জয়পাল চন্দ্রন

4
উত্তরের কোনও পরিবর্তন নেই। চিত্রগুলিও নিরাপত্তাহীন হতে পারে। এটি সাধারণ জিনিস - হয় এটি সুরক্ষিত উত্স থেকে আসছে, মাঝারি আক্রমণে অরিতকে প্রতিস্থাপন করা হতে পারে।
টমটম

8
ডাউনভোটেড কারণ এই "উত্তর" কীভাবে ওপির লক্ষ্য অর্জন করতে পারে তার উত্তর দেয় না।
মাইকস্কিঙ্কেল 21

-3

আমি বুঝতে পারি যে এটি একটি পুরানো থ্রেড তবে একটি বিকল্প হ'ল চিত্র: URL টি থেকে http: অংশটি সরিয়ে ফেলতে হবে যাতে ' http: //some/image.jpg ' '//some/image.jpg' হয়ে যায়। এটি সিডিএনগুলির সাথেও কাজ করবে


7
এটি কখনও কখনও কাজ করবে এবং কখনও কখনও না; এটি নির্ভর করে যে প্রবাহের সামগ্রীটি HTTPS এর মাধ্যমে উপলব্ধ। তা না হলে তা কেবল ভেঙে যাবে।
এল ইয়োব

-3

আমার জন্য সেরা উপায় কাজ

<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" /> 
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.