jQueryでクロスドメインiframe内の要素にアクセスする(Chrome編)

iframeタグを使うと、別のHTMLページを埋め込むことができます。ただし、セキュリティの観点からiframeタグ配下が異なるドメインページだった場合、jQueryでアクセスしようとすると、cross-origin frameということで、下図のようなDOMExceptionエラーになります。

chrome-cross-domain

エラーになるコードは以下のようにiframeタグを取得して、contentWindow.documentで配下のドキュメントを取得しようするところでエラーになってしまいます。

// class=putarea以下にあるiframeタグ配下にアクセスする
$(".analyse_btn").on("click",function(){
    var ifdoc = $(".putarea iframe")[0].contentWindow.document;
  });

ネットを調べると、chrome.exeの引数に--disable-web-security追加して特別に許可すると、アクセスできるとありますが、2019年2月の時点の最新版chromeだと上図のようなエラーが出て回避できないです。

回避しようとしたが、NGだったchromeの起動引数。ちなみに--user-data-dirは、セッション情報を出力するディレクトリを指定します。指定しないと普段使っているディレクトリに出力されます。普段使うchromeの環境と分けたほうが安全なので指定することを推奨しています。

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="C://chrome_dev_session" --disable-web-security

この手のオプションは使えなくなることが多いので諦めていましたが、追加で--disable-site-isolation-trialsをさらに追加?するとアクセスできるようになりました。

  • Windowsの場合

以下をコマンドラインから実行するか、ショートカットを作成する

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="C://chrome_dev_session" --disable-web-security --disable-site-isolation-trials

  • Macの場合、コンソールから以下を実行
> open /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir --disable-site-isolation-trials

こういったモードは、あくまで開発目的の場合に留めておいたほうがいいですが、参考までに。

-->