/
864.txt
718 lines (527 loc) · 38.2 KB
/
864.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
[40] 多くの [[Webブラウザー]]は、単独の[[アプリケーション]]としてだけでなく、
他の[[アプリケーション]]に組み込む (埋め込む) [[GUI]] 部品 ([[ウィジェット]]) として利用できる
[[API]] を有しています。
[9] 現代の [[OS]] のほとんどには[[Webブラウザー]]が標準搭載されており、
それを[[アプリケーション]]が[DFN[埋め込みブラウザー]]として利用できる [[OS]]
標準の [[API]] が提供されています。
[42] [[スマートフォンアプリ]]は機能の一部または全部を [[OS]] の提供する
[[Webブラウザー]]機能により実装していることがあり、これは[DFN[アプリ内ブラウザー]]や
[DFN[Webビュー]]などと呼ばれます。
* 機能
[24] [[埋め込みブラウザー]]は、通常の [[Webブラウザー]]と一部異なる動作をする
(できる) 場合があります。
** Web プラットフォームの機能
[1] 埋め込みブラウザーは、表示上は[[入れ子閲覧文脈]]のように見えるかもしれませんが、
それ自体が単独の [[Webブラウザー]]ですから、実際には[[最上位閲覧文脈]]です。
複数の[[最上位閲覧文脈]]を同時に持つことができるかは、実装次第です。
[5] 新しい[[最上位閲覧文脈]]を開くときは通常の [[Webブラウザー]]を使うような実装もあります。
新しい[[最上位閲覧文脈]]を開くオプションを提供せず、[[著者]]が新しい[[最上位閲覧文脈]]を求めた時であっても同じ[[最上位閲覧文脈]]を使い続けるような実装もあります。
[70] [[著者]]による [CODE(JS)@en[window.close]] が機能するかどうか、通常の [[Webブラウザー]]とは異なる判断基準が必要かもしれません。
-*-*-
[8] [[埋め込みブラウザー]]では、[[認証ダイアログ]]、 [[ServiceWorker]] や[[通知]]、[[全画面表示]]、
[[Geolocation API]] など、
提供されない機能があるかもしれません。
[10] [[navigate]] や [[fetch]] でアクセスできる範囲を[[アプリケーション]]から制約できることもあります。
;; [[navigate]]、[[navigation scope]] を参照。
-*-*-
[71] [[埋め込みブラウザー]]特有の不具合が生じることがあります。
[72] [[iOS]] の [[Safari]] を使った複数の[[アプリ]] ([[facebook]]、[[SmartNews]] など)
で、初期[[レンダリング]]時点の [[viewport]] の高さ ([CODE[innerHeight]] や
[CODE[[[position: fixed]]; [[top]]: 0; [[bottom]]: 0]] な[[要素]]の高さなど)
が実際の [[viewport]] の高さよりも大きい現象が確認されています。
[[viewport]] の上に[[アプリ]]側の[[ヘッダー]]があり、その部分が高さに含まれているようです。
読み込み中のいずれかの時点で再計算されているらしく、いつの間にか正しい値が返されるようになり、
[CODE[bottom]] の指定も正しい位置で[[レンダリング]]されます。
ひどいことに、再計算の際に [CODE[resize]] [[イベント]]は発生していません。
[TIME[2017-03-01T08:19:28.200Z]]
;; [73] [[ヘッダー]]部分の裏側に[[半透明]]で[[スクロール]]可能な上部の領域
(本来スクロールしないとレンダリングされないはずの部分)
が少し見えるように実装されていたりもしますが、その辺も関係しているのでしょうか。
;; [75] [[履歴]]移動で謎の [CODE[resize]] が発生することはあるようです。
** 独自機能
[12] [[アプリケーション]]は、通常の [[Webブラウザー]]にない独自の [[API]]
を[[Webページ]]に提供できるかもしれません。
[11] 表示される[[Webページ]]が限定される場合、本来なら[[Web互換性]]に影響するような独自処理を[[アプリケーション]]が行えることもあります。
;; [25] ただ、[[相互運用性]]のため、そうした特殊な動作を使うのは、
一般の [[Webサイト]]ではなく、特定の[[アプリケーション]]の[[埋め込みブラウザー]]でのみアクセスする特別な
[[Webサイト]]に限定するべきです。
[112] 独自機能を追加する場合、
[[セキュリティー]]問題を十分に検討するべきです。
[EG[
[114] [[利用者]]が登録した[[個人情報]]にアクセスできる特別な [[API]]
を持った[[埋め込みブラウザー]]を使って[[掲示板]]の
[[HTML]] データを表示する時、悪意ある[[利用者]]の投稿が当該 [[API]]
を使ってデータを取得できてしまわないよう注意が必要となります。
]EG]
[EG[
[113]
[[埋め込みブラウザー]]を受信した[[メール]]の [[HTML]]
の表示と[[利用者インターフェイス]]の機能の実装の両方に使っている [[MUA]]
では、任意の第三者から送られてくる可能性がある[[メール]]の [[HTML]]
の表示で独自機能を使えてしまわないように注意しなければいけません。
]EG]
** 独自のセキュリティーモデル
[97]
[[埋め込みブラウザー]]によっては、埋め込んだ[[アプリケーション]]の独自の[[セキュリティーモデル]]の採用を認めていることがあります。
例えば、[[同一起源ポリシー]]が一部緩和されていたり、
通常の [[Webサイト]]では認められないはずの [[URL]] への[[リンク]]が認められていたりするかもしれません。
[98]
しかし、慎重に設計されている本来の [[Web]] の[[セキュリティーモデル]]を崩すことになりますから、
[[セキュリティー]]への影響を十分検証する必要があります。
ちょっと不便だから程度の理由で行うべきではありません。
[EG[
[99]
例えば、[[SNS]] の[[投稿]]の [[HTML]] を表示する時、
通常の [[Webブラウザー]]なら何も起こらないはずの悪意あるコードが、
セキュリティーの制約が緩和された[[埋め込みブラウザー]]では悪意通りに動作し、
[[利用者]]に害をもたらす危険性があります。
]EG]
** 識別情報
[6] 埋め込みブラウザーは、埋め込んだ[[アプリケーション]]の独自の [CODE(HTTP)@en[[[User-Agent:]]]]
や [CODE(JS)@en[[[navigator.userAgent]]]] の値を使うこともあれば、
元の [[Webブラウザー]]の共通の値を使うこともあります。
[22] 一般の[[Webサイト]]を表示できる[[アプリ内ブラウザー]]であれば、
[[Webサイト]]側が [CODE(HTTP)@en[User-Agent:]] や [CODE(DOMi)@en[Navigator]]
によって挙動を変えることがあるので (ひどい話です)、[[相互運用性]]のため、
元の値を変えるべきではありません。
[23] しかしアクセス対象が特定のサイトに限定されており、通常の [[Webブラウザー]]に無い特殊な機能を提供する場合には、
通常のアクセスとの区別のため、あるいは統計のため、異なる値を使う方が好ましいかもしれません。
[116]
ただし、
[CODE[User-Agent:]]
は[[セキュリティー]]機能ではありません。
[CODE[User-Agent:]]
の値によって正規の[[アプリ]]か否かを判断してはいけません。
** Web 互換性との関係
[78] [SEE[ [[Web互換性]] ]]
** API
[117]
[[アプリケーション]]にブラウザーを埋め込む方法 ([[API]]) は、製品ごとに異なっています。
[[標準化]]された方法はありません。
* 単独 Web ブラウザーとの関係
[43] こうした埋込み型 [[Webブラウザー]]は、単独の [[Webブラウザー]]と
(あるいは埋め込みブラウザー同士で) [[Cookie]]
や[[フォーム]]、表示[[履歴]]等のデータを共有していることもありますが、大抵は別管理になっています。
;; [2] 意図せず [[Cookie]] や[[認証]]などの情報が共有され、
[[Webブラウザー]]側の [[Webアプリケーション]]のセッションと外部の[[アプリケーション]]の情報が紐付けられてしまうことは避けなければなりません。
[EG[
[3] 例えば [[MUA]] の[[埋め込みブラウザー]]と通常の [[Webブラウザー]]で [[Cookie]]
が共有されていると、[[メールアドレス]]と [[Webアプリケーション]]の[[アカウント]]が意図せず紐付けされる危険性があります。
]EG]
;; [18] 単独の [[Webブラウザー]]と埋め込みブラウザーとで情報が共有されていて、
埋め込みブラウザーに特定アプリケーション用の特別な機能が提供されていると、
悪意ある第三者が当該アプリケーション製作者の想定しない方法でその機能を呼び出すことができる
(当該アプリケーション内ではあり得ない形の情報を単独の [[Webブラウザー]]で通常の方法で保存し、
埋め込みブラウザーからそれを利用させることができる) かもしれず、
[[セキュリティー]]上の懸念となり得ます。
* 重複
[105] 特定の[[埋め込みブラウザー]]の版を用いたい、
あるいは[[プラットフォーム]]の[[埋め込みブラウザー]]の版が古すぎる、
といったような理由で、[[アプリケーション]]が[[埋め込みブラウザー]]を完全に組み込んだ形で利用される場合もあります。
(当該[[アプリケーション]]の開発者にとっては既存の[[埋め込みブラウザー]]の流用ですが、
[[プラットフォーム]]や他の[[アプリケーション]]や[[利用者]]から見れば
[[Webブラウザー]]機能が含まれる独自の[[アプリケーション]]ということになります。)
[EG[
[106] ある時期の [[Android]] には、古い [[WebKit]] から派生して開発が止まった
[[Android Browser]] と最新の [[Chrome]] があって、
どちらも同じ系譜の[[レンダリングエンジン]]を用いていたものの、
実装としては完全に別物でした。
]EG]
[EG[
[107] ある[[ゲーム]]専用[[プラットフォーム]]では、
[[プラットフォーム]]同梱の複数の特別な[[アプリケーション]]がそれぞれ異なる
[[WebKit]] 派生 [[Webブラウザー]]を組み込んでおり、
それらとはまた別に単独の [[Webブラウザー]]も提供されていたといいます。
]EG]
* 利用者インターフェイス
[45] 埋込み型 [[Webブラウザー]]は当該[[アプリケーション]]と統合された [[UI]]
を提供できることから、より良い[[利用者体験]]を提供できる可能性があります。
一方で用途によっては機能の少ない [[Webブラウザー]]でしかなく、[[利用者]]に不便を強いたり、
[[セキュリティー]]上の問題を生じたりすることもあります。
[EG[
[46] 例えば任意のページを表示できる [[Webブラウザー]]機能を組み込みながら、
そのページの [[URL]] や [[TLS証明書]]の情報を表示できないような場合には、
[[フィッシング]]などに悪用される危険性があります。
;; [[アドレスバー]]参照。
]EG]
[EG[
[48] 例えば[[リンク]]を新しい[[窓]]で開く機能が埋め込み [[Webブラウザー]]では提供されないかもしれず、
[[利用者]]は不便に思うかもしれません。
]EG]
;; [49] [[OAuth]] を埋め込み [[Webブラウザー]]で実装するのは好ましくないと考えられています。
([[認可エンドポイント]]参照。)
[61] 一般的な [[Webブラウザー]]であれば [[Webサイト]]に通知されたり、
[[利用者]]の操作に割り当てられていたりする操作が、
[[埋め込みブラウザー]]の場合埋め込まれている[[アプリケーション]]に奪われて利用できないことがあります。
[[アプリケーション]]の開発者としては[[アプリケーション]]の他の機能との整合性や、
[[利用者]]の利便性を考えてそのように設計しているのでしょうが、
実際には[[利用者]]に通常の [[Webブラウザー]]と違う体験を押し付けて困惑させるだけだったりします。
[EG[
[62] 例えば、「[[戻る]]」ボタンが [[Webブラウザー]]の[[履歴]]の移動操作ではなく、
[[アプリケーション]]の独自の遷移操作に関連付けられていて、
[[埋め込みブラウザー]]内の[[履歴]]の「[[戻る]]」操作ができないことがあります。
]EG]
[EG[
[63] 例えば、[[スワイプ]]が[[アプリケーション]]独自の操作に関連付けられていて、
[[Webアプリケーション]]の操作のうち[[アプリケーション]]に[[スワイプ]]と判断されてしまうものができないことがあります。
]EG]
[EG[
[74] [[SmartNews]] は[[アプリ内ブラウザー]]の上に重ねて[[履歴]]の移動
([[戻る]]・[[進む]]) のボタンを提供しています。位置は左下 (端からは少し離れた場所)
に固定されており、変更はできないようです。
[[Webページ]]の下側に [CODE[position: fixed]] で固定の内容を表示しているような
[[Webサイト]]では、[[スクロール]]もできず、重なった部分に何があるか[[利用者]]が知ることができません。
]EG]
-*-*-
[77] 一般の [[Webサイト]]を閲覧できる[[埋め込みブラウザー]]は、
表示中の [[Webページ]]を[[プラットフォーム]]の[[標準のWebブラウザー]]で開くことを[[利用者]]が指示できる手段を提供しているのが普通です。
[115] 一般に[[アプリ内ブラウザー]]は任意の [[Webサイト]]の快適な閲覧に十分な機能を提供していないので、
[[利用者]]に[[標準のWebブラウザー]]を使う選択肢を与えることは重要です。
-*-*-
[109] [[アプリケーション]]の実装手段としてのみ用いられ特定の
[[Webページ]]しか表示しない[[埋め込みブラウザー]]は、
[[利用者]]が[[Webブラウザー]]であると認知できないくらいに[[利用者インターフェイス]]に馴染ませてあるかもしれません。
;; [[プラットフォーム]]の機能や[[サーバー]]との連携方法次第では、
完全に[[ネイティブアプリ]]の機能を使って[[アプリケーション]]を開発するよりも、
一部を [[Webアプリケーション]]として実装する方が楽なこともあります。
そうした開発手法を[[バズワードの HTML5][HTML5 (バズワード)]]と言ったり、
ハイブリッドと言ったりすることもあります。
* Web サイトの著者から見た埋め込みブラウザー
[26] [[Webサイト]]の性質にも依存しますが、一般の [[Webサイト]]
[WEAK[(自身の提供する[[ネイティブアプリケーション]]が[[埋め込みブラウザー]]を使っているわけではないもの。)]]
であっても、[[埋め込みブラウザー]]からアクセスされることは十分にあり得ます。
[EG[
[27] 例えば、 [[Facebook]] 内でその[[Webサイト]]の [[URL]] が[[共有]]されると、
[[Facebook]] の[[スマートフォンアプリ]]の[[利用者]]は、
[[アプリ内ブラウザー]]でそのサイトを開くことがあります。
]EG]
[EG[
[28] 例えば、 [[SmartNews]] に掲載された[[Webページ]]やそこから[[リンク]]されている
[[Webページ]]は、 [[SmartNews]] の[[アプリ内ブラウザー]]で開かれます。
]EG]
[29] そうした[[埋め込みブラウザー]]の利用は、 [CODE(HTTP)@en[User-Agent:]]
などで判断できることもあれば、元の [[Webブラウザー]]と区別できない可能性もあります。
[13] [[Google Analytics]] では、 [[Safari]] の[[アプリ内ブラウザー]]からのアクセスは
[DFN[Safari (in-app)]] と表示されます。
;; ほぼ、 [[iOS]] の[[アプリ]]からのアクセスだと思われます。
* アプリケーションへの信用
[64] [[埋め込みブラウザー]]を利用するということは当該[[アプリケーション]]の[[開発者]]が任意の
[[Webページ]]の内容にアクセスできる可能性があるということです。
[EG[
[65] A社の[[アプリケーション]]に埋め込まれた [[Webブラウザー]]で A社と無関係のB社の
[[Webサイト]]を利用して[[クレジットカード]]決済すると、
[[利用者]]の知らないうちに[[クレジットカード]]情報がA社に送信されてしまう危険性があります。
]EG]
[66] もちろんこれは通常の [[Webブラウザー]]や[[オペレーティングシステム]]にも言えることですが、
そうした[[プラットフォーム]]の[[開発者]]に対しては[[利用者]]ははじめから全面的に信用していると考えられます。
[EG[
[67] [[iPhone]] や [[Safari]] を利用するということは、その[[開発者]]である [[Apple]]
を信用してデータを預けることを意味しています。 [[Apple]] を信用できないなら、
[[iPhone]] を使うべきではないでしょう。
]EG]
[68] [[利用者]]は、単なる[[アプリ]]に対してはそこまで思慮深く検討していないかもしれません。
ですが、自衛のため、むやみに[[アプリ内ブラウザー]]で無関係の
[[Webサイト]]を閲覧することがないよう注意するべきです。
[69] [[アプリケーション]]の可能な操作を制限して[[利用者]]を保護する機能を持つ[[プラットフォーム]]は、
[[アプリ内ブラウザー]]の機能も適切に制限したり、[[利用者]]の確認を得たりするべきです。
[REFS[
- [36] [CITE@ja[つい開いてしまうアプリ内ブラウザには要注意。機密情報を入力するならSafariのほうがいい | ライフハッカー[日本版]]]
([TIME[2017-01-20 14:25:18 +09:00]])
<http://www.lifehacker.jp/2014/10/141001inappbrowser.html>
]REFS]
* 埋め込みブラウザーによる Web ブラウザー
[91] 歴史的に [[Webブラウザー]]の[[レンダリングエンジン]]は[[利用者インターフェイス]]と不可分でしたが、
[[埋め込みブラウザー]]の仕組みを実装することにより、他の [[Webブラウザー]]の[[レンダリングエンジン]]を使った
[[Webブラウザー]]が実現可能となりました。
[92] 既存の [[Webブラウザー]]の[[レンダリングエンジン]]を流用できるため、
[[Webブラウザー]]への参入障壁が大幅に低下しました。
それらは、本家 [[Webブラウザー]]と、あるいは他の同種の [[Webブラウザー]]と、
[[利用者インターフェイス]]や [[Web互換性]]に影響しない付加価値で競争することになります。
;; [93] [[利用者]]は本家の [[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]] を[[埋め込みブラウザー]]として組み込むものでした。
* 利用動向
[101]
従来[[埋め込みブラウザー]]は特定の[[アプリケーション]]の専用の動作を実現するため、
あるいは[[プレビュー]]のような補助的な使い方をするために使われており、
専用の [[Webブラウザー]]を使わずに[[埋め込みブラウザー]]を使うのは一般的とはいえませんでした。
[102]
しかし[[2010年代]]後半の [[SNS]] などの[[スマートフォンアプリ]]の普及により、
[[Web]] 外で交換された [[URL]] を[[アプリ内ブラウザー]]で開く使い方がかなり増えてきました。
例えば [[LINE]] や [[Facebook]] で[[共有]]された [[Webページ]]を
[[LINE]] アプリや [[Facebook]] アプリ内で開くというもので、
[[Webサイト]]の利用者層によってはアクセスの大部分が[[アプリ内ブラウザー]]というケースすらあります。
[103]
ただ、先述の通り[[アプリ内ブラウザー]]は当該[[アプリ]]の独自仕様・[[不具合]]が含まれていることがあり、
[[アドレスバー]]や[[開発者ツール]]がないため[[デバッグ]]が困難だったり、
そもそも[[アプリ内ブラウザー]]固有の問題であると気づきにくかったりして、
困惑している[[Web開発者]]もいます。
* 製品
[FIG(short list)[ [20] [[埋め込みブラウザー]]製品
- [[MSHTML]]
- [[HTMLayout]]
- [[UIWebView]]
- [[WKWebView]]
- [[SFSafariViewController]]
- [[Android WebView]]
- [[Chrome Custom Tabs]]
- [[NetFront Browser NX]]
- [[PhantomJS]]
- [[XAML]] [CODE(XMLe)@en[WebView]]
- [CODE[Titanium.UI.WebView]]
- [[Chrome Apps]] [CODE(HTMLe)@en[webview]]
- [[XUL]] [CODE(XMLe)@en[browser]]
- [CODE(XMLe)@en[x-ms-webview]]
- [[React Native]] [CODE[WebView]]
- [[Electron]] [CODE(XMLe)@en[webview]]
- [[NW.js]] [CODE(HTMLe)@en[webview]]
- [[Headless Chromium]]
- [[Chromium Embedded Framework]]
- [[Trusted Web activity]]
]FIG]
* 関連
[30] 本項の[[埋め込みブラウザー]]は、単に [[Webページ]]内に [CODE(HTMLe)@en[iframe]]
[[要素]]を置いただけのもの ([[入れ子閲覧文脈]]) とは異なります。
[EG[
[110] [[入れ子閲覧文脈]]は (条件が整えば) [[DOM API]]
を通じて「外側」にアクセスできますが、
[[埋め込みブラウザー]]では基本的にそんなことはありません。
]EG]
[EG[
[111] [[入れ子閲覧文脈]]は [CODE[X-Frame-Options:]] の制約を受けますが、
[[埋め込みブラウザー]]では制約を受けません。
その他[[第三者]]としての制約の影響を受けません。
]EG]
[44] より発展したものとして、 [[Webブラウザー]]の[[レンダリングエンジン]]等を流用したアプリケーション実行環境が
[[OS]] の標準機能として、あるいは開発環境等と共に提供される実行環境として用意されていることがあります。
[EG[
[15] [[HTA]] や [[AIR]] や [[XULRunner]] のような例があります。
]EG]
[14] その場合、当該実行環境上のアプリケーションとしての[[レンダリング]]の一部として、
埋込み型の [[Webブラウザー]]が用意されることもあります。
[EG[
[47] 例えば [[Chrome Apps]] には、 [CODE(HTMLe)@en[[[webview]]]] [[要素]]があります。
[CODE(HTMLe)@en[[[iframe]]]] [[要素]]とは違って、[[最上位閲覧文脈]]を作成するものになりますから、
埋め込み [[Webブラウザー]]と理解するべきものです。
]EG]
[EG[
[16] [[XUL]] には [CODE(XMLe)@en[browser]] [[要素]]があります。
]EG]
[EG[
[17] [[WinJS APIs]] には [CODE(HTMLe)@en[x-ms-webview]] [[要素]]があります。
]EG]
[7] [[Chrome Custom Tabs]] も参照。
[19] [[ネイティブアプリケーション]]の通常の方法ではなく
[[Webビュー]] ([[埋め込みブラウザー]]) を使う開発手法を
[[HTML5][HTML5 (バズワード)]]、あるいは ([[HTML5][HTML5 (バズワード)]]
と[[ネイティブアプリケーション]]の) [[ハイブリッド]]と呼ぶ人もいるようです。
;; ただし「[[ハイブリッド]]」という言葉の意味は曖昧で、 [[Titanium]]
のような開発方式を指すことなどもあります。
* 歴史
[41] 古くは [[IE]] が [[Windows]] 標準の [[Webブラウザー]]コンポーネントとして提供されており、
これを組み込んだ [[Windows]] アプリケーションがいくつもありました。
;; [4] [[Windows]] の[[ネイティブアプリケーション]]の開発者には、
この機能を提供した点において [[IE]] は好評でした。 [[Netscape]]
その他 [[Microsoft]] 以外の ([[OS]] 標準でない)
[[Webブラウザー]]を同様の形で[[アプリケーション]]に組み込むのは困難でした。
** [CODE(HTMLe)@en[webview]] (HTML)
[82] [CITE[IRC logs: freenode / #whatwg / 20130424]]
( ([TIME[2013-05-04 00:32:00 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20130424#l-516>
[83] [CITE[webview Tag - Google Chrome]]
( ([TIME[2014-10-18 02:57:33 +09:00]] 版))
<https://developer.chrome.com/apps/tags/webview>
[84] [CITE@en[Webview]]
( ([TIME[2014-10-08 13:51:07 +09:00]] 版))
<http://benfrancis.github.io/webview/>
[85] [CITE@en[<webview> API common subset]]
([[陳侃如]] 著, [TIME[2015-01-23 19:11:31 +09:00]] 版)
<https://lists.w3.org/Archives/Public/public-webapps/2015JanMar/0324.html>
[86] [CITE[webview Tag - Google Chrome]]
([TIME[2015-01-29 18:45:30 +09:00]] 版)
<https://developer.chrome.com/apps/tags/webview>
[87] [CITE@en[webview Tag - NW.js Documentation]]
([TIME[2017-03-15 15:09:14 +09:00]])
<http://docs.nwjs.io/en/latest/References/webview%20Tag/>
** [CODE(HTMLe)@en[x-ms-webview]]
[88] [CITE@en[x-ms-webview element | x-ms-webview object (Preliminary)]]
( ([TIME[2013-09-26 01:16:40 +09:00]] 版))
<http://msdn.microsoft.com/en-us/library/windows/apps/dn301831.aspx>
[89] [CITE@ja[Windows 8.1 なら HTML + JS で書かれたストアアプリでも WebView が使用できる - ひだまりソケットは壊れない]]
( ([TIME[2013-09-26 01:16:50 +09:00]] 版))
<http://vividcode.hatenablog.com/entry/win-store-app/windows-8.1-js-webview>
** [CODE(HTML)[<iframe mozbrowser>]]
[80] [CITE@en-US[<iframe> - HTML | MDN]]
( ([TIME[2013-03-29 14:07:01 +09:00]] 版))
<https://developer.mozilla.org/en-US/docs/HTML/Element/iframe>
[81] [CITE@en-US[Using the browser API - Web API Interfaces | MDN]]
( ([TIME[2014-09-24 06:18:41 +09:00]] 版))
<https://developer.mozilla.org/en-US/docs/Web/API/Using_the_Browser_API>
* メモ
[21] [CITE[アプリ内ブラウザと広告配信についての調査結果 - Qiita]]
([TIME[2017-01-20 11:25:34 +09:00]])
<https://qiita.com/ta__ho/items/2fc8e02b1bb8f99883d7>
[31] [CITE[Android のアプリ内ブラウザについてのまとめ - Qiita]]
([TIME[2017-01-20 14:19:48 +09:00]])
<https://qiita.com/otofu-square/items/3153dc75438acb3f71d0>
[32] [CITE@ja[Android 版 LINE にアプリ内ブラウザが実装されてしまったが無効にする設定が見つからない | Lonely Mobiler]]
([TIME[2017-01-20 14:21:49 +09:00]])
<http://loumo.jp/wp/archive/20160702120051/>
[33] [CITE@ja-JP[Yahoo! JAPANアプリヘルプ(Android向け) - アプリ内ブラウザーについて]]
([TIME[2017-01-20 14:22:19 +09:00]])
<https://m.yahoo-help.jp/app/answers/detail/p/690/a_id/46754>
[FIG(quote)[
[FIGCAPTION[
[34] [CITE@ja[アプリで外部サイトを開くとき、なぜiOSとAndroidとでは動きが違うのか (1/3):MarkeZine(マーケジン)]]
([TIME[2017-01-20 14:24:07 +09:00]])
<https://markezine.jp/article/detail/20256>
]FIGCAPTION]
> つまり、iOSではAndroidのようなハードウェア上の「戻る」ボタンがないので、「ホーム」あるいは「プロセス一覧」を経由しないと、元のアプリに戻ることができないのです。
]FIG]
[35] [CITE@ja[アプリ内ブラウザでSafariを開くことが出来る連携機能Browsecurely|キセノンテンター]]
([TIME[2017-01-20 14:24:57 +09:00]])
<http://xenontenter.com/browsecurely/>
[37] [CITE@ja[アプリ内ブラウザがさらに使いやすく iOSアプリバージョン3.4をリリースしました - はてなブックマーク開発ブログ]]
([TIME[2017-01-20 14:26:04 +09:00]])
<http://bookmark.hatenastaff.com/entry/2015/12/22/112353>
[FIG(quote)[
[FIGCAPTION[
[38] [CITE@ja[【お知らせ】LINEなどの「アプリ内ブラウザ」をご利用のお客様へ -おトク de キレイ(オトクデキレイ)-]]
([TIME[2017-01-20 14:26:35 +09:00]])
<http://point.cosme.net/information/detail/1075>
]FIGCAPTION]
> おトク de キレイでは「アプリ内ブラウザ※」をご利用の場合、全てのコンテンツにおいてコイン付与の対象外となります。
]FIG]
[FIG(quote)[
[FIGCAPTION[
[39] [CITE@ja[カタチップ | アプリ内ブラウザの注意点]]
([TIME[2017-01-20 14:28:44 +09:00]])
<http://kata-tip.com/application-browser-important>
]FIGCAPTION]
> ※2015年4月現在
> アプリ内ブラウザの注意点
> アプリ内ブラウザ(Twitter)などはキャッシュが強く残ると更新しても修正が反映されない場合がある。
> キャッシュをすぐに消すにはアプリを削除し再インストールしなければならないので要注意です。
> 参考にさせていただいた記事
> http://mosap.net/twitter-for-ios-issues
]FIG]
[FIG(quote)[
[FIGCAPTION[
[50] [CITE@ja[アプリ内ブラウザの「戻る」機能 — Website Usability Info]]
([TIME[2017-01-20 14:29:31 +09:00]])
<http://website-usability.info/2013/07/entry_130718.html>
]FIGCAPTION]
> アプリ内のブラウザ機能でいくつかの Web ページを遷移しているとき、画面左上にあるアイコン (「戻る」ボタンっぽいもの) をタップしたら、直前に見ていた Web ページではなく、Web ページを開く前のコンテンツに一気に引き戻された...という経験は、ありませんか?
]FIG]
[FIG(quote)[
[FIGCAPTION[
[51] [CITE@ja[子どもの「フィルタリング」はLINEでは無効だ | イマドキのLINE事情 | 東洋経済オンライン | 経済ニュースの新基準]]
([TIME[2017-01-20 14:30:21 +09:00]])
<http://toyokeizai.net/articles/-/128148?page=4>
]FIGCAPTION]
> しかし、ブラウザ型フィルタリングを利用していても、LINEでシェアされたURLはLINEのアプリ内ブラウザで表示されるため、フィルタリングされません。LINEだけでなく、TwitterやFacebookといったSNSアプリやニュースアプリなど、アプリ内ブラウザ機能を持つアプリは同様です。
]FIG]
[FIG(quote)[
[FIGCAPTION[
[52] [CITE@ja[FacebookやTwitterのアプリ内ブラウザで画面高さが適切にとれない - naosk8's blog]]
([TIME[2017-01-20 14:31:47 +09:00]])
<http://naosk8.hatenablog.com/entry/2016/04/18/091548>
]FIGCAPTION]
> 今回は、TwitterやFacebookのアプリ内ブラウザ(embedded browser) に
> フッターの固定メニューが正しく表示されない事態が発生したので、
> その解消の経緯をメモ。
> inappbrowserキライ。
>
> 結論
> inappbrowserでは、
> innerWidthなどは、URLやステータスバーなどの表示領域を含まれる、
> ブラウザ全体の高さを取得してしまうのでNG。
]FIG]
[53] [CITE@ja[ブラウザかWebViewか、どちらで開かれたのかを判別するには - console.lealog();]]
([TIME[2017-01-20 14:39:07 +09:00]])
<http://lealog.hateblo.jp/entry/2014/10/09/130344>
[54] [CITE@ja[T28_tatsuyaさんのツイート: "本当だ!ツイッターのアプリ内ブラウザだと、つぶやくページに行けない_(:3 」∠ )_ 他のブラウザで開いてやって下さい、、、_(:3 」∠ )_ RT:@xxsanzashixx: あたったあと、つぶやく!押すと、白い画面になると思う…"]]
([TIME[2017-01-20 14:39:17 +09:00]])
<https://twitter.com/t28_tatsuya/status/618716728474755072>
[55] [CITE@ja[iOSのアプリ内Webブラウザーでコピペメニューが表示されない場合の対処方法]]
([TIME[2017-01-20 14:40:17 +09:00]])
<http://hitoriblog.com/?p=38274>
[FIG(quote)[
[FIGCAPTION[
[56] [CITE[アプリ内ブラウザについて]]
([[© 2013 qixil.]]著, [TIME[2017-01-20 14:41:15 +09:00]])
<https://qixil.jp/q/3666>
]FIGCAPTION]
> フォーム内に画像添付を使用しており標準ブラウザからアクセスすると問題なく動作するのですが
> LINEやQRコードアプリなどのアプリ内ブラウザからアクセスすると画像添付に不具合が生じてしまいます。
]FIG]
[FIG(quote)[
[FIGCAPTION[
[57] [CITE@ja[Android版LINEから開いたページで画像を保存できない場合の対策 | LINEの仕組み]]
([TIME[2017-01-20 14:41:45 +09:00]])
<http://did2memo.net/2016/07/03/naver-line-save-image-in-app-browser/>
]FIGCAPTION]
> 「Android版LINE 6.4.1 にアップデートしたらLINEブログの画像が保存できなくなった」という話を聞いて確認してみたところ、その原因は、Android版LINEがリンク先をアプリ内ブラウザ( アプリの中にウェブブラウザの機能が埋め込まれたもの)で開くようになり、そのアプリ内ブラウザでは、画像を長押ししてもメニュその場合の対策を紹介します。
]FIG]
[FIG(quote)[
[FIGCAPTION[
[58] [CITE@ja[iOSのアプリ内ブラウザから、個人情報を盗まれる可能性が…|ギズモード・ジャパン]]
([TIME[2017-01-20 14:42:32 +09:00]])
<http://www.gizmodo.jp/2014/09/ios_21.html>
]FIGCAPTION]
> Twitterificの開発者の1人であるCraig Hockenberry氏によると、アプリ内ブラウザはキーボード入力を監視できるようなのです。
> iOSのアプリ内ブラウザでキーボード入力すると、たとえセキュアなパスワードの入力欄であっても、アプリ側は入力した文字を抽出できてしまうそうです。というのも、アップルのアプリ開発ガイドラインに従うため、アプリ内ブラウザはSafariのOAuth認証を使わないからなのです。
]FIG]
[FIG(quote)[
[FIGCAPTION[
[59] [CITE@ja[Web ビュー]]
([[Jwmsft]]著, [TIME[2017-01-20 14:43:28 +09:00]])
<https://msdn.microsoft.com/ja-jp/windows/uwp/controls-and-patterns/web-view>
]FIGCAPTION]
> Web ビュー コントロールは、Microsoft Edge レンダリング エンジンを使って、Web コンテンツをレンダリングするアプリにビューを埋め込みます。 また、Web ビュー コントロールでは、ハイパーリンクの表示と動作が可能です。
]FIG]
[FIG(quote)[
[FIGCAPTION[
[60] [CITE@en[Google Developers Blog: Modernizing OAuth interactions in Native Apps for Better Usability and Security]]
([TIME[2017-01-19 06:26:40 +09:00]])
<https://developers.googleblog.com/2016/08/modernizing-oauth-interactions-in-native-apps.html>
]FIGCAPTION]
> The rollout schedule for the deprecation of web-views for OAuth requests to Google is as follows. Starting October 20, 2016, we will prevent new OAuth clients from using web-views on platforms with a viable alternative, and will phase in user-facing notices for existing OAuth clients. On April 20, 2017, we will start blocking OAuth requests using web-views for all OAuth clients on platforms where viable alternatives exist.
]FIG]
[79] [CITE@ja[WebView Class (Windows)]]
([TIME[2017-03-16 12:47:02 +09:00]])
<https://msdn.microsoft.com/ja-jp/library/windows/apps/windows.ui.xaml.controls.webview>
[FIG(quote)[
[FIGCAPTION[
[90] [CITE[Lotus Notes 8 ヘルプ - MIME メールに対して埋め込みブラウザを無効にするには]]
([TIME[2017-03-17 18:11:07 +09:00]])
<https://www.bcom.co.jp/help/help8_client.nsf/2e73cbb2141acefa85256b8700688cea/b95ac577e9412cbc4925732400351164!OpenDocument>
]FIGCAPTION]
> デフォルトでは、IBM Lotus Notes はシステムブラウザを使用して MIME メールを表示します。この場合、Lotus Notes のデフォルトブラウザと比べてメールの表示状態はよくなりますが、Lotus Notes のデフォルトブラウザのような正確な印刷やメールヘッダーの表示を行うことはできません。また、システムブラウザを使用することにより、セキュリティの問題が発生する可能性もあります。
]FIG]
[FIG(quote)[
[FIGCAPTION[
[100] [CITE@ja[【はてなからの回答】はてなブログの iPhoneアプリで勝手にログアウトされる問題について - いつもマイナーチェンジ!]]
( ([TIME[2017-05-29 02:01:19 +09:00]]))
<http://www.mayoinu.com/entry/2015/10/23/200000>
]FIGCAPTION]
> SafariのCookieをブロックしている場合、はてなブログアプリでもログインが続かない状態になってしまうことを確認いたしております。
> Cookieの設定を「常に許可」、もしくは「訪問したWebサイトを許可」にした後、はてなブログアプリでログインし直して表示をご確認ください。
]FIG]
[104] [CITE@ja[Internet Explorerのアドレスバーに入力した内容をWebページが読み取れるバグ | スラド セキュリティ]]
([TIME[2017-10-01 20:16:26 +09:00]])
<https://security.srad.jp/story/17/09/30/1832253/>
[108] [CITE@ja[WKWebView で target = _blank と POST の組み合わせ注意 - star__hoshi's diary]]
([TIME[2018-03-04 15:33:38 +09:00]])
<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>