optimizelyみたいに他のサイトをJSでいじくる

Optimizelyみたいに、Webサイトに対してのWYSIWIG操作を提供したい場合。
または、オーバレイして何か表示したいとか。（Analytics系のツールとかで）

素直にiframeで埋め込んでやろうとしても、ドメインを跨いだ操作はセキュリティの問題で無理。
そもそもiframeでembedになることを拒否するサイトもある。

HTMLをそのままもってきて表示してやりたい。
そうすれば、クロスドメインでないので、JSで自由にアクセス出来る。

しかし、HTMLだけそのままぶっこ抜くと、ページ内のリソースのURLがおかしくなる。相対パスで読んでいる画像/CSS/JSは全てデッドリンクになってしまう。
また、こちらのドメインにあるリソースを間違って読んでしまう可能性もあるだろう。
このとき、ソースを解析して、相対パスで読んでるリソースを全て絶対パスに…というのは面倒。
手っ取り早く、相対パスのベースURLを書き換えたい…

驚くべきことに、これをやるタグがあります。

<base>

なので、フローとしてはこんな感じ

1. サーバで対象サイトにリクエストを飛ばしてHTMLをもらう
2. HTMLを弄る。
   1. <base herf="元ページのURL">を足す
   2. JSを足す
   3. position:fixed;とかでUIを足す。
   4. <script>が怖ければ除いておく。（ただし、<script>無ければ正しく表示されないサイトが多い…）
3. 2.で生成したHTMLを返す

あとは、GAとかoptimizelyみたいに、ベンダーが提供するJSを予めページに入れることが分かっているサービスなら、<iframe> + window.postMessage()を使った実装が出来ます。
むしろ、こっちのほうが主流。

参考

kimono http://www.kimonolabs.com/
optimizely https://www.optimizely.com/
GoogleAnalytics http://www.google.com/analytics/
ScrapingHub http://scrapinghub.com/