• はてなブックマークに追加
  • Yahoo!ブックマークに登録
ミクシィ鈴木理恵子の“アプリ開発ビギナー向け講座” Vol.
5
開発者を悩ませる
iframe内表示Webアプリ問題とは?
フレーム内に小さなブラウザのようにWebページを表示してくれる「iframe」。特別な技術は必要ないのに、さまざまな問題に直面してしまうことが多く、開発者を悩ませます。今回はこの問題について解説します。
(取材・文/鈴木理恵子 総研スタッフ/宮みゆき 撮影/佐藤聡)作成日:12.09.27
Cookieを利用したセッション管理ができなくなるのはなぜ?

 こんにちは、ミクシィの鈴木理恵子です。前回は身近なWebの世界でよく使われているiframeを、利用シーン別に分類してご紹介しました。ソーシャルアプリ型、ソーシャルプラグイン型、ブログパーツ型、ポータル型がありましたね。

 iframeはまるで小さなブラウザであるかのように、フレーム内にWebページを表示してくれます。そのため、iframe内Webアプリは、通常のWebサイトとほぼ同じ開発方法で作成ができ、特別な技術は必要ありません。しかし、全く同じ開発方法で問題ないかというとそうでもなく、そのままだとさまざまな問題に直面してしまいます。特に「Cookieを利用したセッション管理ができない場合がある」という問題は、アプリ完成後に各ブラウザで動作テストするまで気づかないことも多く、しばしば開発者を悩ませます。今回はこの問題について取り上げたいと思います。

 まず、Webアプリのセッション管理を思い出しましょう。Webアプリは、一般的にセッション管理が必要です。Webアプリは多くのユーザから同時にアクセスを受けます。しかしHTTPリクエスト自体は1回毎に独立していて、そのままではどのユーザがどのような順番でアプリを利用しているのか、アプリは知ることができません。そこでセッション管理を行います。例えば、あるアプリで商品をカートに入れる動作が10回あったとします。セッション管理をしていれば、その10回の動作がそれぞれどのユーザによって行われたのかを判断することができます。

 ではセッション管理は、どのように行っているのでしょうか? 一般的にセッション管理は、Cookieを利用して行われています。まず、あるユーザが最初にWebアプリを利用するときに、アプリはそのユーザを一意に区別できる値を生成して、サーバに保存します。そして、この値をCookieにも保存します。ブラウザには、HTTPリクエストを送信するときに、同じドメインにより保存されたCookie情報も一緒に、サーバへ送信する働きがあります。そのため、これ以降このブラウザからWebアプリへ送られるリクエストには、ユーザを一意に区別できる値が付属します。そして、Webアプリはどのユーザによる動作なのかを判断することができます。尚、このようなセッション管理は通常フレームワークが処理を代行して隠蔽してくれるので、その仕組みを意識することは少ないかもしれません。

 さて、一般的にセッション管理はCookieを利用していると述べました。ところがiframeの中に表示されているWebアプリの場合、Cookieに情報を保存しようとしても、ブラウザが拒否することがあります。つまり、Cookieを利用したセッション管理が動作しない場合があるのです。例えば、iPhoneのデフォルトブラウザであるSafariですが、まもなく発売されるiPhone5に搭載されているiOS6(※1)からは、iframe内のWebアプリが発行するCookieを受け入れないようです(※2)。iOS5のSafariでは動作していたiframe内アプリもiOS6のSafariでは動作しない可能性があるので注意が必要です。

 では、ブラウザはなぜこのような動作をするのでしょうか? iframeは小さなブラウザのようにフレーム内にWebページを表示します。そして以前はいまより多くのブラウザでiframeの中からCookieを登録することができました。実はこのiframeの機能を利用すると、ユーザに気づかれることなくユーザのWeb閲覧履歴を取得することができる場合があります。特に前回ご紹介したソーシャルプラグイン型や、ブログパーツ型はサイズが小さいものが多いのです。そのため、ユーザはWeb画面上にこれらが配置されていても画面デザインの一部として認識し取り立てて気にすることはないでしょう。

 しかし、ユーザはサイトAのみ訪問しているつもりでも、実はサイトAに設置されているiframeの中のサイトBにも同時に訪問しているのと同じなのです。サイトBはiframeが設置されているのがサイトAだと知っているので、あるユーザがサイトAにアクセスしてページを表示した、ということがわかります。もし、このiframeがサイトAだけでなく多数のサイトに埋め込まれていた場合、サイトBは「ある特定のユーザがいつどのWebサイトにアクセスしたか」といったWeb閲覧履歴を、Cookieを利用してトラッキングすることができてしまいます。

 いままでユーザのWeb閲覧履歴をトラッキングするかどうかは、Webアプリ提供者のプライバシー・ポリシーに委ねられています。ポリシー上で明確にトラッキング行為は行わないと明記しているサービスも存在します。しかし最近は、そもそもブラウザがiframe内WebアプリのCookie利用を制限することで、ユーザのプライバシーを守ろうとする動きがあります。先ほどのiOS Safariの例も、そのような流れから発生したものなのかもしれません。ただ、Cookieは昔から親しまれているWebの基本的な技術でCookieを利用したiframe内Webアプリも非常に多く存在するためか、ブラウザの種類やバージョンによって動作はまちまちなのが現状です。

 この問題は一般に「3rd Party Cookie問題」などと呼ばれています。ブラウザのアドレスバーにURLが表示されるメインのWeb画面のドメインを1st Party、iframe内の別ドメインを3rd Partyと呼ぶことも合わせて覚えておくとよいでしょう。

 今回iframe内に表示するWebアプリでは、「Cookieを利用したセッション管理ができない場合がある」こと、そしてその背景には「3rd Party Cookie問題等と呼ばれるユーザのプライバシーに関する問題がある」ことをお伝えしました。次回は、iframe内Webアプリはどのようにセッション管理をしたらよいかについて紹介する予定です。どうぞお楽しみに!

(※1) iOS6およびiPhone5製品版については、執筆時点ではまだ本記事で取り上げた内容の動作確認をしておりませんので、ご了承ください。
(※2) 一旦1st PartyとしてCookieを保存したことがあれば、それ以降そのWebアプリはiframe内の3rd PartyアプリとしてもCookieの送信がされるようです。またこの動作はデフォルトの設定(Cookieの受入れ設定:訪問先のみ)の場合に起こります。
鈴木 理恵子

株式会社ミクシィ 技術部 コアプロダクト開発G所属。
青春時代はギター制作に明け暮れていたが、一転、IT業界に転身しプログラマとなる。
業務アプリケーションシステムの開発を経て、現在はミクシィでmixi Graph API等のアプリプラットフォーム開発を担当。

  • はてなブックマークに追加
  • Yahoo!ブックマークに登録

このレポートに関連する求人情報です

株式会社MIXI/未経験歓迎/年間休日123日/【東証プライム上場企業】“心もつながるコミュニケーション”を様々な角度から創造し、成長を続けています

募集職種ゼロから成長できる!モンスターストライクのカスタマーサポート

  • 契約社員
  • 未経験者歓迎
仕事の概要
世界最大級のスマホゲームの運営を支えていく!ユーザーの“声”をもとにした改善企画に関わるチャ…
対象となる方
【20代が活躍中!第二新卒OK/経験・知識不問】 ★人柄や意欲を重視して採用を進めていきます!
勤務地
【転勤なし/「仙台駅」直結/U・Iターン歓迎】◎仙台CSセンター:宮城県仙台市青葉区中央1-…
年収例
あなたを求める企業がある!
まずはリクナビNEXTの「スカウト」でチャンスを掴もう!
スカウトに登録する

このレポートの連載バックナンバー

鈴木理恵子のアプリ開発ビギナー向け講座

ミクシィ鈴木理恵子が、アプリ初心者の方向けに、聞きたくても聞けないアプリ開発の初歩的なノウハウや失敗回避法などを伝授します。

鈴木理恵子のアプリ開発ビギナー向け講座

このレポートを読んだあなたにオススメします

ミクシィ鈴木理恵子の“アプリ開発ビギナー向け講座”

開発者のためのiframe内アプリのセッション管理方法

鈴木理恵子のアプリ開発ビギナー向け講座開発者を悩ませるiframe内表示Webアプリ問題。前回はその現状についてお伝えしましたが、今回はiframe内Web…

開発者のためのiframe内アプリのセッション管理方法

ミクシィ鈴木理恵子の“アプリ開発ビギナー向け講座”

Webアプリ制作に役立つ「iframe」利用シーン一挙紹介

鈴木理恵子のアプリ開発ビギナー向け講座WebアプリやWebサイトの拡張、マッシュアップして連携するために使われるインラインフレーム「iframe」。今回は…

Webアプリ制作に役立つ「iframe」利用シーン一挙紹介

ミクシィ鈴木理恵子の“アプリ開発ビギナー向け講座”

Treasure Dataなら初心者も大量データ解析ができる!?

鈴木理恵子のアプリ開発ビギナー向け講座今回はTreasure Dataというクラウドサービスを利用し、アプリ開発初心者でも大量のデータを高速かつ簡単にデータ…

Treasure Dataなら初心者も大量データ解析ができる!?

ミクシィ鈴木理恵子の“アプリ開発ビギナー向け講座”

アプリデータ解析ができるおすすめクラウドサービス

鈴木理恵子のアプリ開発ビギナー向け講座アプリ開発で欠かせないのがデータ解析。今回はお手軽にアプリデータ解析ができるサービス「Google Analytics…

アプリデータ解析ができるおすすめクラウドサービス

ミクシィ鈴木理恵子の“アプリ開発ビギナー向け講座”

初心者でもわかる!アプリ開発に役立つHerokuの機能

鈴木理恵子のアプリ開発ビギナー向け講座前回ご紹介した「mixi、Facebookで活用できるアプリ自動生成機能」。どちらのアプリもHeroku上に自動生成…

初心者でもわかる!アプリ開発に役立つHerokuの機能

IT業界、生保業界…7人の人事に聞いたウラ事情

人事担当者が告白!転職者の給与はこうして決まる

「前給考慮」「経験能力に応じて優遇」などは募集条件でよく見る言葉。でも前給や経験能力を、具体的にどう考慮して給与を決め…

人事担当者が告白!転職者の給与はこうして決まる

この記事どうだった?

あなたのメッセージがTech総研に載るかも

あなたの評価は?をクリック!(必須)

あなたのご意見お待ちしております

こちらもお答えください!(必須)

歳(半角数字)
(全角6文字まで)
  • RSS配信
  • twitter Tech総研公式アカウント
  • スカウト登録でオファーを待とう!
スマートグリッド、EV/HV、半導体、太陽電池、環境・エネルギー…電気・電子技術者向け特設サイト

PAGE TOP