Web系開発メモ

Java, JavaScript, CSS, HTML などの記事を書いています。

JS:クロスドメインとiframe

Webページ(JS)から、違うドメインXMLRSS フィード)を取得したいことがありました。そこで、iframe で別ドメインXML を取得して、その内容を操作できないか検証してみました。

検証結果

結果としては、エラーが発生して無理そうでした。

エラー内容

Chrome のコンソールに次のようなエラーが表示されました。

Uncaught DOMException:
 Failed to read the 'contentDocument' property
 from 'HTMLIFrameElement':
Blocked a frame with origin "http://localhost:3000"
 from accessing a cross-origin frame.

http://localhost:3000/index.html で iframe(src="https://news.yahoo.co.jp/pickup/rss.xml")の内容を操作するところでエラーが発生しました。(iframe の枠には一応 src のコンテンツが表示できてました。)

コード

検証で使ったコードは、GitHub にあります。

cdi - GitHub

iframe で同じドメインXML を取得した場合は、エラー発生せずに操作できました。

関連記事

JS:クロスドメインとYQL

iframe はダメだったので、YQL(Yahoo Query Language)というサービスを使ってクロスドメインXML を取得しました。YQLGoogle Feed API の代替みたいな感じで使えました。