সিকিউরিটি এরির: ক্রস-অরিজিন ফ্রেমে অ্যাক্সেস করা থেকে উত্স সহ একটি ফ্রেম অবরুদ্ধ করেছে

Question

আমি <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!";
    });
});

Answer 1

একই উত্স নীতি

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

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

<protocol>://<hostname>:<port>/...

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

^{দ্রষ্টব্য: ইন্টারনেট এক্সপ্লোরার এই নিয়মটি কঠোরভাবে অনুসরণ না করার জন্য পরিচিত, বিশদগুলির জন্য এখানে দেখুন।}

উদাহরণ

নীচের ইউআরএলগুলি অ্যাক্সেস করার চেষ্টা করে কী হবে তা এখানে 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:80   -> Failure: different protocol
ftp://www.example.com:21                     -> Failure: different protocol & port 
https://google.com/search?q=james+bond       -> Failure: different protocol, port & hostname 

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

যদিও একই-উত্স নীতি স্ক্রিপ্টগুলিকে আলাদা উত্সযুক্ত সাইটগুলির সামগ্রী অ্যাক্সেস করা থেকে বিরত করে, যদি আপনি উভয় পৃষ্ঠার মালিক হন তবে আপনিwindow.postMessagemessage দুটি পৃষ্ঠার মধ্যে বার্তা প্রেরণের জন্য এই সমস্যাটি এবং এর সম্পর্কিত ঘটনাটি ব্যবহার করে এই জাতীয় সমস্যাটি ঘটাতে পারেন:

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

  let frame = document.getElementById('your-frame-id');
  frame.contentWindow.postMessage(/*any variable or object here*/, 'http://your-second-site.com');

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

• আপনার <iframe>(মূল পৃষ্ঠায় অন্তর্ভুক্ত):

  window.addEventListener('message', event => {
      // IMPORTANT: check the origin of the data! 
      if (event.origin.startsWith('http://your-first-site.com')) { 
          // The data was sent from your site.
          // Data sent with postMessage is stored in event.data:
          console.log(event.data); 
      } else {
          // The data was NOT sent from your site! 
          // Be careful! Do not use it. This else branch is
          // here just for clarity, you usually shouldn't need it.
          return; 
      } 
  }); 

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

আপনার ব্রাউজারে সম-উত্স নীতিটি অক্ষম করা হচ্ছে

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

• গুগল ক্রম
• মোজিলা ফায়ারফক্স
• আফ্রিকায় শিকার অভিযান
• অপেরা
• মাইক্রোসফ্ট এজ: সম্ভব নয়
• মাইক্রোসফ্ট ইন্টারনেট এক্সপ্লোরার

Comments

আমি 1 , 2 খুঁজে পেয়েছি অন্য যে কোনও উত্তর প্রস্তাব দেয় যে সিওআরএস / Access-Control-Allow-Originকেবলমাত্র এক্সএইচআর, ফন্ট, ওয়েবজিএল এবং আইফ্রেমেcanvas.drawImage প্রযোজ্য নয় । আমি বিশ্বাস করি postMessageএকমাত্র বিকল্প option

— snappieT

আমি প্রথমবার জাভাস্ক্রিপ্টে টিলডে "~" অপারেটরটি দেখেছি। অন্য কারও জন্য যারা এটি কী করে তাও জানত না: এটি -1 কে 0 এ রূপান্তর করে, যা আপনাকে "! = -1" করায় সংরক্ষণের সূচকের ফলাফলের ফলে সংরক্ষণ করে। ব্যক্তিগতভাবে, আমি মনে করি যে আমি "! = -1" ব্যবহার করা চালিয়ে যাব যাতে অন্যান্য প্রোগ্রামারদের পক্ষে টিল্ডটি ভুলে যাওয়া ভুলগুলি বোঝা এবং এড়ানো এড়ানো সহজ হয় (

— রেডজার্ফ

@ সাবাআহং কেবল এটির জন্য পরীক্ষা করুন iframe.src, এবং যদি সাইটটি এটি আপনার ডোমেনের হোস্টনামের থেকে আলাদা হয় তবে আপনি সেই ফ্রেমটি অ্যাক্সেস করতে পারবেন না।

— মার্কো বোনেলি

@ স্নাগস সম্পূর্ণ ভুল, ~2 এর সংখ্যার পরিপূরক প্রদান করে, তাই nহয়ে যায় -n-1, যার অর্থ কেবলমাত্র -1হয়ে যাবে 0(যার অর্থ ব্যাখ্যা করা হবে false) এবং অন্য কোনও মান পরীক্ষায় উত্তীর্ণ হবে। আইই 0 = -(-1)-1, না -(-1+1)।

— মার্কো বোনেলি

@ ব্যবহারকারী 2568374 location.ancestorOrigins[0]হল প্যারেন্ট ফ্রেমের অবস্থান। যদি আপনার ফ্রেমটি অন্য কোনও সাইটের অভ্যন্তরে চলছে এবং আপনি event.origin.indexOf(location.ancestorOrigins[0])যদি এটি ব্যবহার করে পরীক্ষা করে দেখেন যে ইভেন্টটির উত্সটিতে পিতামাতার ফ্রেম ঠিকানা রয়েছে যা সর্বদা হতে চলেছেtrue , তাই আপনি কোনও উত্স সহ কোনও পিতামাতাকে আপনার ফ্রেমে অ্যাক্সেস করার অনুমতি দিচ্ছেন এবং এটি স্পষ্টতই এমন কিছু নয় যা আপনি করতে চান। তদ্ব্যতীত, খারাপ অভ্যাসটিও কি, আমি উপরের মন্তব্যে ইতিমধ্যে ব্যাখ্যা করেছি। document.referrer

— মার্কো বোনেলি

Answer 2

মার্কো বোনেলির উত্তরটি পরিপূরক করা: ফ্রেম / ইফ্রেমেসের মধ্যে ইন্টারঅ্যাক্ট করার সেরা বর্তমান উপায়টি ব্যবহার করা হচ্ছে window.postMessage , সমস্ত ব্রাউজার দ্বারা সমর্থিত

Comments

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

— আলেসান্দ্রো কাটিন

আমি অসমত, @ আলেসান্দ্রোকুটিন। কীভাবে window.postMessageকাজ করে তা কেবল গ্রহণযোগ্য উত্তরটির নকল করবে যা আমি ইতিমধ্যে উল্লেখ করেছি। তদুপরি, আমার উত্তরটি যে প্রয়োজনীয় মানটি যুক্ত করে তা হ'ল বাহ্যিক ডকুমেন্টেশনের উল্লেখ।

— গির্ট

আমি যদি আপনি গৃহীত উত্তরটি সম্পাদনা করতে এবং সেখানে যুক্ত করতে পারেন তবে এটি আরও ভাল বলে মনে করি

— মার্টিন মাসেরেরা

উইন্ডো.পোস্টমেসেজ আমরা কেবল তখনই ব্যবহার করতে পারি যখন আমরা পিতা বা মাতা (আমাদের এইচটিএমএল পৃষ্ঠা) এবং শিশুদের উপাদান (অন্যান্য ডোমেন iframe) উভয়কেই অ্যাক্সেস করতে সক্ষম করতে পারি O অন্যদিকে "সেখানে কোনও সম্ভাবনা নেই", এটি সর্বদা একটি ত্রুটি ছুঁড়ে ফেলবে "আনকচড ডোমেক্সেপশন: একটি ফ্রেম ব্লক করা হয়েছে ক্রস-অরিজিন ফ্রেমে অ্যাক্সেস করা থেকে "< yourdomainname.com >" উত্স সহ ""

— VIJAY পি

Answer 3

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

ক্লিক জ্যাকিং কীভাবে কাজ করে?

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তবে একটি এক্স-ফ্রেম-বিকল্পগুলিতে যুক্ত করুন re

এক্স-ফ্রেম-বিকল্পগুলি DENY

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

1. সমিরিগিন // কেবল আমার নিজের ডোমেনকে আমার এইচটিএমএল একটি আইফ্রেমে রেন্ডার করতে অনুমতি দেয়।
2. DENY // আমার এইচটিএমএলকে কোনও আইফ্রেমের অভ্যন্তরে রেন্ডার করার অনুমতি দেবেন না
3. "ALLOW-FROM https://example.com/ " // নির্দিষ্ট ডোমেনটিকে একটি আইফ্রেমের অভ্যন্তরে আমার এইচটিএমএল রেন্ডার করার অনুমতি দেয়

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

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

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

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

Comments

আমি মনে করি না যে এক্স-ফ্রেম-বিকল্পগুলি এখানে প্রযোজ্য - অতিথি (এম্বেড করা) পৃষ্ঠা দ্বারা সংজ্ঞায়িত এক্স-ফ্রেম-বিকল্পগুলি পিতামাতাকে পৃষ্ঠাটি লোড করতে অস্বীকার করতে পারে, তবে যতদূর আমি জানি এটি জাভাস্ক্রিপ্টকে প্রভাবিত করে না এক্স-ফ্রেম-বিকল্পগুলির সাথেও অ্যাক্সেস করুন: *, আমি মনে করি না যে আপনি জাভাস্ক্রিপ্টের সাহায্যে কোনও ভিন্ন উত্সের অতিথি পৃষ্ঠার

— নোহ গিলমোর

Answer 4

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

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

$(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);
});

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

Comments

আমি সাফারির সাথে একটি ইস্যু নিয়ে কাজ করছি যেখানে ইফ্রামে নথিটি তার জেএস কার্যকর করতে পিতামাতার পৃষ্ঠার চেয়ে পরে যা ইমফ্রেমে ডকুমেন্টের চেয়ে বার্তা প্রেরণের কারণ হিসাবে বার্তা শুনছে; যা ক্রোম এবং ফায়ারফক্স যা থেকে সম্পূর্ণ বিপরীত - আপনি কি সাফারিতে আপনার কোডটি আইওএসে পরীক্ষা করেছেন? "*" মানের দ্বিতীয় প্যারামিটার সহ

— বিটিডব্লু পোস্টমেসেজটি

আপনার কোডের প্রথম ব্লকটি হ'ল এটি পিতামাতার আইফ্রেমে বা পৃষ্ঠায় রয়েছে যা ইফ্রেমে লোড হয়ে যায়?

— Demonic218

Answer 5

আমি জাভা স্প্রিং সুনির্দিষ্ট কনফিগারেশন যুক্ত করতে চাই যা এতে প্রভাব ফেলতে পারে।

ওয়েব সাইট বা গেটওয়ে অ্যাপ্লিকেশনটিতে একটি বিষয়বস্তু সিকিউরিটিপুলি সেটিং রয়েছে

বসন্তে আপনি ওয়েবসিকিউরিটি কনফিগুরির অ্যাডাপ্টার সাব ক্লাসের বাস্তবায়ন পেতে পারেন

contentSecurityPolicy("
script-src 'self' [URLDomain]/scripts ; 
style-src 'self' [URLDomain]/styles;
frame-src 'self' [URLDomain]/frameUrl...

...

.referrerPolicy(ReferrerPolicyHeaderWriter.ReferrerPolicy.STRICT_ORIGIN_WHEN_CROSS_ORIGIN)

আপনি যদি এখানে নিরাপদ বাহ্যিক প্রতিযোগিতা সংজ্ঞায়িত না করেন তবে ব্রাউজারটি অবরুদ্ধ করা হবে।

Answer 6

যদি আপনার আইফ্রেমের সামগ্রীর উপর নিয়ন্ত্রণ থাকে - এটি যদি কেবল ক্রস-অরিজিন সেটআপ যেমন অ্যামাজন মেকানিকাল তুর্কে লোড করা হয় - তবে আপনি এই সমস্যাটি সমাধান করতে পারেন <body onload='my_func(my_arg)'> অভ্যন্তরীণ এইচটিএমএল বৈশিষ্ট্যের ।

উদাহরণস্বরূপ, অভ্যন্তরীণ এইচটিএমএল এর জন্য, thisএইচটিএমএল প্যারামিটার ব্যবহার করুন (হ্যাঁ - thisসংজ্ঞায়িত করা হয়েছে এবং এটি অভ্যন্তরীণ দেহের উপাদানগুলির প্যারেন্ট উইন্ডোকে বোঝায়):

<body onload='changeForm(this)'>

অভ্যন্তরীণ এইচটিএমএল এ:

    function changeForm(window) {
        console.log('inner window loaded: do whatever you want with the inner html');
        window.document.getElementById('mturk_form').style.display = 'none';
    </script>

Answer 7

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

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

Comments

দ্রুত এবং নোংরা পরীক্ষার জন্য ভাল!

— ব্যবহারকারী 1068352

যে কোনও কিছুর জন্য ভয়ঙ্কর যা দ্রুত এবং নোংরা পরীক্ষা নয় ... এবং ইতিমধ্যে স্বীকৃত উত্তরে ঠিকানা।

— কোয়ান্টিন

এমনকি কমান্ডটি

— দিয়েও