質問: HTML/JavaScriptのiframeタグについてご教授下さい。 ■実施したい事 iframeでhtmlを取得したいが、 取得したhtmlの中身(cssや画像)は取得させたくない。 ■詳細イメージ 1 iframe ``` ``` ↓ 2 WEBブラウザが `http://example.com/sample.html` へGETリクエストを投げて、 レスポンスが返ってくる ↓ 3 WEBブラウザが返ってきたレスポンスをDOMツリーにロードする ↓ 4 WEBブラウザが `http://example.com/sample.html` に記載されているcssや画像を取得する 12は実施させて、 3の前後で処理を中断させて、 4を実施させたくない。 ■質問事項 上記を実現させるためにはどのようなHTML/JavaScriptの実装が必要でしょうか? ご教授下さい。 ■思うところ 3のタイミングでイベントを発生させて、 4を無効にするような処理が可能かな?と調べてみましたら、 「DOMContentLoaded」というDOM読み込み完了後に呼ばれるイベントがあったのですが、 うまく使えますでしょうか。 また、タグ等を動的に発行して、 取得したhtmlを無効に出来るかな?と思っています、 うまく使えますでしょうか。 また、ブラウザで発生するHTTPリクエストを全てキャッチして、 `http://example.com/sample.html` に記載されているcssや画像のHTTPリクエストを遮断できないかな?と思っています、いかがでしょうか。 その他、手段は問いません。 実現できる方法をヒントだけでも良いのでご教授下さい。
回答: 要約 * 読み込むページと別オリジン(別ドメイン)のリソースだけブロックすればいい場合 → iframe の sandbox 属性 * あらゆるリソースを完璧にブロック、するのは iframe では難しい + 親ページと読み込むページが同一オリジン → XMLHttpRequestでHTMLだけ取得 + 別オリジンでCORSも使えない → サーバーサイドに頼りましょう HTMLの読み込みの検知 DOMContentLoaded はそもそも、外部リソースの読み込み**完了**を待たないだけで、外部リソースの読み込みを開始する前とは限りません。実際、DOMContentLoadedでブレークポイントを仕掛けても、すでにいくつかのリクエストが飛んでいました。 また、DOMContentLoaded イベントを使うには対象の Document オブジェクトにアクセスしないといけないのですが、これは iframe の読み込みの途中で作成されます。これに関するイベントはないので、タイマーで監視して、作成されたらすぐさまイベントを設定する、なんてことになります。 どうせタイマー監視するならと、DOMContentLoaded を使わず head 要素が作成されるのを待ってみましたが、やはりリソースの読み込みは行われるようで...。 外部リソースを読み込ませない 基本的にJavascriptからブラウザの通信機能をどうこうすることはできません。通信の横取りなんて危険なことはもちろん、単にブロックすることもできません。 iframe要素のsandbox属性を使えば別オリジンからのリソースをブロックできますが、同一オリジンを制限することはできません。 ページ単位では Content Security Policy というものがあり、ページの作者が意図しないリソース読み込み・実行を禁止することができます。HTTPヘッダやmetaタグでホワイトリストを指定するのですが、このmetaタグはJavascriptで挿入しても効果があります。が、読み込みが開始される前に挿入しなければなりません。 iframeのDOMを通して、外部リソースのURLをダミーのものに置き換える、という方法でも同様です。ただ、通信は発生しても見えなければいいということなら、この方法が使えるかもしれません。 またCSP用のmetaタグ挿入、外部リソースの除去、どちらにせよ iframe のDOMにアクセスするわけですが、そのためには同一オリジンもしくはCORSの設定が行われていないといけません。で、その条件を満たしているなら XMLHttpRequest でHTMLだけ取得したほうが簡単でしょう。 あとはサーバーサイドのプログラムと組み合わせるか、ですね。