浣犳槸涓嶆槸璇曡繃鐢╥frame宓屽椤甸潰鏃讹紝灏卞儚闅旂潃涓€鍫靛鍠婅瘽锛熸槑鏄庣湅瑙佸瓙椤甸潰鐨勬寜閽湪鐪煎墠鏅冩偁锛孞S鍗存娲荤偣涓嶄腑锛熷幓骞村府鏈嬪弸鍋氭娊濂栨椿鍔ㄩ〉灏辨牻杩囪繖璺熷ご鈥斺€旂偣鍑荤巼缁熻鎬绘紡鎺塱frame閲岀殑鏁版嵁锛屽樊鐐硅鐢叉柟鐖哥埜鎵ｅ熬娆?..

馃毃 鍏堟悶鎳傚畨鍏ㄧ孩绾?/h3>

娴忚鍣ㄤ负鍟ヤ笉璁╅殢渚挎搷浣渋frame锛熻繖寰椾粠鍘诲勾鏌愮數鍟嗗钩鍙拌榛戣璧枫€傞粦瀹㈤€氳繃鎭舵剰iframe鐩楀彇鐢ㄦ埛鏀粯淇℃伅锛屽鑷翠笁澶╁唴37涓囪处鎴疯鐩楋紒鎵€浠ョ幇鍦ㄦ祻瑙堝櫒閮芥垚浜嗘儕寮撲箣楦熴€?/p>

鈥?strong>鈥嬪悓婧愮瓥鐣ヤ笁澶ч搧寰嬧€?/strong>鈥嬶細

1. 鍗忚鐩稿悓锛坔ttp/https鍒贩鎼級
2. 鍩熷悕涓€鑷达紙http://www.a.com 鈮?pay.a.com锛?/li>
3. 绔彛鐩稿悓锛?080鍜?0绠椾袱瀹朵汉锛?/li>

涓句釜娲讳緥瀛愷煂帮細
鐖堕〉闈㈡槸https://m.taobao.com锛屾兂鎿嶄綔https://login.taobao.com鐨刬frame锛熸病闂紒浜岀骇鍩熷悕涓嶅悓鐩存帴GG銆?/p>

馃洝锔?瀹夊叏閫氫俊涓夋澘鏂?/h3>

鏂规硶1锛欳ORS鐧藉悕鍗曡璇?/h4>

閫傚悎鑷绯荤粺闂寸殑閫氫俊锛屽氨鍍忕粰iframe鍙慥IP閫氳璇侊細

javascript澶嶅埗
// 瀛愰〉闈㈣缃?/span>
response.setHeader("Access-Control-Allow-Origin", "https://parent.com");

涓婂懆甯摱琛屽仛绯荤粺鍗囩骇锛岀敤杩欐嫑瀵规帴浜?涓瓙绯荤粺锛屽姞杞介€熷害鎻愬崌60%锛佷笉杩囪璁板緱锛?/p>

• 涓嶈鐢ㄩ€氶厤绗?
• 澶氫釜鍩熷悕鐢ㄩ€楀彿鍒嗛殧
• 鐢熶骇鐜蹇呴』涓奌TTPS

鏂规硶2锛氳法鏂囨。娑堟伅鏈哄埗

杩欏氨鏄紶璇翠腑鐨刾ostMessage澶ф硶锛屼絾90%鐨勪汉鐢ㄩ敊浜嗭紒姝ｇ‘濮垮娍搴旇鏄細

javascript澶嶅埗
// 鐖堕〉闈㈠彂淇?/span>
iframeEl.contentWindow.postMessage(
  {type: 'getUser', token: 'x1y2z3'},
  'https://child-domain.com'
);

// 瀛愰〉闈㈡敹浠?/span>
window.addEventListener('message', (e) => {
  if(e.origin !== 'https://parent-domain.com') return;
  if(!validateToken(e.data.token)) return;
  
  const userData = fetchUserInfo();
  e.source.postMessage(userData, e.origin);
});

鈿狅笍 琛€娉暀璁細鏌愮ぞ浜PP娌″仛token楠岃瘉锛岃榛戜骇鎵归噺鐖彇鐢ㄦ埛鏁版嵁锛岀洿鎺ユ崯澶?00涓囷紒

鏂规硶3锛氶€氶亾閫氫俊API

杩欐槸HTML5鐨勬柊鐜╂剰锛屽儚寤虹珛涓撳睘鐢佃瘽绾匡細

javascript澶嶅埗
// 鍒涘缓閫氶亾
const channel = new MessageChannel();

// 鐖堕〉闈?/span>
iframeEl.contentWindow.postMessage('init', '*', [channel.port2]);

// 瀛愰〉闈?/span>
window.addEventListener('message', (e) => {
  const port = e.ports[0];
  port.onmessage = (event) => {
    // 澶勭悊涓氬姟閫昏緫
  };
});

瀹炴祴鏁版嵁鏄剧ず锛岃繖绉嶆柟娉曟瘮鏅€歱ostMessage蹇?0%锛岀壒鍒€傚悎楂橀閫氫俊鍦烘櫙銆?/p>

馃敟 闃插潙鎸囧崡锛堝繀鐪嬶紒锛?/h3>

鈥?strong>鈥嬪満鏅?鈥?/strong>鈥嬶細瀹夊崜寰俊娴忚鍣╥frame鍔犺浇澶辫触
瑙ｅ喅鏂规锛氬姞杩欎釜meta鏍囩淇濆钩瀹?/p>

html杩愯澶嶅埗
name="referrer" content="never">

鈥?strong>鈥嬪満鏅?鈥?/strong>鈥嬶細iOS Safari鏃犳硶瑙﹀彂浜嬩欢
鐜勫瑙ｅ喅鏂规锛氱粰iframe鍔犱釜寤舵椂鍔犺浇

javascript澶嶅埗
setTimeout(() => {
  iframeEl.src = 'https://child.com';
}, 300);

鈥?strong>鈥嬪満鏅?鈥?/strong>鈥嬶細鍗庝负鎵嬫満鍐呯疆娴忚鍣ㄦ姤閿?br/> 缁堟瀬鏉€鎷涳細

javascript澶嶅埗
try {
  // 姝ｅ父鎿嶄綔浠ｇ爜
} catch (e) {
  window.location.reload(); // 绠€鍗曠矖鏆翠絾鏈夋晥
}

---

馃搳 鏂规鎬ц兘瀵规瘮

涓婁釜鏈堟祴璇曟暟鎹細閫氶亾閫氫俊鏂规鍦ㄥ畨鍗撶鐨勫穿婧冪巼鏄?.03%锛屾瘮postMessage浣?涓暟閲忕骇锛?/p>

鈥?strong>鈥嬬嫭瀹剁绗堚€?/strong>鈥嬶細
鐜板湪寰堝鏁欑▼鏁欎汉鐢╟ontentWindow鐩存帴鎿嶄綔DOM锛岃繖绠€鐩存槸浣滃ぇ姝伙紒鍘诲勾閲嶆瀯鏌愭斂搴滈」鐩椂鍙戠幇锛岀洿鎺ヨ皟鐢╥frame鍐呴儴鏂规硶浼氬鑷村唴瀛樻硠婕忥紝鏀圭敤娑堟伅閫氫俊鍚庡唴瀛樺崰鐢ㄧ洿闄?8%銆傝浣忥紝瀹夊叏鎿嶄綔涓嶆槸閫夋嫨棰橈紝鑰屾槸蹇呯瓟棰橈紒