iframe менен негизги баракча ортосунда маалымат алмашуу кандай болот?

Маалымат алмашуунун бир нече жолдору бар:

1. PostMessage API:

   • негизги жана коопсуз жол.
   • терезелер (iframe/ата-эне, ар башка домендер) арасында билдирүүлөрдү жөнөтүүгө мүмкүндүк берет.
   • күтүлүүчү origin көрсөтүү маанилүү, ал XSS чабуулдарын алдын алууга жардам берет.

   // Ата-эне терезеден iframeге жөнөтүү
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.postMessage('Салам ата-энен!', 'https://trusted-domain.com');
   
   // iframe ичинде кабыл алуу
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://parent-domain.com') {
           return; // Жөнөтүүчүнү текшерүү
       }
       console.log('Iframe ичинде алынган билдирүү:', event.data);
   });
   
   // iframeтен ата-эне терезеге жөнөтүү
   window.parent.postMessage('Салам iframeтен!', 'https://parent-domain.com');
   
   // ата-эне терезеде кабыл алуу
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://iframe-domain.com') {
           return; // Жөнөтүүчүнү текшерүү
       }
       console.log('Атка-эне ичинде алынган билдирүү:', event.data);
   });
   

2. window объектине түз жетүү (тек гана Same-Origin үчүн):

   • Эгер iframe жана ата-эне баракчасы бир эле доменде болсо (Same-Origin Policy), алар түздөн-түз window объекттерине жеткире алышат.

   // Ата-эне терезеде
   const iframeEl = document.getElementById('my-iframe');
   const iframeWindow = iframeEl.contentWindow;
   iframeWindow.someVariable = 'Ата-энеден келген маані';
   iframeWindow.someFunction();
   
   // iframe ичинде
   const parentWindow = window.parent;
   console.log(parentWindow.someVariable);
   parentWindow.someOtherFunction();
   

3. URL hash (#):

   • жөнөкөй, бирок чектелүү жол.
   • кыска маалыматтарды өткөрүү үчүн колдонулат, URLдин hash бөлүгүн өзгөртүү аркылуу.
   • hash өзгөрүүлөр сайтты кайра жүктөбөйт.
   • hash өзгөрүүлөрүн байкоо керек (мисалы, hashchange иш-чарасы аркылуу).

   // ата-эне терезеде, iframe hash өзгөртүү үчүн
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.location.hash = 'data=кейинки_маани';
   
   // iframe ичинде, hash окуу
   window.addEventListener('hashchange', function() {
       const hash = window.location.hash;
       console.log('Hash өзгөрдү:', hash);
       // Hashтен маалыматтарды талдоо
   });
   

4. location.href өзгөртүү (азырынча сунушталбайт):

   • маалыматтарды URL өзгөртүп, кайра жүктөө аркылуу өткөрүү.
   • көп колдонулбайт.

5. Бөлүштүрүлгөн сактагычтар (Same-Origin):

   • localStorage жана sessionStorage.
   • эгер iframe жана ата-эне бир эле доменде болсо, алар бирдей сактагычтарды колдонушат.

   // ата-эне терезеде
   localStorage.setItem('sharedData', JSON.stringify({ value: 'Мисал' }));
   
   // iframe ичинде
   const data = JSON.parse(localStorage.getItem('sharedData'));
   console.log('localStorage дан алынган маалымат:', data);
   

Метод тандоо коопсуздук саясатына (Same-Origin Policy) жана өткөрүлө турган маалыматтын көлөмүнө/түрүнө көз каранды. PostMessage эң ийкемдүү жана коопсуз чечим болуп саналат.