[40] 多くの Webブラウザーは、単独のアプリケーションとしてだけでなく、 他のアプリケーションに組み込む (埋め込む) GUI 部品 (ウィジェット) として利用できる API を有しています。
[9] 現代の OS のほとんどにはWebブラウザーが標準搭載されており、 それをアプリケーションが埋め込みブラウザーとして利用できる OS 標準の API が提供されています。
[42] スマートフォンアプリは機能の一部または全部を OS の提供する Webブラウザー機能により実装していることがあり、これはアプリ内ブラウザーや Webビューなどと呼ばれます。
[24] 埋め込みブラウザーは、通常の Webブラウザーと一部異なる動作をする (できる) 場合があります。
[1] 埋め込みブラウザーは、表示上は入れ子閲覧文脈のように見えるかもしれませんが、 それ自体が単独の Webブラウザーですから、実際には最上位閲覧文脈です。 複数の最上位閲覧文脈を同時に持つことができるかは、実装次第です。
[5] 新しい最上位閲覧文脈を開くときは通常の Webブラウザーを使うような実装もあります。 新しい最上位閲覧文脈を開くオプションを提供せず、著者が新しい最上位閲覧文脈を求めた時であっても同じ最上位閲覧文脈を使い続けるような実装もあります。
[70] 著者による window.close
が機能するかどうか、通常の Webブラウザーとは異なる判断基準が必要かもしれません。
[8] 埋め込みブラウザーでは、認証ダイアログ、 ServiceWorker や通知、全画面表示、 Geolocation API など、 提供されない機能があるかもしれません。
[10] navigate や fetch でアクセスできる範囲をアプリケーションから制約できることもあります。
[71] 埋め込みブラウザー特有の不具合が生じることがあります。
[72] iOS の Safari を使った複数のアプリ (facebook、SmartNews など)
で、初期レンダリング時点の viewport の高さ (innerHeight
や
position: fixed; top: 0; bottom: 0
な要素の高さなど)
が実際の viewport の高さよりも大きい現象が確認されています。
viewport の上にアプリ側のヘッダーがあり、その部分が高さに含まれているようです。
読み込み中のいずれかの時点で再計算されているらしく、いつの間にか正しい値が返されるようになり、
bottom
の指定も正しい位置でレンダリングされます。
ひどいことに、再計算の際に resize
イベントは発生していません。
[125]
実装上の制約などのために一部の (あってもなくても大きな支障はない) 機能が埋め込みブラウザーでは省かれることがあります。
[12] アプリケーションは、通常の Webブラウザーにない独自の API をWebページに提供できるかもしれません。
[11] 表示されるWebページが限定される場合、本来ならWeb互換性に影響するような独自処理をアプリケーションが行えることもあります。
[97] 埋め込みブラウザーによっては、埋め込んだアプリケーションの独自のセキュリティーモデルの採用を認めていることがあります。 例えば、同一起源ポリシーが一部緩和されていたり、 通常の Webサイトでは認められないはずの URL へのリンクが認められていたりするかもしれません。
[98] しかし、慎重に設計されている本来の Web のセキュリティーモデルを崩すことになりますから、 セキュリティーへの影響を十分検証する必要があります。 ちょっと不便だから程度の理由で行うべきではありません。
[6] 埋め込みブラウザーは、埋め込んだアプリケーションの独自の User-Agent:
や navigator.userAgent
の値を使うこともあれば、
元の Webブラウザーの共通の値を使うこともあります。
[22] 一般のWebサイトを表示できるアプリ内ブラウザーであれば、
Webサイト側が User-Agent:
や Navigator
によって挙動を変えることがあるので (ひどい話です)、相互運用性のため、
元の値を変えるべきではありません。
[23] しかしアクセス対象が特定のサイトに限定されており、通常の Webブラウザーに無い特殊な機能を提供する場合には、 通常のアクセスとの区別のため、あるいは統計のため、異なる値を使う方が好ましいかもしれません。
[116]
ただし、
User-Agent:
はセキュリティー機能ではありません。
User-Agent:
の値によって正規のアプリか否かを判断してはいけません。
[117] アプリケーションにブラウザーを埋め込む方法 (API) は、製品ごとに異なっています。 標準化された方法はありません。
[80]
HTML の拡張:
<iframe sandbox>
,
<iframe mozbrowser>
,
<wevview>
,
<x-ms-wevview>
,
<portal>
,
<fencedframe>
[43] こうした埋込み型 Webブラウザーは、単独の Webブラウザーと (あるいは埋め込みブラウザー同士で) Cookie やフォーム、表示履歴等のデータを共有していることもありますが、大抵は別管理になっています。
[105] 特定の埋め込みブラウザーの版を用いたい、 あるいはプラットフォームの埋め込みブラウザーの版が古すぎる、 といったような理由で、アプリケーションが埋め込みブラウザーを完全に組み込んだ形で利用される場合もあります。 (当該アプリケーションの開発者にとっては既存の埋め込みブラウザーの流用ですが、 プラットフォームや他のアプリケーションや利用者から見れば Webブラウザー機能が含まれる独自のアプリケーションということになります。)
[106] ある時期の Android には、古い WebKit から派生して開発が止まった Android Browser と最新の Chrome があって、 どちらも同じ系譜のレンダリングエンジンを用いていたものの、 実装としては完全に別物でした。
[45] 埋込み型 Webブラウザーは当該アプリケーションと統合された UI を提供できることから、より良い利用者体験を提供できる可能性があります。 一方で用途によっては機能の少ない Webブラウザーでしかなく、利用者に不便を強いたり、 セキュリティー上の問題を生じたりすることもあります。
[46] 例えば任意のページを表示できる Webブラウザー機能を組み込みながら、 そのページの URL や TLS証明書の情報を表示できないような場合には、 フィッシングなどに悪用される危険性があります。
[61] 一般的な Webブラウザーであれば Webサイトに通知されたり、 利用者の操作に割り当てられていたりする操作が、 埋め込みブラウザーの場合埋め込まれているアプリケーションに奪われて利用できないことがあります。
アプリケーションの開発者としてはアプリケーションの他の機能との整合性や、 利用者の利便性を考えてそのように設計しているのでしょうが、 実際には利用者に通常の Webブラウザーと違う体験を押し付けて困惑させるだけだったりします。
[62] 例えば、「戻る」ボタンが Webブラウザーの履歴の移動操作ではなく、 アプリケーションの独自の遷移操作に関連付けられていて、 埋め込みブラウザー内の履歴の「戻る」操作ができないことがあります。
[74] SmartNews はアプリ内ブラウザーの上に重ねて履歴の移動 (戻る・進む) のボタンを提供しています。位置は左下 (端からは少し離れた場所) に固定されており、変更はできないようです。
Webページの下側に position: fixed
で固定の内容を表示しているような
Webサイトでは、スクロールもできず、重なった部分に何があるか利用者が知ることができません。
[77] 一般の Webサイトを閲覧できる埋め込みブラウザーは、 表示中の Webページをプラットフォームの標準のWebブラウザーで開くことを利用者が指示できる手段を提供しているのが普通です。
[115] 一般にアプリ内ブラウザーは任意の Webサイトの快適な閲覧に十分な機能を提供していないので、 利用者に標準のWebブラウザーを使う選択肢を与えることは重要です。
[109] アプリケーションの実装手段としてのみ用いられ特定の Webページしか表示しない埋め込みブラウザーは、 利用者がWebブラウザーであると認知できないくらいに利用者インターフェイスに馴染ませてあるかもしれません。
[26] Webサイトの性質にも依存しますが、一般の Webサイト (自身の提供するネイティブアプリケーションが埋め込みブラウザーを使っているわけではないもの。) であっても、埋め込みブラウザーからアクセスされることは十分にあり得ます。
[29] そうした埋め込みブラウザーの利用は、 User-Agent:
などで判断できることもあれば、元の Webブラウザーと区別できない可能性もあります。
[13] Google Analytics では、 Safari のアプリ内ブラウザーからのアクセスは Safari (in-app) と表示されます。
[103] 先述の通りアプリ内ブラウザーは当該アプリの独自仕様・不具合が含まれていることがあり、 アドレスバーや開発者ツールがないためデバッグが困難だったり、 そもそもアプリ内ブラウザー固有の問題であると気づきにくかったりして、 困惑しているWeb開発者もいます。
[119] 本来のWebブラウザーと同等の機能を提供できないアプリ内ブラウザーは欠陥製品だという認識を、 アプリの開発者が持ってほしいものですがね... 同等の機能を提供できない、 同等かどうか自身を持てないレベルの開発者は、 任意のWebサイトを閲覧可能なアプリ内ブラウザーを使わんでほしい。
[120] そんな実情があるので Web開発者としてはいっそアプリ内ブラウザーは全部ブロックしたい勢いなんだが、 アプリ内ブラウザーを確実に識別する方法はないし、 使いたい機能が揃っているか個別に検査するのも限界があるからなあ。
[64] 埋め込みブラウザーを利用するということは当該アプリケーションの開発者が任意の Webページの内容にアクセスできる可能性があるということです。
[65] A社のアプリケーションに埋め込まれた Webブラウザーで A社と無関係のB社の Webサイトを利用してクレジットカード決済すると、 利用者の知らないうちにクレジットカード情報がA社に送信されてしまう危険性があります。
[66] もちろんこれは通常の Webブラウザーやオペレーティングシステムにも言えることですが、 そうしたプラットフォームの開発者に対しては利用者ははじめから全面的に信用していると考えられます。
[67] iPhone や Safari を利用するということは、その開発者である Apple を信用してデータを預けることを意味しています。 Apple を信用できないなら、 iPhone を使うべきではないでしょう。
[68] 利用者は、単なるアプリに対してはそこまで思慮深く検討していないかもしれません。 ですが、自衛のため、むやみにアプリ内ブラウザーで無関係の Webサイトを閲覧することがないよう注意するべきです。
[69] アプリケーションの可能な操作を制限して利用者を保護する機能を持つプラットフォームは、 アプリ内ブラウザーの機能も適切に制限したり、利用者の確認を得たりするべきです。
[123]
TikTok などは中華人民共和国政府にアプリ内ブラウザーの個人情報を無断送信しているなどとしてセキュリティー研究者や各国政府の調査対象になっています。
[122] Felix KrauseさんはTwitterを使っています: 「When opening a website from within the TikTok iOS app, they inject code that can observe every keyboard input (which may include credit card details, passwords or other sensitive information) TikTok also has code to observe all taps, like clicking on any buttons or links. https://t.co/Dcv0N4ccKD」 / Twitter, 午前6:06 · 2022年8月19日 , https://twitter.com/KrauseFx/status/1560372509639311366
[140] スマホアプリ内ブラウザでのコンテンツ表示に関する注意喚起 | JSSEC, https://www.jssec.org/column/20220824-2.html
[144] Modernizing OAuth interactions in Native Apps for Better Usability and Security — Google for Developers Blog - News about Web, Mobile, AI and Cloud, , https://developers.googleblog.com/2016/08/modernizing-oauth-interactions-in-native-apps.html
[145] 「Google でログイン」の問題を解決する - Google アカウント ヘルプ, https://support.google.com/accounts/answer/12917337?hl=ja#zippy=%2Cdisallowed-useragent
「403 disallowed_useragent」というエラーが表示された場合は、アプリで埋め込みの WebView が使用されています。一部のデベロッパーは、WebView を使用してアプリ内のウェブ コンテンツを表示しています。その場合、サードパーティがユーザー / Google 間の通信にアクセスして変更できる可能性があるため、セキュリティが万全とはいえません。
アカウントのセキュリティを強化するため、埋め込み WebView のサポートは 2021 年 9 月 30 日をもって終了しました。
[91] 歴史的に Webブラウザーのレンダリングエンジンは利用者インターフェイスと不可分でしたが、 埋め込みブラウザーの仕組みを実装することにより、他の Webブラウザーのレンダリングエンジンを使った Webブラウザーが実現可能となりました。
[92] 既存の Webブラウザーのレンダリングエンジンを流用できるため、 Webブラウザーへの参入障壁が大幅に低下しました。 それらは、本家 Webブラウザーと、あるいは他の同種の Webブラウザーと、 利用者インターフェイスや Web互換性に影響しない付加価値で競争することになります。
[95] 主要な Webブラウザーがタブ機能を実装していなかった時代には、 タブブラウザーが人気を博しました。
[96] Trident、Gecko、WebKit など複数のレンダリングエンジンを組み込み、 利用者が必要に応じて切り替えられるWebブラウザーもありました。
[94] iOS では任意のプログラムを実行可能なアプリを公式の App Store で配布することを Apple が規制しているため、プラットフォームの標準の WebKit を使う以外に Webブラウザーを配布する手段がありません。 従って、 iOS 向けに App Store で配布されている Webブラウザーアプリは、 (Opera Mini のような例外を除き) すべて同じレンダリングエンジンでレンダリングエンジンのみ異なるものです。
[76] Google Chrome Frame は、 IE に Chrome を埋め込みブラウザーとして組み込むものでした。
[126] 今や多くのスマホアプリがアプリ内ブラウザー機能を持っていますが、 標準的なWebブラウザーより機能が劣り、 正常に動作しないWebサイトが多いのが困りものです。 Webサイト開発者にとっても動作確認が面倒な上にアプリ判定が難しく、 アプリの更新でも挙動が変わり得るので、対策は困難です。
[127] いくつかのアプリは、利用者がアプリ内ブラウザーを使うか標準のWebブラウザーを使うかを設定で変更できます。 いくつかのアプリは、いったんアプリ内ブラウザーで開いたWebページを標準のWebブラウザーで開き直すボタンなりメニューなりを用意しています。 知識の少ない利用者には難しく、そうでなくても利用者に無駄な手間をかけさせる酷い仕様ですが (UX がどうのこうのといつも偉そうな講釈を垂れる「専門家」達もなぜかこういう機能には何も言いませんね、不思議です)、 こうした回避機能を提供しているだけまだマシな部類です。
クエリパラメータ付きのURL 説明 https://example.com/? openExternalBrowser=1
対象のURLを外部ブラウザで開きます。 https://example.com/? openInAppBrowser=0
対象のURLをChromeカスタムタブで開きます。(Android版LINEのみ対応)[1]
のように指定して、 URL をどのWebブラウザーで開くか個別に指示できます。 >>128
[130] この URL query はどの HTTP URL にも付けられるようです。 本来サーバーがその解釈を定めるべき (でサーバー以外にはその決定権がない) URL query を濫用するのは、設計者の技術的センスの欠如以外の何者でもありませんが、 先述の通りこうした回避機能があるだけまだマシです。
[132]
サーバーが既に URL query を使っている場合は、
その末尾に &
で区切って繋げてやっても動作するようです。
>>131
末尾以外の途中でも同じように動作するのかは未検証です。
[133] 当然ながら、たまたま同名の query をサーバーが使っている場合は、 誤動作のおそれがあります。また、 query で引数構文以外が使われる場合 (HTTP および URL の仕様上まったく正当で、 決定権はサーバーだけにあります)、 この指定を付け加えることができません。
[134] LINE で正常に扱えるためには LINE の決めた仕様に従えというのは、傲慢です。 HTTP も URL も LINE のものではありません。
[135] しかしながら、繰り返しますが、このような機能を提供しているだけ LINE には良心の欠片が残っているのであり、他のアプリにはこのような回避機能がありません。
[101] 従来埋め込みブラウザーは特定のアプリケーションの専用の動作を実現するため、 あるいはプレビューのような補助的な使い方をするために使われており、 専用の Webブラウザーを使わずに埋め込みブラウザーを使うのは一般的とはいえませんでした。
[102] しかし2010年代後半の SNS などのスマートフォンアプリの普及により、 Web 外で交換された URL をアプリ内ブラウザーで開く使い方がかなり増えてきました。 例えば LINE や Facebook で共有された Webページを LINE アプリや Facebook アプリ内で開くというもので、 Webサイトの利用者層によってはアクセスの大部分がアプリ内ブラウザーというケースすらあります。
[121] 最近はどうなのか知りませんが、 以前は iOS は複数のアプリの切り替えが UI 的に分かりにくかったので、 Webサイトを表示したい時に UX がどうこうとかイキった開発者がアプリ内ブラウザーを使いたいがちだったそうです。 一方 Android は当時もアプリの切り替えが普通に行えたので、 Androidアプリにはそのような慣習はなかった (ただし iOS と仕様を揃えるためアプリ内ブラウザーを使うアプリも少なくなかった) らしいです。
[124] 広く一般に公開されているものもあれば、 特定製品専用のものもあります。
[30] 本項の埋め込みブラウザーは、単に Webページ内に iframe
要素を置いただけのもの (入れ子閲覧文脈) とは異なります。
[111] 入れ子閲覧文脈は X-Frame-Options:
の制約を受けますが、
埋め込みブラウザーでは制約を受けません。
その他第三者としての制約の影響を受けません。
[44] より発展したものとして、 Webブラウザーのレンダリングエンジン等を流用したアプリケーション実行環境が OS の標準機能として、あるいは開発環境等と共に提供される実行環境として用意されていることがあります。
[14] その場合、当該実行環境上のアプリケーションとしてのレンダリングの一部として、 埋込み型の Webブラウザーが用意されることもあります。
[47] 例えば Chrome Apps には、 webview
要素があります。
iframe
要素とは違って、最上位閲覧文脈を作成するものになりますから、
埋め込み Webブラウザーと理解するべきものです。
[17] WinJS APIs には x-ms-webview
要素があります。
[7] Chrome Custom Tabs も参照。
[19] ネイティブアプリケーションの通常の方法ではなく Webビュー (埋め込みブラウザー) を使う開発手法を HTML5、あるいは (HTML5 とネイティブアプリケーションの) ハイブリッドと呼ぶ人もいるようです。
[41] 古くは IE が Windows 標準の Webブラウザーコンポーネントとして提供されており、 これを組み込んだ Windows アプリケーションがいくつもありました。
[21] アプリ内ブラウザと広告配信についての調査結果 - Qiita () https://qiita.com/ta__ho/items/2fc8e02b1bb8f99883d7
[31] Android のアプリ内ブラウザについてのまとめ - Qiita () https://qiita.com/otofu-square/items/3153dc75438acb3f71d0
[32] Android 版 LINE にアプリ内ブラウザが実装されてしまったが無効にする設定が見つからない | Lonely Mobiler () http://loumo.jp/wp/archive/20160702120051/
[33] Yahoo! JAPANアプリヘルプ(Android向け) - アプリ内ブラウザーについて () https://m.yahoo-help.jp/app/answers/detail/p/690/a_id/46754
[35] アプリ内ブラウザでSafariを開くことが出来る連携機能Browsecurely|キセノンテンター () http://xenontenter.com/browsecurely/
[37] アプリ内ブラウザがさらに使いやすく iOSアプリバージョン3.4をリリースしました - はてなブックマーク開発ブログ () http://bookmark.hatenastaff.com/entry/2015/12/22/112353
[53] ブラウザかWebViewか、どちらで開かれたのかを判別するには - console.lealog(); () http://lealog.hateblo.jp/entry/2014/10/09/130344
[54] T28_tatsuyaさんのツイート: "本当だ!ツイッターのアプリ内ブラウザだと、つぶやくページに行けない_(:3 」∠ )_ 他のブラウザで開いてやって下さい、、、_(:3 」∠ )_ RT:@xxsanzashixx: あたったあと、つぶやく!押すと、白い画面になると思う…" () https://twitter.com/t28_tatsuya/status/618716728474755072
[55] iOSのアプリ内Webブラウザーでコピペメニューが表示されない場合の対処方法 () http://hitoriblog.com/?p=38274
[79] WebView Class (Windows) () https://msdn.microsoft.com/ja-jp/library/windows/apps/windows.ui.xaml.controls.webview
[104] Internet Explorerのアドレスバーに入力した内容をWebページが読み取れるバグ | スラド セキュリティ () https://security.srad.jp/story/17/09/30/1832253/
[108] WKWebView で target = _blank と POST の組み合わせ注意 - star__hoshi's diary () http://starhoshi.hatenablog.com/entry/2017/01/06/WKWebView_%E3%81%A7_target_%3D__blank_%E3%81%A8_POST_%E3%81%AE%E7%B5%84%E3%81%BF%E5%90%88%E3%82%8F%E3%81%9B%E6%B3%A8%E6%84%8F
[118] 【???】スマホゲーム「アイドルマスターミリオンライブ!シアターデイズ」では阿部寛のHPが見れるらしい - Togetter () https://togetter.com/li/1606720
[142] 抜け道もあるが、無意味ではない スマホの青少年向けフィルタリング、「される側」はどうしてる? | i:Engineer(アイエンジニア)|パーソルクロステクノロジー, https://staff.persol-xtech.co.jp/i-engineer/product/SPfilter
鈴木さん:ただ、これはスマートフォンの標準ブラウザに関しての話なので、アプリ内のブラウザは対象外になります。ですので、例えば「LINEで回ってきたURLを、アプリ内のブラウザで開けてしまう」という弱点があるんですよ。……というかそもそも、LINEも利用推奨年齢が12歳以上のアプリではあるんですけどね。
[143] 長岡りみやさんはTwitterを使っています: 「ANAアプリからJAL航空券を予約する方法 ①ANAアプリで「運航の見通し」を開く ②ANAウェブサイトのトップページに移動し、サイト内検索で「植物防疫所」を検索 ③「植物検疫からの重要なお知らせ|ANA」を開き、「農林水産省 植物防疫所のウェブサイト」と書かれたリンクを開く」 / X, , https://twitter.com/nagaok_arimiya/status/1687152231580368896