History APIの魅力と危険性

Transcript

1. History APIの魅⼒と危険性 【学⽣向け勉強会】teamLab×DMM tech meetup ~frontend~ 志⽥洋⽃
2. © teamLab Inc ‧24新卒 ‧パッケージチーム フロントエンド班 ‧モアイとルービックキューブが好きです 志⽥ 洋⽃ Shida Hiroto ⾃⼰紹介
3. © teamLab Inc History APIって知っていますか？
4. © teamLab Inc →「ブラウザ上の履歴操作が可能なAPI」 History API
5. © teamLab Inc →「ブラウザ上の履歴操作が可能なAPI」 履歴の移動  history.back() 　history.forward() History API 例：history.back()
6. © teamLab Inc →「ブラウザ上の履歴操作が可能なAPI」 履歴の置き換え 　history.replaceState() 履歴の追加 　history.pushState() History API / /my / /moai 遷 移 順 どちらも遷移はせず、 履歴の編集とURLを書き換えるのみ / /my / /my /moai 遷 移 順
7. © 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 必要なものだけ サーバーから取 得
8. © teamLab Inc 2. 途中離脱ダイアログ(フォーム⼊⼒中のブラウザバック防⽌)  ‧画⾯離脱時のイベント発⽕でよく使われるbeforeunloadイベント   →ios safariでは使えない & ダイアログのデザイン変更が不可 History API いつ使われるのか Reactコード例
9. © teamLab Inc 2. 途中離脱ダイアログ(フォーム⼊⼒中のブラウザバック防⽌)  ‧pushStateで⼀時的にブラウザバックをなかったことにする History API いつ使われるのか / /moai /form 遷 移 順 / /moai /form / /moai /form ブラウザバック history.pushState(null,“”, “/form”) ダイアログ 表⽰処理
10. © teamLab Inc え、History APIって結構危険じゃない？
11. © teamLab Inc え、History APIって結構危険じゃない？ → そうです。結構危険です。
12. © teamLab Inc ユーザが意図せぬ履歴を⽣成できるため、 理論上は以下のようなこともできてしまう...? ブラウザバックで ユーザが⽬的のページに戻れない 事案をどうにかしたい、、というissueも History APIって危険...? [1]
13. © teamLab Inc chromium ‧ブラウザバック等でユーザ操作のないページをスキップ  （history.backは開発者が使うものなのでスキップしない） safari ‧クリックなどのユーザ操作に起因する場合のみ  history操作が正しく動作するような制限  （document的なソースは⾒つけられず...） 現在は...様々な対策がされてます [2] [3]
14. © teamLab Inc ブラウザの履歴を操作可能なHistory API ‧SPA、フォーム離脱などで便利に使える反⾯、  使⽤法を誤るとユーザビリティを下げる危険性も⼤ ブラウザで悪質な履歴操作等の対策がされてる まとめ
15. © teamLab Inc ブラウザの履歴を操作可能なHistory API ‧SPA、フォーム離脱などで便利に使える反⾯、  使⽤法を誤るとユーザビリティを下げる危険性も⼤ ブラウザで悪質な履歴操作等の対策がされてる まとめ ブラウザ開発者や web標準を決める⼈たちってすごい
16. ご清聴ありがとうございました 参考⽂献 [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/