javascript - सुरक्षा त्रुटि: क्रॉस-मूल फ्रेम तक पहुंचने से मूल के साथ एक फ्रेम को अवरुद्ध कर दिया




jquery iframe (3)

मैं अपने HTML पृष्ठ में एक <iframe> लोड कर रहा हूं और जावास्क्रिप्ट का उपयोग कर इसके तत्वों तक पहुंचने का प्रयास कर रहा हूं, लेकिन जब मैं अपना कोड निष्पादित करने का प्रयास करता हूं, तो मुझे निम्न त्रुटि मिलती है:

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

क्या आप कृपया मुझे समाधान खोजने में मदद कर सकते हैं ताकि मैं फ्रेम में तत्वों तक पहुंच सकूं?

मैं परीक्षण के लिए इस कोड का उपयोग कर रहा हूँ, लेकिन व्यर्थ में:

$(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                                             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() का उपयोग करके window.open() द्वारा उत्पन्न कोई भी नई विंडो भी लागू की जा सकती है।

अपने ब्राउज़र में समान मूल नीति को अक्षम करना

इस विषय के बारे में पहले से ही कुछ अच्छे उत्तर हैं (मैंने उन्हें अभी भी गुगल पाया है), इसलिए, जहां ब्राउज़रों के लिए यह संभव है, मैं सापेक्ष उत्तर को लिंक करूंगा। हालांकि, कृपया याद रखें कि समान मूल नीति (या सीओआरएस) को अक्षम करने से केवल आपके ब्राउज़र को प्रभावित होगा । साथ ही, एक ही मूल सुरक्षा सेटिंग्स वाले ब्राउज़र को चलाने से किसी भी वेबसाइट को क्रॉस-मूल संसाधनों तक पहुंच प्रदान की जाती है, इसलिए यह बहुत असुरक्षित है और केवल विकास उद्देश्यों के लिए किया जाना चाहिए



X-Frame-Options लिए http://www.<domain>.com Domain http://www.<domain>.com कॉन्फ़िगरेशन के लिए डोमेन के वेब सर्वर की जांच करें यह एक सुरक्षा सुविधा है जो क्लिक जैकिंग हमलों को रोकने के लिए डिज़ाइन की गई है,

क्लिक जैकिंग कैसे काम करता है?

  1. बुरा पृष्ठ पीड़ित पृष्ठ की तरह दिखता है।
  2. फिर उसने उपयोगकर्ताओं को अपना उपयोगकर्ता नाम और पासवर्ड दर्ज करने के लिए धोखा दिया।

तकनीकी रूप से बुराई पीड़ित पृष्ठ के स्रोत के साथ एक 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 // केवल मेरे अपने डोमेन को एक आईफ्रेम के अंदर अपना HTML प्रस्तुत करने की अनुमति देता है।
  2. डेनी // किसी भी आईफ्रेम के अंदर मेरे एचटीएमएल को प्रस्तुत करने की अनुमति न दें
  3. " https://example.com/ से अनुमति दें" // // विशिष्ट डोमेन को आईफ़्रेम के अंदर अपना HTML प्रस्तुत करने की अनुमति दें

यह आईआईएस कॉन्फ़िगरेशन उदाहरण है:

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

सवाल का समाधान

यदि वेब सर्वर ने सुरक्षा सुविधा को सक्रिय किया है तो यह क्लाइंट-साइड सुरक्षा त्रुटि का कारण बन सकता है।







same-origin-policy