Tweet
Tweet

Slide 1

Slide 1 text

History APIの魅⼒と危険性 【学⽣向け勉強会】teamLab×DMM tech meetup ~frontend~ 志⽥洋⽃

Slide 2

Slide 2 text

© teamLab Inc ‧24新卒 ‧パッケージチーム フロントエンド班 ‧モアイとルービックキューブが好きです 志⽥ 洋⽃ Shida Hiroto ⾃⼰紹介

Slide 3

Slide 3 text

© teamLab Inc History APIって知っていますか？

Slide 4

Slide 4 text

© teamLab Inc →「ブラウザ上の履歴操作が可能なAPI」 History API

Slide 5

Slide 5 text

© teamLab Inc →「ブラウザ上の履歴操作が可能なAPI」 履歴の移動  history.back() 　history.forward() History API 例：history.back()

Slide 6

Slide 6 text

© teamLab Inc →「ブラウザ上の履歴操作が可能なAPI」 履歴の置き換え 　history.replaceState() 履歴の追加 　history.pushState() History API / /my / /moai 遷 移 順 どちらも遷移はせず、 履歴の編集とURLを書き換えるのみ / /my / /my /moai 遷 移 順

Slide 7

Slide 7 text

© teamLab Inc 1. ReactなどのSPAのページ遷移  ‧遷移せずにURLを変更可能なため、   サーバーへのリクエストを抑えコンテンツ切替 Header my page Content M e n u /my History API いつ使われるのか サーバー History APIで 履歴&URL書き換え Header M e n u /moai 必要なものだけ サーバーから取 得

Slide 8

Slide 8 text

© teamLab Inc 2. 途中離脱ダイアログ(フォーム⼊⼒中のブラウザバック防⽌)  ‧画⾯離脱時のイベント発⽕でよく使われるbeforeunloadイベント   →ios safariでは使えない & ダイアログのデザイン変更が不可 History API いつ使われるのか Reactコード例

Slide 9

Slide 9 text

© teamLab Inc 2. 途中離脱ダイアログ(フォーム⼊⼒中のブラウザバック防⽌)  ‧pushStateで⼀時的にブラウザバックをなかったことにする History API いつ使われるのか / /moai /form 遷 移 順 / /moai /form / /moai /form ブラウザバック history.pushState(null,“”, “/form”) ダイアログ 表⽰処理

Slide 10

Slide 10 text

© teamLab Inc え、History APIって結構危険じゃない？

Slide 11

Slide 11 text

© teamLab Inc え、History APIって結構危険じゃない？ → そうです。結構危険です。

Slide 12

Slide 12 text

© teamLab Inc ユーザが意図せぬ履歴を⽣成できるため、 理論上は以下のようなこともできてしまう...? ブラウザバックで ユーザが⽬的のページに戻れない 事案をどうにかしたい、、というissueも History APIって危険...? [1]

Slide 13

Slide 13 text

© teamLab Inc chromium ‧ブラウザバック等でユーザ操作のないページをスキップ  （history.backは開発者が使うものなのでスキップしない） safari ‧クリックなどのユーザ操作に起因する場合のみ  history操作が正しく動作するような制限  （document的なソースは⾒つけられず...） 現在は...様々な対策がされてます [2] [3]

Slide 14

Slide 14 text

© teamLab Inc ブラウザの履歴を操作可能なHistory API ‧SPA、フォーム離脱などで便利に使える反⾯、  使⽤法を誤るとユーザビリティを下げる危険性も⼤ ブラウザで悪質な履歴操作等の対策がされてる まとめ

Slide 15

Slide 15 text

© teamLab Inc ブラウザの履歴を操作可能なHistory API ‧SPA、フォーム離脱などで便利に使える反⾯、  使⽤法を誤るとユーザビリティを下げる危険性も⼤ ブラウザで悪質な履歴操作等の対策がされてる まとめ ブラウザ開発者や web標準を決める⼈たちってすごい

Slide 16

Slide 16 text

ご清聴ありがとうございました 参考⽂献 [1] Github Issue「Annoying user experience on back navigation due to dummy fast-forwarding history entries」 https://github.com/WICG/interventions/issues/21 [2] Chromium Docs「History manipulation intervention in Chromium」 https://chromium.googlesource.com/chromium/src/+/refs/tags/128.0.6613.5/docs/history_manipulation_intervention.md [3] ブラウザの履歴を操作して「戻る」ボタンで広告を出すやつについて https://blog.maripo.org/2024/08/history-api-abuse/