web-dev-qa-db-ja.com

iframeがクロスドメインであるかどうかを検出する確実な方法

Iframeがクロスドメインであるかどうかを判断しようとしています。この質問で受け入れられた回答によると: iframeがクロスドメインであるかどうかを検出し、それを無効にする iframeのcontentDocumentにアクセスするコードをtry / catchブロック。 Chromeのクロスドメインiframeでこれを試しました:

try { 
  document.getElementsByTagName('iframe')[0].contentDocument;
} catch(err){
  console.log("called");
}

それでもクロスドメインエラーをスローし、エラーをキャッチしません。

また、親ページのURLのプロトコル+ホスト+ポートがiframeのsrcにあるかどうかを確認しようとしました。

function thirdPartyIframe(iframe){
  var url = document.location.protocol + "//" + document.location.hostname + (document.location.port === "" ? "" : ":" + document.location.port);
  var regexp = new RegExp(url.replace(/\//g, "\\/").replace(/\./g, "\\."));
  if (iframe.src === '' || regexp.test(iframe.src)){
    return false;
  } else {
    return true;
  }
}

しかし、これはFacebookのホームページの最初のiframeでsrcが(長い)に等しい場合は機能しないようです。

"http://www.facebook.com/ai.php?aed=AQLlH2cfdnsnLrDUVyqrQPlWpayw9N09Z_iNuhulevbeEfVa4mcVRcT8cjAZOjQb8y1QXab5Ae3aSEJx49U_Qv35rtSp1VC9cY0_CrpOjMDk40hS_Xm57A996YtRVCcWSuRZ_jZERQ_iA_E4621NAbKHT9dsB7uElkRtTvl5K-zPI0jeH-BEnlZIOXbeEdbRC6qCwoToaltolpe-Ot2KWgkfb_vBZYpzUc3jQoEHzLG6tauO9l_hkXpYpHxnt-KYFKIFZ1PgmrHgb0UcGjeKHl7yBR1AbW2n5XgdgaAhFvBjs5GZlKy566nvl8eLRA60orwkwtWYeN8-gKoAmOLm7-6minsWn8lk1h2Qn3p07HCTSnYHfv1aJ6mF5jmuzP0YYe7Ym9ZbmK-tvax4uPAQJ2OdULilKbEh8M-2V9pVY3AC228OPlrRullZuuOg8DI2A8WeMF-fbbOdOFFVCe5Gj1CaZu3LYXiqdG7mUgY6AEpk9ZzGT4fC2K8DInQo1AypCvzG64C_bEWfODeXe0aGbkWwsUUmO7E5HFg0tvZkK5IAR_xxxQ2rlf5jbcEDo_2gdIDdHe1HT75-SJLUsSA0M8EU01oNNPuWwEC2BW6inepc9QPuqeg42tcEbKLU-rIUnXDBLvgutft8azWPPQ6_LafGjCAmC9uTalagoWLLDMpQOThvPg7YeVd7qg_c9Mzn2GAfuswcxDSxyRIZo9MaOhA6mhfXeE1tmjyBBsMxnx08tO21Jsfgch59fmMxpeJzdsNMPK3FAojfglvCQ2Zrt_6ataexUB4xlM7_PhKrfBPtxb5fe2TE9-nlWruNEpoCrzI05yv4Go3CYEWHob06K_9iICfNVTFkSYGTiJnMXCy_fdgfyzUIn5QJIPRo4-Wnyg444zKAO_nyFW59LqbIanHVfFY6ybiA6KeC3meREWzTPSsrU5d_NbYHlJWb8uPNDR04jaH5e2qiYj3Y8qgLQA5m"

私の関数はそれをサードパーティのiframeとして分類しませんが、そのcontentDocumentにアクセスすると、Chromeは依然としてクロスドメインエラーをスローします。

私はこれを行うための絶対確実なクロスブラウザの方法を探しています。

20
user730569

さまざまなブラウザを処理し、ブラウザがクロスドメインアクセスを処理するさまざまな方法を処理するには、try/catchの内容よりも少し多くのことを行う必要があります。

function canAccessIFrame(iframe) {
    var html = null;
    try { 
      // deal with older browsers
      var doc = iframe.contentDocument || iframe.contentWindow.document;
      html = doc.body.innerHTML;
    } catch(err){
      // do nothing
    }

    return(html !== null);
}

あなたの例では、これは次のようになります。

var accessAllowed = canAccessIFrame(document.getElementsByTagName('iframe')[0]);

作業デモ: http://jsfiddle.net/jfriend00/XsPL6/

Chrome 21、Safari 5.1、Firefox 14、IE7、IE8、IE9でテスト済み。

18
jfriend00

最新のブラウザ向けのより短くて読みやすい関数

function canAccessIframe(iframe) {
  try {
    return Boolean(iframe.contentDocument);
  }
  catch(e){
    return false;
  }
}

Chrome 79およびFirefox52ESRでテスト済み。

p.s.クロスオリジンにアクセスできないiframeプロパティをチェックして、ブール値に変換できます。例:contentDocument/contentWindow.document/location.href /など。

1
crisc82