javascript - নিরাপত্তা ত্রুটি: ক্রস-মূল ফ্রেম অ্যাক্সেস থেকে মূল সঙ্গে একটি ফ্রেম অবরোধ




jquery iframe (4)

আমি আমার এইচটিএমএল পৃষ্ঠায় একটি <iframe> লোড করছি এবং জাভাস্ক্রিপ্ট ব্যবহার করে তার মধ্যে উপাদানগুলি অ্যাক্সেস করার চেষ্টা করছি, কিন্তু যখন আমি আমার কোডটি চালানোর চেষ্টা করি, তখন আমি নিম্নলিখিত ত্রুটিটি পাব:

SecurityError: Blocked a frame with origin "http://www.<domain>.com" from accessing a cross-origin frame.

আপনি সমাধান পেতে আমাকে সাহায্য করতে পারেন যাতে আমি ফ্রেমের উপাদানগুলি অ্যাক্সেস করতে পারি?

আমি পরীক্ষার জন্য এই কোড ব্যবহার করছি, কিন্তু vain:

$(document).ready(function() {
    var iframeWindow = document.getElementById("my-iframe-id").contentWindow;

    iframeWindow.addEventListener("load", function() {
        var doc = iframe.contentDocument || iframe.contentWindow.document;
        var target = doc.getElementById("my-target-id");

        target.innerHTML = "Found it!";
    });
});

একই মূল নীতি

CORS সঙ্গে বিভ্রান্ত করা হবে না!

আপনি জাভাস্ক্রিপ্ট ব্যবহার করে একটি ভিন্ন মূল সাথে <iframe> অ্যাক্সেস করতে পারবেন না , এটি যদি আপনি করতে পারেন তবে এটি একটি বিশাল নিরাপত্তা ত্রুটি হতে পারে। একই-মূল নীতি ব্রাউজারগুলির জন্য একটি ভিন্ন উত্স সহ ফ্রেমের অ্যাক্সেস করার চেষ্টা করা স্ক্রিপ্টগুলি ব্লক করে

ঠিকানাটির নিম্নোক্ত অংশগুলির মধ্যে একটিতে যদি রক্ষণাবেক্ষণ করা হয় না তবে মূলটি আলাদা বলে মনে করা হয়:

<protocol>://<hostname>:<port>/path/to/page.html 

যদি আপনি একটি ফ্রেম অ্যাক্সেস করতে চান তবে প্রোটোকল , হোস্টনাম এবং পোর্টটি আপনার ডোমেনের একই হতে হবে।

উদাহরণ

http://www.example.com/home/index.html থেকে নিম্নোক্ত URL গুলি অ্যাক্সেস করার চেষ্টা করা হচ্ছে তা এখানে

URL                                             RESULT 
http://www.example.com/home/other.html       -> Success 
http://www.example.com/dir/inner/another.php -> Success 
http://www.example.com:80                    -> Success (default port for HTTP) 
http://www.example.com:2251                  -> Failure: different port 
http://data.example.com/dir/other.html       -> Failure: different hostname 
https://www.example.com/home/index.html.html -> Failure: different protocol 
ftp://www.example.com:21                     -> Failure: different protocol & port 
https://google.com/search?q=james+bond       -> Failure: different hostname & protocol 

কার্যসংক্রান্ত

যদিও একই উত্স নীতি একটি ভিন্ন উত্স সহ সাইটগুলির সামগ্রী অ্যাক্সেস করতে স্ক্রিপ্টগুলিকে ব্লক করে তবে আপনি উভয় পৃষ্ঠাগুলির মালিক হন তবে window.postMessage message এবং এর সম্পর্কিত message ইভেন্টটি ব্যবহার করে আপনি এই সমস্যাটি সমাধান করতে পারেন। এই:

  • আপনার প্রধান পৃষ্ঠায়:

    var frame = document.getElementById('your-frame-id'); 
    
    frame.contentWindow.postMessage(/*any variable or object here*/, '*'); 
  • আপনার <iframe> (প্রধান পৃষ্ঠায় রয়েছে):

    window.addEventListener('message', function(event) { 
    
        // IMPORTANT: Check the origin of the data! 
        if (~event.origin.indexOf('http://yoursite.com')) { 
            // The data has been sent from your site 
    
            // The data sent with postMessage is stored in event.data 
            console.log(event.data); 
        } else { 
            // The data hasn't been sent from your site! 
            // Be careful! Do not use it. 
            return; 
        } 
    }); 

এই পদ্ধতিটি উভয় দিক থেকেই প্রয়োগ করা যেতে পারে, প্রধান পৃষ্ঠায় শ্রোতা তৈরি করা এবং ফ্রেমের প্রতিক্রিয়াগুলি গ্রহণ করা। একই যুক্তিগুলি পপ-আপগুলিতে এবং মূলত মূল পৃষ্ঠাটি তৈরি করা কোনও নতুন উইন্ডোতে প্রয়োগ করা যেতে পারে (যেমন window.open() ব্যবহার করে), কোনও পার্থক্য ছাড়াই।

আপনার ব্রাউজারে একই মূল নীতি নিষ্ক্রিয়

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


আমার জন্য আমি একটি 2-উপায় হ্যান্ডশেক বাস্তবায়ন করতে চেয়েছিলেন, অর্থাত্:
- পিতা-মাতা উইন্ডো দ্রুত আইফ্রেম লোড করবে
- আইফ্রেমটি যত তাড়াতাড়ি তার প্রস্তুত পিতার উইন্ডোতে কথা বলা উচিত
- পিতা-মাতার আইফ্রেম বার্তা এবং পুনরায় চালানোর জন্য প্রস্তুত

এই কোডটি ব্যবহার করে আইফ্রেমে সাদা লেবেল সেট করতে হয় [সিএসএস কাস্টম সম্পত্তি]
কোড:
আইফ্রেম

$(function() {
    window.onload = function() {
        // create listener
        function receiveMessage(e) {
            document.documentElement.style.setProperty('--header_bg', e.data.wl.header_bg);
            document.documentElement.style.setProperty('--header_text', e.data.wl.header_text);
            document.documentElement.style.setProperty('--button_bg', e.data.wl.button_bg);
            //alert(e.data.data.header_bg);
        }
        window.addEventListener('message', receiveMessage);
        // call parent
        parent.postMessage("GetWhiteLabel","*");
    }
});

মাতা

$(function() {
    // create listener
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
    eventer(messageEvent, function (e) {
        // replay to child (iframe) 
        document.getElementById('wrapper-iframe').contentWindow.postMessage(
            {
                event_id: 'white_label_message',
                wl: {
                    header_bg: $('#Header').css('background-color'),
                    header_text: $('#Header .HoverMenu a').css('color'),
                    button_bg: $('#Header .HoverMenu a').css('background-color')
                }
            },
            '*'
        );
    }, false);
});

স্বাভাবিকভাবেই আপনি মূল এবং পাঠকে সীমাবদ্ধ করতে পারেন, এটি কোড-এর সাথে কাজ সহজ
আমি এই পরীক্ষার সহায়ক হতে পাওয়া যায়:
[পোস্টমেসেজ সহ ক্রস ডোমেন মেসেজিং]


শুরু মেনু খুলুন
উইন্ডোজ + আর টাইপ করুন অথবা খুলুন "চালান
নিম্নলিখিত কমান্ড চালান।

chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security

X-Frame-Options জন্য http://www.<domain>.com কনফিগারেশনের জন্য http://www.<domain>.com ওয়েব সার্ভারটি দেখুন এটি ক্লিক জ্যাকিং আক্রমণগুলিকে আটকাতে পরিকল্পিত একটি সুরক্ষা বৈশিষ্ট্য,

কিভাবে কাজ jacking কাজ করে?

  1. মন্দ পাতা ঠিক শিকার পাতা মত দেখায়।
  2. তারপর এটি ব্যবহারকারীদের তাদের ব্যবহারকারীর নাম এবং পাসওয়ার্ড প্রবেশ করতে tricked।

টেকনিক্যালি মন্দের শিকার পৃষ্ঠা থেকে উৎস সঙ্গে একটি iframe আছে।

<html>
    <iframe src='victim_domain.com'/>
    <input id="username" type="text" style="display: none;/>
    <input id="password" type="text" style="display: none;/>
    <script>
        //some JS code that click jacking the user username and input from inside the iframe...
    <script/>
<html>

কিভাবে নিরাপত্তা বৈশিষ্ট্য কাজ করে

আপনি যদি একটি iframe মধ্যে ওয়েব সার্ভারের অনুরোধটি রেন্ডার করা প্রতিরোধ করতে চান তবে x-frame-options

এক্স ফ্রেম অপশন ডেন

বিকল্পগুলি হল:

  1. SAMEORIGIN // শুধুমাত্র আমার নিজের ডোমেইন একটি আইফ্রেম ভিতরে আমার এইচটিএমএল রেন্ডার অনুমতি।
  2. DENY // আমার এইচটিএমএল কোনো আইফ্রেম ভিতরে রেন্ডার করা অনুমতি দেয় না
  3. "অনুমতিপ্রাপ্ত https://example.com/ " // নির্দিষ্ট ডোমেইনের আইফ্রেমের ভিতরে আমার এইচটিএমএল রেন্ডার করার অনুমতি দেয়

এই আইআইএস কনফিগার উদাহরণ:

   <httpProtocol>
       <customHeaders>
           <add name="X-Frame-Options" value="SAMEORIGIN" />
       </customHeaders>
   </httpProtocol>

প্রশ্নের সমাধান

ওয়েব সার্ভারটি সুরক্ষা বৈশিষ্ট্যটি সক্রিয় করলে এটি একটি ক্লায়েন্ট-সাইড সিকিউরিটির ত্রুটি হিসাবে এটি হতে পারে।





same-origin-policy