Blogger自訂網域搭配CloudflareSSL設置

Blogger提供blogspot.com域名啟用HTTPS已經一段時間,
但是針對自訂域名(custom domain)的域名遲遲無法提供HTTPS加密功能,
很多站長建議使用Cloudflare的One-Click SSL服務,
啟用Flexible SSL加密模式將訪客到CDN這段進行加密即可。
這方法確實可行,
但需要手動去編輯Blogger預設提供的<head>資料才能正確相容HTTPS加密。

Blogger自訂網域 HTTPS加密DEMO站點可參考ECA Site(本站)
https://www.eca.party



目前Blogger已提供RWD響應式佈景,
建議直接選用RWD佈景,方便同時調整手機瀏覽狀態的佈景。



1.Blogger站點交由CDN啟用HTTPS

此時請先將自訂域名綁定到Blogger設定之後,
將網域NS配置到Cloudflare設定站點CDN並啟用Flexible SSL功能。

https://www.cloudflare.com/ssl/
Cloudflare相關配置教學可參考

https://hzsh.xyz/173/cloudflare加速最佳化設置
https://hzsh.xyz/668/cloudflare防火牆抗ddos配置
https://hzsh.xyz/1057/cloudflare增加pagerules單獨計費方案
https://hzsh.xyz/464/cloudflare-dnssec功能配置

如果NS不方便調整至Cloudflare,也可以使用其他提供SSL加密的代理服務,
例如OVHSSL Gateway服務,

https://www.ovh.com/us/ssl-gateway/
須留意,接入CDN都必須將回源方式設定成HTTP模式,
HTTPS模式將無法訪問blogger站點。

2.修改Blogger預設<head>配置

請進入Blogger的主題配置,點選"編輯HTML"
請先移除<head>下的代碼
<b:include data='blog' name='all-head-content'/>
將預設的<head>內容清除,
並且在<title><data:view.title.escaped/>代碼上方加上以下代碼
須留意字串www.eca.party請替換成您自己的站點域名

<meta content='blogger' name='generator'/>
<link href='https://www.eca.party/favicon.ico' rel='icon' type='image/x-icon'/>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.isMobile'>
<link href='https://www.eca.party/?m=1' rel='canonical'/>
<b:else/>
<link href='https://www.eca.party/' rel='canonical'/>
</b:if>
</b:if>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:if cond='data:blog.isMobile'>
<link expr:href='data:blog.url' rel='canonical'/>
<b:else/>
<link expr:href='data:blog.url' rel='canonical'/>
</b:if>
</b:if>

<link rel='openid.server' href='https://www.blogger.com/openid-server.g' />
<link rel='openid.delegate' href='https://www.eca.party/' />

讓瀏覽器正確透過https的方式載入favicon.ico路徑與偏好網域。

參考資料 https://www.techcoke.com

3.配置Blogger自動301至https站點

在<head>後方置入以下代碼

<script type="text/javascript">
var targetProtocol = "https:";
if (window.location.protocol != targetProtocol)
  window.location.href = targetProtocol +
    window.location.href.substring(window.location.protocol.length);
</script>

保存後瀏覽Blogger站點就會自動重定向到https。

參考資料 https://leonax.net

4.配置Blogger替換站內http連結為https

可以透過javascript的方式替換掉原本是http://開頭的連結為https://,
這樣訪客就可以節省301重新導向花費的時間,
同樣在<head>後方置入以下代碼
須留意字串www.eca.party請替換成您自己的站點域名

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
    $(document).ready(function(){
        $('a[href^="http://"]').each(function(){
            var oldUrl = $(this).attr("href");
            var newUrl = oldUrl.replace("http://www.eca.party", "https://www.eca.party"); // Create new url
            $(this).attr("href", newUrl);
        });
    });
</script>

保存後點選Blogger網頁的連結就會是https://,
除非網頁禁用javascript腳本或無法打開外部的jquery公共庫就需要再調整。

參考資料 http://www.tutorialrepublic.com

5.針對使用Cloudflare的Blogger站點啟用HSTS

由於Cloudflare免費提供http header嵌入HSTS(HTTP Strict Transport Security)配置,
我們可以啟用HSTS讓訪客下次進入站點時瀏覽器自動307導向到HTTPS。
請進入Cloudflare控制台>Crypto標籤設定
不需要啟用includeSubDomains以免影響子網域,
Max Age Header (max-age)如果要讓SSL LABS測試獲得A+至少需要六個月(180天),
配置完成後即可提交https給Google網站管理員等待收錄。

留言

這個網誌中的熱門文章

中國免費不限流量CDN介紹-360網站衛士 百度雲加速 牛盾雲安全

HZSH Site

SZtio.com