メインコンテンツに移動
ホーム

古松

メインナビゲーション

  • ホーム
  • ビデオ
  • ご連絡

パンくず

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

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の内容が正常に表示されます
    • あくまで、開発環境で、一時的な回避策となります
    • お客さんの環境ではこのように対応はできません

ブラウザが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内部へのアクセスができます
  • 開発目的で、あくまで一時的な方法となります
    • お客さんが側ではこの方法でブラウザの起動はしません

検索フォーム

カテゴリ別

  • laravel
  • drupal
  • javascript
  • windows
  • html
  • mysql
  • php
  • apache
  • css
  • SEO
  • video
  • wordpress
  • linux
  • python
  • Electron
  • Visual Studio Code

google ads