無料独自SSLの鍵マークが消えている

peamon.netにアクセス中、アドレスバーの横をよく見ると、鍵マークではなく「保護されていない通信」を意味する"!"の表示が。

ConoHaのコントロールパネルで確認しても、無料独自SSLは【利用中】。

"無料独自SSL 鍵マーク つかない"で検索すると…。

httpsのWebページに、httpから始まる記述(リソース)が混ざってしまうと鍵マークが表示されません。
該当部分を読み込む際は安全でない通信が行われているためです。

このhttpのコンテンツが混ざってしまっている状態を「mixed-contents」といいます。

特に気をつけたいポイントは3つです。

• 画像・動画を読み込むURL
• CSSを読み込むURL
• JavaScriptを読み込むURL

引用元：【画像で解説】httpsで鍵マークが表示されない！？ブラウザーで原因箇所を見つける方法 | JPDirect

なるほど。VScodeを使い、サイト内を"http://"で検索すると…。

<form id="cse-search-box" action="http://google.com/cse">

が引っかかる。これは検索ボックスのコード。

<form id="cse-search-box" action="http://google.com/cse">
    <input type="hidden" name="cx" value="YOUR SEARCH ENGINE ID goes here" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="Search" />
</form>
<img src="http://www.google.com/cse/images/google_custom_search_smwide.gif">

HTML フォームを使用した検索ボックスの作成 - Programmable Search Engine ヘルプのコードをそのままコピペしてたのが原因。

公式でこれをやられるとしんどいわ。

VScodeの一括置換機能で、"http://"を"https://"に置換してからアップロードし直しただけで、アドレスバーの横に鍵マークが復活。

めでたしめでたし。