BETA

Google Chromeではhistory APIを使った戻るボタンの制御ができない

投稿日:2019-12-29
最終更新:2019-12-29

タイトルの通り、Chromeではhistory APIを使った戻るボタンの制御ができません。
History APIを使って、戻るボタンを使えなくしたり、戻るボタンを押したタイミングでモーダルを表示させたりできるんですが、それがChromeではできません。

$(function(){  
    history.pushState(null, null, "#popup");  

    $(window).on("popstate", function(eve){  
        if (location.hash == "") {  
            // ハッシュが空になったら = ブラウザバックされたら  
            $('.js-modal').show();  
        }  
    });  
});  

例えばこんなコードがあったとすると、SafariやIEでは動きますがChromeでは動きません。
似たような手法でHistory APIを使わずに直接ハッシュをいじる手法もあるんですが同じく動きません。

なんでだろうと思ってネット上をさまよってたんですが、結果こんな記事を見つけました。

https://www.zdnet.com/article/google-working-on-blocking-back-button-hijacking-in-chrome/

Google engineers are currently working on a Chrome browser update that will block malicious
websites from hijacking the browser’s history and, indirectly, the Back button.

ざっくり言うとHistory APIを使って戻るボタンを制御して悪いことをやるサイトが多いので、その手法をブロックしようとしていると言うことですね。(英語ほぼ読めないので適当ですが、そんなに間違ってないかと)
この記事が書かれたのが去年の12月なので、もうすでにブロック機能が追加されていると言うことなんだと思います。

ちなみにHacker Newsにもスレッドが立っていました。

https://news.ycombinator.com/item?id=18711452

このブロックの抜け道を探してみましたが見つかっていません。リンクに仕込まれたHistory APIだったら動作するだろうと思い、リンクにHistory APIを仕込んでclickイベントをJSで発火させてみたりしましたが動作しませんでした。
さすがGoogleと言うことで、おそらくそんなに簡単に突破できないかなと。

もし突破する方法を知っている方がいましたら、コメント欄などで教えていただけると助かります。

追記

chromeの仕様を詳細に書くと、「ページ読み込み直後に、ブラウザバックでのpopstateイベントが発火しない」ということみたいです。
ユーザーがクリックなどの能動的なアクションを一度でも起こした後であれば発火します。
なので、ページに飛んできたユーザーに一番最初にボタンを押してもらうようなUIを作れればこの問題は回避できるかもしれません。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@takuhito-hの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう