কম্পিউটার টিউটোরিয়াল

HTML5 Cross-Domain iframe সমস্যা সমাধান: `postMessage` API

সমস্যা: Same-Origin Policy iframe-এ ক্রস-ডোমেইন কমিউনিকেশন ব্লক করে

সমাধান: `window.postMessage()` — নিরাপদ, স্ট্যান্ডার্ড, সব ব্রাউজার সাপোর্টেড (IE8+)।

পেরেন্ট পেজ (Receiver)

 {
  // ১. Origin যাচাই (সিকিউরিটি Криティক্যাল!)
  if (event.origin !== 'https://child-domain.com') return;

  // ২. ডেটা প্রসেস
  console.log('চাইল্ড থেকে মেসেজ:', event.data);

  // ৩. রিপ্লাই পাঠানো (ঐচ্ছিক)
  event.source.postMessage({ status: 'received', time: Date.now() }, event.origin);
});
</script>

চাইল্ড iframe (Sender)

  • সেন্সিটিভ ডেটা (টোকেন, পাসওয়ার্ড) পাঠাবেন না।
  • আইফ্রেমে `sandbox` অ্যাট্রিবিউট দিন: `sandbox="allow-scripts allow-same-origin allow-forms"`।
  • লিগেসি IE8/9 সাপোর্ট (attachEvent)

                
    1. HTML5 iframe srcdoc-এর বিকল্প কী?

    2. HTML5 Canvas Transformation

    3. Google Chrome-এ HTML5 ক্যানভাস এবং z-index ইস্যু

    4. PhoneGap + Windows Phone 8: HTML5 ভিউপোর্ট মেটা এবং স্কেলিং ইস্যু