ブラウザがjsからiframeのエレメントへのアクセスのブロック現象及び解決方法

やりたいこと：javascriptからiframeの内容を取得したい

  • iframe内容特定な要素をjavascriptで取得して、親ウィンドにセットしたいです
  • 親ウィンドと子ウィンド間のやり取りをします

問題点：ブラウザがjsからiframeへのアクセスをブロック

  • セキュリティポリシーとして、ブラウザがjsからiframeへのアクセスをブロックしています
    • iframeの参照先が親ウィンドと違うケースが多いので、jsがiframeの要素をいじることができれば、セキュリティ上の問題があります
  • jsからiframeの内部にアクセスすると以下のエラーが発生 
    Blocked a frame with origin from accessing a cross-origin frame.

    jsからiframeへのアクセスエラー

  • 基本としてjsからiframe内部へのアクセスができないです。

回避方法：ブラウザのセキュリティポリシーを一時的に無効化

  • GoogleのChromeブラウザを例にして説明します
  • クロームを起動するときに、セキュリティポリシー無効化することができます 
    //　Windows環境で以下の命令でChromeを起動
chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security
    • Chromeの作業ディレクト："C://Chrome dev session"を必要に応じて設定を変えることができます
  • 上記方法で起動したブラウザ内でjsからiframe内部へのアクセスができます
  • 開発目的で、あくまで一時的な方法となります
    • お客さんが側ではこの方法でブラウザの起動はしません

iframe内容の非表示(X-Frame-Options:Deny)および回避方法

iframeの非表示(X-Frame-Options:Deny)の問題

  • ページに組み込んだiframeが表示されないことがあります
  • ブラウザのコンソールをチェックしてみると、以下のエラーが表示されます 
    Refused to display xxxxx in a frame because it set 'X-Frame-Options' to 'deny'.

    iframeの非表示

  • iframeの参照先がレスポンスのヘッダーに X-Frame-Options:Deny を設定すれば、ブラウザがiframeの内容を表示しません
  • セキュリティ(クリックジャッキング攻撃の防止)の都合で、いろいろなサイトがこの設定をしています

回避方法：レスポンスのヘッダーにある設定(X-Frame-Options)を無視するプラグイン導入

  • ブラウザ(Chrome)を例にして説明します
  • プラグイン： Ignore X-Frame headers があります
  • 上記プラグインをChromeにインストール、有効化します
  • iframeの内容が正常に表示されます
    • あくまで、開発環境で、一時的な回避策となります
    • お客さんの環境ではこのように対応はできません