はてなブックマークのブックマークレットが動かなかったからなんとかした話

PC・スマホ 公開日:2019年07月23日 最終更新日:2019年07月29日

目次

• 1.結論

妻は今朝怖い夢を見たようです。僕です。

はてなブックマーク使ってますか？僕は使ってます。オンラインブックマーク的なやつです。便利な気がしますよ。独自の文化もある気がします。
そんなはてなブックマーク、ブックマークレットを利用してその時見ているページを簡単に追加できるんです。ブラウザごとの拡張機能を利用する方法もあるっぽいですが、今回はブックマークレットの方について話します。

このリンク（一応公式のページよ）にある方法で追加したのですが、上手く動きません。

ちなみに今回は↑このページを追加しようとしてみました。
なんでだろうと思い開発者ツールでConsoleを見てみると、

VM240:1 Mixed Content: The page at ‘https://www.hatena.ne.jp/tool/bookmarklet’ was loaded over HTTPS, but requested an insecure script ‘http://b.hatena.ne.jp/js/Hatena/Bookmark/let.js?2019623’. This request has been blocked; the content must be served over HTTPS.

とのこと。簡単に説明すると、httpsのページを見ているけど、httpのスクリプトが要求されたからブロックしといたぜ。ってことです。

なんのこっちゃというと、アドレスの最初にhttpってあるじゃないですか。あれが最近はhttpsになってるんですよね。このsがついてると、まぁざっくりいうと安全ですよってことです。世の中的にはもうhttpsが当たり前になっていて、クロームでも警告が出たり鍵マークがでなかったり、検索順位にも（おそらく）影響したりします。
より詳しく知りたい方はしっかり学んでみましょうね。

もちろんこのブログもhttpsから始まってますので対応済みです。

んで、ブックマークレットの中で使うlet.jsってのを呼び出す際に、httpでリクエストしてるから駄目だよってことです。
だから対策としはブックマークレット内のhttpをhttpsに書き換えました。

しっかり動作するようになりました。よかったですね。

結論

b.hatena.ne.jp/js/Hatena/Bookmark/let.jsはちゃんとssl証明書入れていたので大丈夫だとは思いますが、この方法でなにかまずいことがあるよ！って場合はお気づきの方教えてください。おやすみなさい。

Web担当者のためのセキュリティの教科書ハッキング・ラボのつくりかた 仮想環境におけるハッカー体験学習王様達のヴァイキング（１） (ビッグコミックス)