Upgrade to Pro — share decks privately, control downloads, hide ads and more …

History APIの魅力と危険性

Avatar for teamLab teamLab PRO
January 22, 2025

History APIの魅力と危険性

Avatar for teamLab

teamLab PRO

January 22, 2025
Tweet

More Decks by teamLab

Other Decks in Programming

Transcript

  1. © teamLab Inc →「ブラウザ上の履歴操作が可能なAPI」 履歴の置き換え  history.replaceState() 履歴の追加  history.pushState() History API

    / /my / /moai 遷 移 順 どちらも遷移はせず、 履歴の編集とURLを書き換えるのみ / /my / /my /moai 遷 移 順
  2. © 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 必要なものだけ サーバーから取 得
  3. © teamLab Inc 2. 途中離脱ダイアログ(フォーム⼊⼒中のブラウザバック防⽌)  ‧pushStateで⼀時的にブラウザバックをなかったことにする History API いつ使われるのか /

    /moai /form 遷 移 順 / /moai /form / /moai /form ブラウザバック history.pushState(null,“”, “/form”) ダイアログ 表⽰処理
  4. ご清聴ありがとうございました 参考⽂献 [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/