

HTML/JavaScriptのiframeタグについてご教授下さい。

■実施したい事  
iframeでhtmlを取得したいが、  
取得したhtmlの中身(cssや画像)は取得させたくない。

■詳細イメージ  
①  
iframe

[code]

    <iframe src="http://example.com/sample.html"></iframe>
    
[/code]

↓  
②  
WEBブラウザが `http://example.com/sample.html` へGETリクエストを投げて、  
レスポンスが返ってくる  
↓  
③  
WEBブラウザが返ってきたレスポンスをDOMツリーにロードする  
↓  
④  
WEBブラウザが `http://example.com/sample.html` に記載されているcssや画像を取得する

①②は実施させて、  
③の前後で処理を中断させて、  
④を実施させたくない。

■質問事項  
上記を実現させるためにはどのようなHTML/JavaScriptの実装が必要でしょうか？  
ご教授下さい。

■思うところ  
③のタイミングでイベントを発生させて、  
④を無効にするような処理が可能かな？と調べてみましたら、  
「DOMContentLoaded」というDOM読み込み完了後に呼ばれるイベントがあったのですが、  
うまく使えますでしょうか。

また、タグ等を動的に発行して、  
取得したhtmlを無効に出来るかな？と思っています、  
うまく使えますでしょうか。

また、ブラウザで発生するHTTPリクエストを全てキャッチして、  
`http://example.com/sample.html`
に記載されているcssや画像のHTTPリクエストを遮断できないかな？と思っています、いかがでしょうか。

その他、手段は問いません。  
実現できる方法をヒントだけでも良いのでご教授下さい。


CC BY-SA 3.0
2016-11-27T00:22:17.863
30700
2016-11-27T07:48:11.900
2016-11-27T06:50:56.310
19437
19734
question
javascript html http
iframeでhtmlを取得したいが、取得したhtmlの中身(cssや画像)は取得させたくない。


iframeのsrcに直接URLを書かずに、一旦JavaScriptで`http://example.com/sample.html`のソースを取得し、その中の非同期通信をするエレメント(link、srcの付いたscript、iframe、img)を削除してから、`contentDocument.write()`などでiframeの中に書き込んでやるのはどうでしょうか。エレメントそのものではなく、srcなどの属性だけを消してもいいと思います。


CC BY-SA 3.0
2016-11-27T05:45:48.633
30713
2016-11-27T05:45:48.633
19437
30700
answer


## 要約

  * 読み込むページと別オリジン（別ドメイン）のリソースだけブロックすればいい場合  
→ iframe の sandbox 属性

  * あらゆるリソースを完璧にブロック、するのは iframe では難しい 
    * 親ページと読み込むページが同一オリジン → XMLHttpRequestでHTMLだけ取得
    * 別オリジンでCORSも使えない → サーバーサイドに頼りましょう

* * *

## HTMLの読み込みの検知

[DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded)
はそもそも、外部リソースの読み込み **完了**
を待たないだけで、外部リソースの読み込みを開始する前とは限りません。実際、DOMContentLoadedでブレークポイントを仕掛けても、すでにいくつかのリクエストが飛んでいました。

また、DOMContentLoaded イベントを使うには対象の Document オブジェクトにアクセスしないといけないのですが、これは iframe
の読み込みの途中で作成されます。これに関するイベントはないので、[タイマーで監視して、作成されたらすぐさまイベントを設定する](https://stackoverflow.com/a/24603642/2818869)、なんてことになります。

どうせタイマー監視するならと、[DOMContentLoaded を使わず head
要素が作成されるのを待ってみました](https://jsfiddle.net/0xvxcu7f/2/)が、やはりリソースの読み込みは行われるようで…。

## 外部リソースを読み込ませない

基本的にJavascriptからブラウザの通信機能をどうこうすることはできません。通信の横取りなんて危険なことはもちろん、単にブロックすることもできません。

[iframe要素のsandbox属性](https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe#attr-
sandbox)を使えば別オリジンからのリソースをブロックできますが、同一オリジンを制限することはできません。

ページ単位では [Content Security
Policy](https://developer.mozilla.org/ja/docs/Web/Security/CSP/Introducing_Content_Security_Policy)
というものがあり、ページの作者が意図しないリソース読み込み・実行を禁止することができます。HTTPヘッダやmetaタグでホワイトリストを指定するのですが、[このmetaタグはJavascriptで挿入しても効果があります](https://stackoverflow.com/a/28366917/2818869)。が、読み込みが開始される前に挿入しなければなりません。

iframeのDOMを通して、外部リソースのURLをダミーのものに置き換える、という方法でも同様です。ただ、通信は発生しても見えなければいいということなら、この方法が使えるかもしれません。

またCSP用のmetaタグ挿入、外部リソースの除去、どちらにせよ iframe
のDOMにアクセスするわけですが、そのためには同一オリジンもしくはCORSの設定が行われていないといけません。で、その条件を満たしているなら
XMLHttpRequest でHTMLだけ取得したほうが簡単でしょう。

あとはサーバーサイドのプログラムと組み合わせるか、ですね。


CC BY-SA 3.0
2016-11-27T07:31:34.767
30716
2016-11-27T07:48:11.900
2017-05-23T12:38:55.307
-1
8000
30700
answer