天天看點

低成本将你的網站切換為 HTTPS

<b>本文講的是低成本将你的網站切換為 HTTPS,</b>

<b></b>

Google 的 Search Console 小組最近向所有站長發了一封 email,警告 Google Chrome 将從 10 月起,在包含表單但沒有使用安全措施的網站中顯示警告資訊。

下圖為我收件箱裡的通知:

圖為 Google Search Console 團隊發來的關于 HTTPS 支援的通知

如果你的網站還不支援 HTTPS,那這個通知就直接與你相關。即使你的網站并沒有用到表單,也應當早日将網站遷移為 HTTPS。因為現在這項措施隻不過是 Google“辨別非安全網站”政策的第一步。他們在消息中明确表示:

這個新的警告僅僅是将所有通過 HTTP 提供服務的頁面标記為“不安全”的長期計劃的一部分。

目前 Chrome 用以表示支援 HTTP 的站點以及支援 HTTPS 站點的 UI 設計

問題在于:安裝 SSL 證書、将網站 URL 從 HTTP 轉換為 HTTPS、以及将所有連結和圖像連結等都換成 HTTPS 并不是一項簡單的任務。誰會為了自己的個人網站去費時費錢呢?

我使用 GitHub Pages 免費托管了一系列的網站和項目,其中的一部分還使用了自定義域名。是以,我想看看我能否快速、低成本地将這些網站從 HTTP 遷移為 HTTPS。最後我找到了一種相對簡單且低成本的方案,希望能夠幫助到你們。下面讓我們來探究一下這種方法吧。

托管在 GitHub Pages 上的網站可以通過設定很友善地啟用 HTTPS。進入項目設定頁面,勾上“Enforce HTTPS”即可。

在 GitHub Pages 設定中啟用項目的 HTTPS 支援

還有個問題,SSL 證書雖然并不貴,但也需要花一筆錢,在你盡可能希望降低成本時可不想為此增加花費。是以得找個辦法解決這個問題。

在這兒就不得不提 Cloudflare 了。Cloudflare 是一個内容分發網絡(CDN)提供商,同時它也提供分布式域名服務,這也意味着我們可以利用他們的網絡來設定 HTTPS。使用這個服務真正的好處在于他們提供了免費的方案,讓這一切成為可能。

首先,我們需要告訴 Cloudflare 我們使用的域名。Cloudflare 将會掃描 DNS 記錄,以驗證域名是否存在,并檢查域名的公開資訊。

Cloudflare 的“Add Website”設定

Cloudflare 掃描 DNS 記錄後會将結果展示出來供你檢視。如果 Cloudflare 認為這些資訊符合要求,就會在“Status”列中顯示一個橙色的雲的圖示。你需要檢查這份報告,确認其中的資訊與你在域名注冊商中留的資訊相符,如果沒問題的話,點選“Continue”按鈕繼續。

Cloudflare 給出的 DNS 記錄報告

Cloudflare 會詢問你需要哪種級别的服務。瞧~你可以在這兒選擇“免費”選項。

Cloudflare 的免費方案選項

這一步中,Cloudflare 給我們提供了其伺服器位址,我們要做的就是将這個位址粘貼到自己的域名注冊商中的 DNS 設定裡。

在域名注冊商設定中使用 Cloudflare 提供的域名解析伺服器

完成這一步之後,你的域名将會很快被映射到 Cloudflare 的伺服器上,這些伺服器将成為域名與 Github Pages 之間的中間層。不過,這一步需要耗費一些時間,Cloudflare 可能需要 24 小時來處理這個請求。

如果你沒有用主域名,而是用了子域名來使用 GitHub Pages,則需要額外進行一步操作。打開你的 GitHub Pages 設定頁面,在 DNS 設定中添加一條 CNAME 記錄,設定它指向<code>&lt;your-username&gt;.github.io</code>,其中 <code>&lt;your-username&gt;</code> 是你的 Github 賬号。此外,你需要在 GitHub 項目的根目錄下添加一個檔案名為 CNAME 的無字尾名文本文檔,其内容為你的域名。

下面的螢幕截圖為在 Cloudflare 設定中将 GitHub Pages 子域名添加為 CNAME 記錄的例子:

将 GitHub Pages 子域名加入 Cloudflare

現在,我們從技術上說已經為 GitHub Pages 啟用了 HTTPS,但是我們還需要在 Cloudflare 中做同樣的事。Cloudflare 把這個功能稱為“Crypto”,不僅強制開啟了 HTTPS,還提供了我們夢寐以求的 SSL 證書。現在先讓我們為 HTTPS 啟用 Crypto,之後的步驟中我們會擷取到證書的。

Cloudflare 主菜單中的 Crypto 選項

開啟“Always use HTTPS”選項:

在 Cloudflare 設定中開啟 HTTPS

此時,任何來自浏覽器的 HTTP 請求都會被切換成更安全的 HTTPS。我們離“取悅” Google Chrome 又進了一步。

我們現在正在用 CDN 來擷取 SSL 證書,是以我們還可以利用它的性能優勢來得到更多的好處。我們可以通過自動壓縮檔案、延長浏覽器緩存過期時間來提升網站性能。

選擇“Speed”選項,允許 Cloudflare 自動壓縮網站資源:

允許 Cloudflare 自動壓縮網站資源

我們還可以通過設定浏覽器緩存過期時間來最大化地提升性能:

在 Cloudflare 的 Speed 設定中指定浏覽器緩存

将過期時間設定為比預設選項更長,可以讓浏覽器在通路網站時不再需要每次都去請求那些沒有變更過的網站資源。這将讓訪客在一個月内再次通路你的網站時節省額外的下載下傳量。

如果你的網站還使用了一些外部資源(我們很多人都這麼做),那麼還需要確定這些外部資源是安全的。例如,如果你使用了一個 Javascript 架構,但沒有使用 HTTPS 源,那麼 Google Chrome 将會認為其降低了我們網站的安全性,是以我們需要對其進行改進。

如果你使用的外部資源不提供 HTTPS 源,那麼你可以考慮自己對其進行托管。反正我們現在已經有了 CDN,做托管服務的負載并不成問題。

已經做到這一步啦!我們已經在 GitHub Pages 設定中開啟了 HTTPS,現在還缺少自定義域名與 GitHub Pages 的連接配接證書。Cloudflare 提供了免費的 SSL 證書,我們可以在網站中使用它。

打開 Cloudflare 的 Crypto 設定頁面,确認 SSL 證書處于激活狀态:

Cloudflare 的 Crypto 設定中顯示 SSL 證書為激活狀态

如果證書處于激活狀态,在主菜單中切換到“Page Rules”頁面,選擇“Create Page Rule”選項:

在 Cloudflare 設定中建立頁面規則

然後點選“Add a Setting”,選擇“Always use HTTPS”選項:

對整個域名都強制使用 HTTPS!注意圖中文本中的星号很重要

點選“Save and Deply”,恭喜你!現在,我們擁有了一個在 Google Chrome 眼中完全安全的網站,并且在遷移的過程中我們并不需要接觸、修改很多代碼。

Google 這樣推進 HTTPS 意味着前端開發者們在開發自己的網站、公司網站、客戶網站的時候需要優先考慮 SSL 支援。這一舉措将會促使我們将站點向 HTTPS 遷移。而使用 CDN 可以讓我們使用免費的 SSL 并提升網站性能,如此超值的事何樂而不為呢?

你記錄過遷移到 HTTPS 的經曆嗎?在評論裡留言你的遷移方法,讓我們互相對比吧。

享受你的既安全又快速的網站吧!

<b>原文釋出時間為:2017年9月7日</b>

<b>本文來自雲栖社群合作夥伴掘金,了解相關資訊可以關注掘金網站。</b>

繼續閱讀