0

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

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

■詳細イメージ

iframe

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



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リクエストを遮断できないかな?と思っています、いかがでしょうか。

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

4
  • 取得したいURLは別ドメインですか?
    – unarist
    Commented 2016年11月27日 1:32
  • 同ドメインも別ドメインも両方用途があります。 何か関係があるのでしょうか?
    – YYYYY
    Commented 2016年11月27日 3:30
  • 1
    ちょうど回答でも言及されているように、AjaxでHTMLだけ取得することを考えたのですが・・・同ドメイン(正確には同一オリジン or CORSがよしなにされている)でないと無理です。
    – unarist
    Commented 2016年11月27日 6:12
  • Ajaxでは難しそうですね。 やりたい事は質問の通りなのですが、 別の方法がないものでしょうか?
    – YYYYY
    Commented 2016年11月27日 6:36

2 件の回答 2

2

要約

  • 読み込むページと別オリジン(別ドメイン)のリソースだけブロックすればいい場合
    → 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だけ取得したほうが簡単でしょう。

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

1

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

3
  • kaitoy さん、ご回答ありがとうございます。 「一旦JavaScriptでhttp://example.com/sample.htmlのソースを取得し」の部分が出来ないのです。。 example.comは別ドメインなのでAjax(XMLHTTP)でばオリジン制限がかかっていて取得が出来ません。 ソースを取得する方法はございますでしょうか?
    – YYYYY
    Commented 2016年11月27日 6:33
  • <script id="hoge" src="http://example.com/sample.html" type="text/html"></script>みたいにして、document.getElementById('hoge')から取り出せるかと思ったのですが、なんだか取り出せません。HTMLソースのダウンロードはしているようなのですが。というかもっと正攻法があるのかもしれませんが。
    – kaitoy
    Commented 2016年11月27日 7:19
  • <script>srcでとってきたものを取得する方法はないようです。手詰まりました。
    – kaitoy
    Commented 2016年11月27日 7:42

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。