2012-06-07 19 views
7

जावास्क्रिप्ट की क्रॉस-डोमेन सुरक्षा संकट हल करने के लिए, मैं निम्न विधिनहीं कर सकते पहुँच जे एस समारोह पर्यावरण

डोमेन पर लागू करने कर रहा हूँ [abc.com]

डोमेन abc.com मेरे पास है पर एक पृष्ठ जिसे main_page.html कहा जाता है।

<script> 
function SendMsg(id) 
{ 
    frames["invisible_iframe"].location = "http://xyz.com/invisible_iframe.html#"+id; 
} 
</script> 
<body> 
    <input type="button" id="Test" value="Call iFrame" onclick="SendMsg(this.id);"> 
    <iframe src="ttp://xyz.com/visible_iframe.html" name="visible_iframe" height="250" width="500"></iframe> 
    <iframe name="invisible_iframe" height="0" width="0" style="display:none;"></iframe> 
</body> 

डोमेन [xyz.com]

पर डोमेन xyz.com पर मैं एक पेज visible_iframe.html कहा जाता है - इसकी कोड इस प्रकार है।

<script> 
function Hi() 
{ 
    alert("Hi there!"); 
} 
</script> 
<body> 
    <h1>Visible iFrame on xyz.com 
    <iframe name="d2_invisible_iframe" id="d2_invisible_iframe" class="iFrame" src="http://xyz.com/invisible_iframe.html" height="310" width="520"></iframe> 
</body> 

अब मैं इस प्रकार

<script> 
var sActionText = ""; 
function CheckForMessages() 
{ 
    if(location.hash != sActionText) 
    { 
    sActionText = location.hash; 
    var sAction = ""; 
    var oSplitActionText = sActionText.split("#"); 
    sAction = oSplitActionText[1]; 
    if (sAction == "Test") 
    { 
     parent.Hi(); 
    } 
    } 
} 

setInterval(CheckForMessages, 200); 
</script> 
<body> 
    <h1>Invisible iFrame on xyz.com</h1> 
</body> 

मैं समारोह Hi()invisible_iframe.html से (जो एक ही डोमेन पर है)

invisible_iframe.html का कोड है का उपयोग करना चाहते हैं - अपने कोड इस प्रकार है visible_iframe.html में छिपे हुए आईफ्रेम का उपयोग कर रहा हूं क्योंकि मैं नहीं दिखाना visual_iframe.html का URL बदलना चाहता हूं।

अब मुझे उम्मीद है कि main_page.html पर बटन क्लिक किया गया है, मुझे सतर्क संदेश मिलेगा। लेकिन ऐसा नहीं होता है। फ़ायरफ़ॉक्स में यह कहते हैं - अनुमति संपत्ति का उपयोग करने की 'हाय' से इनकार किया

अजीब बात है जब मैं CheckForMessages() समारोह के बाहर parent.Hi(); शब्दों में कहें, Hi() समारोह पहुँचा जा सकता है और चेतावनी बॉक्स दिखाया गया है।

इसे हल करने के लिए मुझे क्या करना चाहिए?

+0

यदि स्टॉक ओवरफ़्लो का उत्तर नीचे नहीं है, तो नहीं आपकी मदद करें, आप इससे क्या अपेक्षा करते हैं? आपका 'हाय' फ़ंक्शन 'invisible_iframe' के माता-पिता के डोमेन पर नहीं है, यह उसके iframes के अंदर है! तो यहां स्पष्टीकरण दें। शायद मैं उस पर आपकी सहायता कर सकता हूं। – Sepehr

+0

वहां था मेरे प्रश्न में थोड़ा उलझन। मैंने इसे अभी संपादित किया है। असुविधा के लिए बेहद खेद है खिलाडि़यों। – skos

+0

@Sachyn, क्या आपके पास दोनों डोमेन (abc.com + xyz.com) पर HTML फ़ाइलों को संपादित/बनाने की क्षमता है? –

उत्तर

4

easyXDM क्यों उपयोग नहीं कर? इस लाइब्रेरी को आपके जीवन को वास्तव में आसान बनाना चाहिए और क्रॉस डोमेन समस्याओं से निपटने के दौरान सुरक्षा सीमाओं से बचने में मदद करना चाहिए। विशेष रूप से यदि आपके पास दो डोमेन पर नियंत्रण है।

easyXDM एक जावास्क्रिप्ट पुस्तकालय है कि आप करने के लिए एक डेवलपर के रूप में सक्षम बनाता है आसानी से यह आसान संवाद करने के लिए कर रही है, सीमा ही उत्पत्ति नीति द्वारा जगह में सेट को हल करने के बदले में और जावास्क्रिप्ट एपीआई का पर्दाफाश डोमेन सीमाओं के पार है।

वेब अनुप्रयोगों के बीच उपलब्ध क्रॉस-डोमेन संचार के लिए [यह सर्वश्रेष्ठ में से एक है और उपयोग करने के लिए एपीआई आसान है]। easyXDM उपयोग करने में आसान है, हल्के वजन, लचीले, अच्छी गुणवत्ता कोड आदि लिखना आदि। मुझे दृढ़ता से लगता है कि यदि आप क्रॉस डोमेन परिदृश्य के साथ जारी रखने जा रहे हैं, तो आपको easyXDM जैसे मजबूत क्रॉस डोमेन एपिस को अनुकूलित करना चाहिए।

[easyXDM बनाम PostMessage परिवहन?] easyXDM PostMessageTransport विधि का उपयोग करेगा, तो इस सुविधा जैसे (IE8 +, ओपेरा 9+, Firefox 3+, Safari 4 +, क्रोम 2 +) ब्राउज़र से सक्षम है पर दूसरी तरफ यह समर्थित समर्थित ब्राउज़र के लिए विभिन्न परिवहन विधियों का उपयोग करेगा जैसे कि (फ़ायरफ़ॉक्स 1-2 - फ़्रेमएलेमेंट ट्रान्सपोर्ट का उपयोग करके) अन्य परिवहन विधियों का उपयोग फ्लैशट्रांसपोर्ट, नेमट्रांसपोर्ट और हैशट्रांसपोर्ट जैसे आवश्यकतानुसार किया जाएगा)।

यह स्पष्ट रूप से पुराने ब्राउज़र के ब्राउज़र समर्थन के संदर्भ में easyXDM बेहतर बनाता है।


* डोमेन पर:


का उपयोग कर easyXDM (डोमेन 1 [abc.com] एक दूरस्थ डोमेन [xyz.com] पर एक विधि कॉल) क्रॉस-डोमेन का उपयोग प्रदर्शित करने के लिए [abc.com] - मुख्य डोमेन *

<script type="text/javascript"> 
     /** 
     * Request the use of the JSON object 
     */ 
     easyXDM.DomHelper.requiresJSON("../json2.js"); 
    </script> 
    <script type="text/javascript"> 
     var remote; 
     window.onload = function(){ 
      /** 
      * When the window is finished loading start setting up the interface 
      */ 
      remote = new easyXDM.Interface(/** The channel configuration */{ 
       /** 
       * Register the url to hash.html, this must be an absolute path 
       * or a path relative to the root. 
       * @field 
       */ 
       local: "/hash.html", 
       /** 
       * Register the url to the remote interface 
       * @field 
       */ 
       remote: "http://YOUR.OTHER.DOMAIN/YOUR_APPLICATION/YourRemoteApplication.html", 
       /** 
       * Register the DOMElement that the generated IFrame should be inserted into 
       */ 
       container: document.getElementById("embedded") 
      }, /** The interface configuration */ { 
       remote: { 
        remoteApplicationMethod: {}, 
        noOp: { 
         isVoid: true 
        } 
       }, 
       local: { 
        alertMessage: { 
         method: function(msg){ 
          alert(msg); 
         }, 
         isVoid: true 
        } 
       } 
      },/**The onReady handler*/ function(){ 
       /** 
       * Call a method on the other side 
       */ 
       remote.noOp(); 
      }); 
     } 

     function callRemoteApplicationMethod(Value1, Value2){ 
      remote.remoteApplicationMethod(Value1, Value2, function(result){ 
       alert("Results from remote application" + result); 
      }); 
     } 


    </script> 

शरीर

<input type="button" onclick="callRemoteApplicationMethod(3,5)" value="call remoteApplicationMethod on remote domain"/> 

अब अपने दूरस्थ डोमेन की ओर आप के रूप में इस प्रकार है

* डोमेन [xyz.com] पर अपने दूरस्थ क्लाइंट परिभाषित करने की जरूरत है - रिमोट डोमेन *

यह पृष्ठ में जाना चाहिए YOUR_APPLICATION/YourRemoteApplication.html

<script type="text/javascript"> 
     /** 
     * Request the use of the JSON object 
     */ 
     easyXDM.DomHelper.requiresJSON("../json2.js"); 
    </script> 
    <script type="text/javascript"> 
     var channel, remote; 
     /** 
     * When the window is finished loading start setting up the channel 
     */ 
     window.onload = function(){ 

      /** 
      * When the channel is ready we create the interface 
      */ 
      remote = new easyXDM.Interface(/** The channel configuration*/{}, /** The configuration */ { 
       remote: { 
        alertMessage: { 
         isVoid: true 
        } 
       }, 
       local: { 
        remoteApplicationMethod: { 
         method: doSomething(value1, value2){ 
         // do somethigs with values 

         return "i'm return value from remote domain"; 
         } 
        }, 
        noOp: { 
         isVoid: true, 
         method: function(){ 
          alert("Method not returning any data"); 
         } 
        } 
       } 
      }); 
     } 
    </script> 
0

(सिर्फ एक वहाँ टाइपो) अपने इनपुट पर अपने onlcick काम करता है मान लिया जाये कि: invisible_frame से, आप ध्यान देना चाहिए visible_frame 'parent.frames['visible_frame'].Hi() साथ रों Hi()

अभी के लिए, parent.Hi() ताकि आप एक ही मूल नीति की कड़ी छड़ी के साथ poked कर रहे हैं, एक Hi()abc.com के पृष्ठ पर स्थित उपयोग करने के लिए (के रूप में यह है फ्रेम के parent) की कोशिश करता है।

आशा इस मदद करता है और काम करता है;)

+0

दिलचस्प नहीं हैं। मुझे देखने दो कि क्या यह काम कर सकता है। धन्यवाद – skos

+0

क्षमा करें, लेकिन इससे मदद नहीं मिली – skos

+0

@Sachyn 'parent.frames ['visible_frame'] तक पहुंचने का प्रयास करें। Location.href'। यदि यह आपके 'view_frame' के यूआरएल को दिखाता है और दिखाता है, तो इसका मतलब है कि आपको' view_frame' का सही पथ मिल गया है, लेकिन 'हाय' का पथ 'Hi' से कुछ और है, शायद कुछ ' .document.Hi'। –

2

आप इस कारण पर विश्वास नहीं करेंगे। Main_page.html (abc.com) पर आप दो आइफ्रेम परिभाषित करते हैं लेकिन आप उन्हें बंद नहीं करते हैं (</iframe > गुम है)। अब दो मामलों रहे हैं:

केस 1: तो अपने main_page.html कोड

<iframe src="http://xyz.com/visible_iframe.html" ...></iframe> 
<iframe src="http://xyz.com/invisible_iframe.html" ...></iframe> 

होना चाहिए

iframes का स्वतंत्र हैं और invisible_iframe.html से javascript कॉल किया जाना चाहिए

parent.frames["visible_iframe"].Hi(); 

केस 2:

iframes का माता-पिता और बच्चे हैं, इसलिए main_page.html कोड होना चाहिए

<iframe src="http://xyz.com/visible_iframe.html" ...></iframe> 

visible_iframe।एचटीएमएल कोड

<iframe src="http://xyz.com/invisible_iframe.html" ...></iframe> 

शामिल सकता था और invisible_iframe.html से javascript कॉल

parent.Hi(); 

सब है कि होना चाहिए। चुनना आपको है।

+0

मेरे प्रश्न में कुछ अनियमितताओं को पोस्ट करने के लिए बहुत खेद है। मैंने इसे अभी संपादित किया है। – skos

+1

फिर भी यह समस्या नहीं है। समस्या यह है कि आपके स्थानीय कोड में उपर्युक्त अनियमितताएं भी हैं, जो इस तथ्य को बताती हैं कि माता-पिता। हाय() कॉल आपके परीक्षणों में काम करता है। सुधार करें और आप कर चुके हैं। Ultisible_iframe.html स्क्रिप्ट abc.com से main_page.html को पुनः लोड किए बिना केवल एक बार होने के लिए अलर्ट "लॉक" होता है। इसलिए यदि आप परीक्षण के लिए इस व्यवहार को बदलना चाहते हैं, तो main_page.html (यानी <इनपुट प्रकार = "बटन" आईडी = "टेस्ट 2" मान = "कॉल iFrame 2" onclick = "SendMsg (this.id) पर एक और बटन जोड़ें;" > –

3

मुझे लगता है कि पुराने ब्राउज़र को सही करने की कोई ज़रूरत नहीं है, है ना? क्रॉस-उत्पत्ति संचार का समर्थन करने के लिए आप आधुनिक ब्राउज़र में window.postMessage का उपयोग कर सकते हैं।

+0

आईई 8 से आंशिक समर्थन, और अन्य सभी आधुनिक ब्राउज़रों में पूर्ण समर्थन। अधिक जानकारी के लिए यहां देखें: http://caniuse.com/postmessage – gregers

+0

मैं easyXDM समाधान के लिए जाऊंगा क्योंकि यह पोस्ट मैसेज और अन्य परिवहन विधियों का उपयोग करता है ताकि अधिक समर्थन प्राप्त हो सके ब्राउज़रों की विस्तृत श्रृंखला। – Future2020

0

इन तीन फाइलों को सृजित करने का प्रयास करें:

http://abc.com/main.html:

<!DOCTYPE html> 
<html> 
<head> 
    <script> 
    function SendMsg(id) { 
     window.frames.invisible.location = 'http://xyz.com/invisible.html#' + id; 
    } 
    </script> 
</head> 
<body> 
    <input type="button" id="Test" value="Call iFrame" onclick="SendMsg(this.id);"> 
    <iframe src="http://xyz.com/visible.html" name="visible" height="250" width="500"></iframe> 
    <iframe name="invisible" height="0" width="0" style="display:none;"></iframe> 
</body> 
</html> 

http://xyz.com/visible.html:

<!DOCTYPE html> 
<html> 
<head> 
    <script> 
    function Hi() { 
     alert('Hi there!'); 
    } 
    </script> 
</head> 
<body> 
    <h1>Visible on xyz.com</h1> 
</body> 
</html> 

http://xyz.com/invisible.html:

<!DOCTYPE html> 
<html> 
<head> 
    <script> 
    var sActionText = ""; 
    function CheckForMessages() { 
     if (location.hash != sActionText) { 
      sActionText = location.hash; 
      var sAction = ""; 
      var oSplitActionText = sActionText.split("#"); 
      sAction = oSplitActionText[1]; 
      if (sAction == "Test") { 
       parent.frames.visible.Hi(); 
      } 
     } 
    } 
    setInterval(CheckForMessages, 200); 
    </script> 
</head> 
<body> 
    <h1>Invisible on xyz.com</h1> 
</body> 
</html> 

सूचना है कि फ्रेम संरचना है:

parent.frames.visible.Hi() 

आगे चल कर, मैं easyXDM या पार के लिए jQuery postMessage plugin उपयोग करने का सुझाव:

 main 
    /\ 
    / \ 
visible invisible 

और इसलिए आप invisible से visible का उपयोग करने की जरूरत है, आप जाने की जरूरत है पहिया को पुनर्निर्मित करने के बजाय -डोमेन संचार।

0

एक कारण है कि यह आपको same origin policy की वजह से फ़ंक्शन तक पहुंचने नहीं दे रहा है। यदि आप कर सकते हैं तो इससे वास्तविक सुरक्षा समस्याएं पैदा होंगी।

0

CORS (Cross-Origin Resource Sharing) या window.postMessage (संदर्भ: Docs on MDN या किसी अन्य simple postMessage example) निश्चित रूप से जांच कर रही है अगर आप IE7 समर्थन के बारे में परवाह नहीं है लायक हैं; आप पुराने आईई ब्राउज़र के लिए postMessage शिम का भी उपयोग कर सकते हैं।

हालांकि, मैं आपके प्रश्न का अधिक सटीक उत्तर देने के प्रयास में एक आईफ्रेम समाधान के साथ रहूंगा।

दुर्भाग्य से आप क्रॉस डोमेन आईफ़्रेम से parent (window स्कोप) गुण/विधियों तक पहुंचने में सक्षम नहीं होना चाहिए। हालांकि आप किसी भी गहराई पर उसी डोमेन पर iframes के माध्यम से window स्कॉप्स तक पहुंच सकते हैं। इस प्रकार, एक समाधान ऊर्ध्वाधर iframe सुरंगों का लाभ उठाने के लिए है।

आप तीन HTML दस्तावेज़ बनाते हैं:

शीर्ष स्तर - abc.com

<script> 
    function sendMsg(id) { 
     frames["invisible_iframe"].location = "//xyz.com/mid_level.html#" + id; 
    } 

    window.ACTIONS = { 
     Test: function() { 
      alert("hello"); 
      // This action could also start an interaction with another 
      // visible iframe by setting a hash, etc 
     } 
    }; 
</script> 
<input type="button" id="Test" value="Call iFrame" onclick="sendMsg(this.id);"> 
<iframe name="invisible_iframe" height="0" width="0" frameborder="0" style="visibility:hidden;" src="//xyz.com/mid_level.html"></iframe> 

मध्य स्तर - xyz.com

<script> 
    function sendMsg(id) { 
     frames["invisible_iframe"].location = "//abc.com/low_level.html#" + id; 
    } 

    var sActionText = ""; 
    function checkForMessages() { 
     if(location.hash != sActionText) { 
     sActionText = location.hash.replace(/^#/, ""); 
     location.hash = ""; 

     sendMsg(sActionText); 
     } 
    } 

    setInterval(checkForMessages, 20); 
</script> 
<iframe name="invisible_iframe" height="0" width="0" frameborder="0" style="visibility:hidden;" src="//abc.com/low_level.html"></iframe> 

निम्न स्तर - एबीसी ।कॉम

<script> 
    function runActionInTop(action) { 
     try { 
      window.top.ACTIONS[action](); 
     } catch (err) { 
      // Bad action! 
     } 
    } 

    var sActionText = ""; 
    function checkForMessages() { 
     if(location.hash != sActionText) { 
     sActionText = location.hash.replace(/^#/, ""); 
     location.hash = ""; 

     runActionInTop(sActionText); 
     } 
    } 

    setInterval(checkForMessages, 20); 
</script> 

इन तीन iframes का संवाद कर सकते हैं - पहले और तीसरे सीधे संवाद कर सकते हैं और (इस उदाहरण में हैश के माध्यम से) दूसरा परोक्ष रूप से।

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

हाँ, मैं जानता हूँ कि यह जटिल है - कि कारण CORS और postMessage मौजूद :)

मैं भी अपने मूल कोड की कुछ नाबालिग पहलुओं मुझे लगता है कि उनका कहना है लायक हैं बदल दिया है में से एक है:

  • का उपयोग http:// के बजाय // मतलब यह है कि इस प्रणाली http या https पर काम करेंगे।
  • कुछ ब्राउज़रों (मुझे विश्वास है कि मैंने पहली बार सफारी 3 के साथ इसमें भाग लिया) वास्तव में display:none के साथ आईफ़्रेम लोड नहीं कर सकता है; frameborder विशेषता सेट करना और visibility:hidden आईफ़्रेम को दिखाई देने से रोक देगा।
  • कुछ ब्राउज़र about:blank (या एक समान पृष्ठ) लोड करेंगे यदि आप मार्कअप में iframe src विशेषता निर्दिष्ट नहीं करते हैं। Https पृष्ठों पर, यह आईई में असुरक्षित सामग्री चेतावनियों को फेंकने का कारण बन सकता है।
0

एक वैकल्पिक, प्रॉक्सीइंग।

सर्वर-साइड में बाहरी फ़ाइल को पकड़ें और इसे वापस गूंजें। अब यह आपके डोमेन पर है इसलिए कोई समस्या नहीं है।

उदाहरण के लिए

php में

<?php 
    $external-site = file_get_contents('http://xyz.com/'); 
    echo $external-site; 
?> 
0

मुझे लगता है कि मैं किसी भी iframes हटा सकते हैं और एक पुस्तकालय के साथ हो सकता है jsonp का प्रयोग करेंगे। 1. कोई क्रॉस-डोमेन त्रुटियां 2. आप ऑब्जेक्ट्स के रूप में डेटा प्राप्त कर सकते हैं ('em 3 के साथ खेलने में आसान 3. आप जेएस कोड भी प्राप्त कर सकते हैं जिसे आप पार्स कर सकते हैं। 4. मोबाइल भी तैयार होगा (iframes आखिरी हैं शताब्दी समाधान ...) लेकिन फिर भी आप किसी भी कारण से iframes को हटाने में सक्षम नहीं हैं, इसलिए मैं तैयार किए गए लाइब्रेरी समाधान का उपयोग करने की सलाह देता हूं। गुडलक

संबंधित मुद्दे