埋め込みニュースルームのhelper.htmlはなぜ必要？

こんにちは、Mynewsdesk Japanテクニカルマネージャーの前山です。

MynewsdeskのニュースルームにはHosted Newsroomという機能があり、これを使うと好きな場所にニュースルームを埋め込むことが出来ます。すでにWebサイトを持っている企業がほとんどという時代ですので、その中にニュースルームを埋め込んでしまえるのは大変便利な機能です。

このHosted Newsroomを使うには、ニュースルームと同じドメインにhelper.htmlというファイルを設置する必要があります。今回はこのファイルがなぜ必要なのか、なぜ同じドメイン上になければいけないのかを、コードを読みながら見てみます。JavaScriptに関する技術的な内容になります。

埋め込みの仕組み

ニュースルームを埋め込むには、次のようなスクリプトをページ内に記述します。（抜粋）

(function () {
 var s = document.createElement("script");
 s.type = "text/javascript";
 s.async = true;
 s.src = "//mynewsdesk-japan.mynewsdesk.com/hosted_newsroom.js";
 var i = document.getElementsByTagName('script')[0];
 i.parentNode.insertBefore(s, i);
})();

hosted_newsroom.jsというJavaScriptファイルを、scriptタグを挿入することでページ内 に設置しています。こうして設置されたスクリプトは即座に実行されます。 

hosted_newsroom.jsでは、iframeをページ内に設置しています。iframeのsrcはもちろんニュースルー ムそのものです。

var i = document.createElement("iframe");
i.id = "mnd-iframe";
（略）i.height = "3000"; （略）
i.src = mynewsdeskIframeSrc();
var s = document.getElementById("mnd-script");
s.parentNode.insertBefore(i, s.nextSibling);

これでニュースルームを埋め込むことができました。YouTubeの埋め込みなども基本的に は同じ原理で動作していると思います。

ところが、これだけでは実は問題があります。一つは、iframeの高さが3000ピクセルで固定になっていること。表示されているコンテンツの長さに合わせてiframeの高さを調節しないと、埋め込みニュースルームの下に大きく隙間が空いているように見えたり、長い記事の場合、下のほうが切れてしまうおそれがあります。もう一つは、ニュースルーム内のリンクをクリックした時にアドレスバーのURLが変わらないこと。これではブラウザの戻るボタンが予想外の動作をしてしまいます。

Same-origin Policy

iframeの高さを調整したり、アドレスバーに表示されているURLを変更したりするのはJavaScriptでは簡単にできるはずですが、なぜそれができないのかと疑問に思われた方もいると思います。答えはSame-origin policyです。

これはブラウザに実装されているセキュリティ上の制限で、JavaScriptでアクセス（操作）できるのは同じドメイン上のドキュメントに限られるというものです。

今回の場合、外側のページに配置されたiframeの高さを、その中身の高さに応じて調整したいわけです。すると中身のドキュメントから外のiframeを操作するか、外のドキュメントからiframeの中身の高さを取得するか、どちらかを行わなければいけませんよね。

ところが外側のページは例えばcompany.com、中身はmynewsdesk.comにありますから、Same-origin policyのせいで上記のどちらも実行できません。やってみるとSecurityErrorが発生するはずです。

Mynewsdeskの解決策

そこでMynewsdeskのシステムでは、さらにもう一つ見えないiframeを設置しすることでこの問題を解決しています。iframeが二重の入れ子になっているわけですね。

この最も内側のiframeに読み込まれるのが、helper.htmlです。

このhelper.htmlはcompany.comに設置されていますので、helper.htmlからであれば、一番外のドキュメントにあるiframeを操作することができてしまいます。

ではhelper.html（に書いてあるスクリプト）はどうやってニュースルームの高さを知るのか？その答えはニュースルームで実行されるJavaScriptに書いてあります。以下はnewsroom.jsをbeautifyしたものの一部です。

var i = e + "?height=" + t + "&location=" + n;
i !== r.attr("src") && r.attr("src", i)

そう、実はiframe srcのURLにパラメータとしてくっつけているんですね。確かにiframe のsrc URLであれば、外側からはiframe.src、内側からはdocument.locationで取得することができます。

helper.htmlの仕組みのまとめ

• 埋め込みニュースルームはiframeで表示されている
• 埋め込みニュースルームの中にはもうひとつのiframeがあり、そこにhelperが読み込まれる
• helperの読み込みURLには高さがURLパラメータでくっついている
• helperは自分のURLパラメータを元に、外の外（埋め込まれ側）のページを操作し、 ニュースルームiframeの高さを変更する

以上がhelper.htmlの仕組みです。このファイルが設置されていないと、あるいは間違っ た内容になっていると、２つ目のステップ以降が実行されないため、高さがおかしくなったりしてしまうわけですね。ちなみに、このHosted Newsroomの機能が使えるのは、Mynewsdesk Premiumプラン（年間65万円/月額6万円）になります。それでは今回はここまで！