谷歌的 Search Console 团队 最近向网站所有者发送了一封电子邮件,其中包含 警告,警告称从今年 10 月开始,Google Chrome 将采取措施识别并显示对非安全网站的警告,这些网站包含表单输入。
以下是发送到我的收件箱的通知

如果您的网站 URL 不支持 HTTPS,那么此通知将直接影响您。 即使您的网站没有表单,也应将迁移到 HTTPS 作为一项优先事项,因为这只是谷歌识别不安全网站策略中的一个步骤。 他们在消息中明确说明了这一点。
新的警告是长期计划的一部分,该计划将所有通过 HTTP 提供的服务页面标记为“不安全”。

问题在于,安装 SSL 证书并将网站 URL 从 HTTP 迁移到 HTTPS 的过程(更不用说编辑现有内容中的所有这些链接和链接图像)听起来像一项艰巨的任务。 谁有时间和愿意花钱来更新个人网站以实现这一点?
我使用 GitHub Pages 免费托管多个网站和项目,包括一些使用自定义域名的项目。 为此,我想看看是否可以快速廉价地将网站从 HTTP 转换为 HTTPS。 我最终在预算有限的情况下找到了一种相对简单的解决方案,希望可以帮助其他人。 让我们深入探讨。
在 GitHub Pages 上强制使用 HTTPS
托管在 GitHub Pages 上的网站有一个简单的设置可以启用 HTTPS。 导航到项目的“设置”,并将开关切换到“强制使用 HTTPS”。

但我们仍然需要 SSL
当然,第一步轻而易举,但它并非满足谷歌对安全网站定义的全部内容。 原因是,启用 HTTPS 设置既不提供也不安装安全套接字层 (SSL) 证书到使用 自定义域名 的网站。 使用 GitHub Pages 提供的默认网络地址的网站通过该设置完全安全,但我们这些使用自定义域名的用户必须在域级别采取额外的步骤来确保 SSL 安全。
这很糟糕,因为 SSL 虽然并不超级昂贵,但却是另一项成本,当你试图降低成本时,你可能不想承担这笔成本。 我想找到一种方法来解决这个问题。
我们可以从 CDN 免费获得 SSL!
这就是 Cloudflare 发挥作用的地方。 Cloudflare 是一个内容交付网络 (CDN),它还提供分布式域名服务器服务。 这意味着我们可以利用他们的网络来设置 HTTPS。 最重要的是,他们有一个免费计划,让这一切成为可能。
值得注意的是,这里有大量关于 CSS-Tricks 的 优质文章 赞扬了 CDN 的优势。 虽然我们在这篇文章中关注的是安全优势,但 CDN 是一个很好的方法,可以帮助减少服务器负担并 提高性能。
从现在开始,我将逐步介绍我用来将 Cloudflare 连接到 GitHub Pages 的步骤,因此,如果您还没有,您可以 获取免费帐户 并按照说明操作。
步骤 1:选择“+ 添加网站”选项
首先,我们必须告诉 Cloudflare 我们的域名存在。 Cloudflare 将扫描 DNS 记录以验证域名是否存在,以及有关该域名的公共信息是否可访问。

步骤 2:查看 DNS 记录
Cloudflare 扫描完 DNS 记录后,它会将它们吐出来并显示出来以供您查看。 Cloudflare 表示它认为“状态”列中的橙色云指示一切正常。 查看报告并确认记录与注册商的记录匹配。 如果一切正常,请单击“继续”以继续。

步骤 3:获取免费计划
Cloudflare 会询问您要使用什么级别的服务。 瞧! 我们可以选择一个免费选项。

步骤 4:更新域名服务器
此时,Cloudflare 为我们提供了它的服务器地址,我们的任务是前往购买域名的注册商,并将这些地址粘贴到 DNS 设置中。

执行此操作并不难,但可能有点令人不安。 您的注册商可能提供了有关如何执行此操作的说明。 例如,以下是 GoDaddy 的说明,用于更新通过其服务注册的域名的域名服务器。
完成此步骤后,您的域名将有效地映射到 Cloudflare 的服务器,Cloudflare 的服务器将充当域名和 GitHub Pages 之间的中间人。 但是,这是一个等待游戏,Cloudflare 可能需要长达 24 小时才能处理请求。
如果您使用的是带有子域名的 GitHub Pages 而不是自定义域名,则需要执行一个额外的步骤。 转到 GitHub Pages 设置,并在 DNS 设置中添加 CNAME 记录。 将其设置为指向 <your-username>.github.io
,其中 <your-username>
当然是您的 GitHub 帐户句柄。 哦,您需要在 GitHub 项目的根目录中添加一个 CNAME 文本文件,该文件实际上是一个名为 CNAME 的文本文件,其中包含您的域名。
以下是一张截图,其中示例说明了如何在 Cloudflare 的设置中添加 GitHub Pages 子域名作为 CNAME 记录

步骤 5:在 Cloudflare 中启用 HTTPS
当然,我们已经在 GitHub Pages 中完成了此操作,但我们也需要在 Cloudflare 中执行此操作。 Cloudflare 将此功能称为“加密”,它不仅强制使用 HTTPS,而且还提供我们一直想要的 SSL 证书。 但我们将在稍后介绍这一点。 现在,为 HTTPS 启用加密。

打开“始终使用 HTTPS”选项

现在,来自浏览器的任何 HTTP 请求都将切换到更安全的 HTTPS。 我们又向让 Google Chrome 满意的目标迈进了一步。
步骤 6:使用 CDN
嘿,我们正在使用 CDN 获取 SSL,所以我们也可以利用它的性能优势。我们可以通过自动缩减文件来加快性能,并延长浏览器缓存过期时间。
在设置中选择“速度”选项,并允许 Cloudflare 自动缩减我们网站的 Web 资源。

我们还可以设置浏览器缓存的过期时间,以最大限度地提高性能。

通过将过期日期推迟到比默认选项更长的时间,浏览器将避免在每次访问时请求网站资源——也就是说,那些不太可能发生更改或更新的资源。这将为访问者节省一个月的重复访问时的额外下载。
步骤 7:使外部资源安全
如果你在你的网站上使用外部资源(我们中的许多人都会使用),那么这些资源也需要以安全的方式提供。例如,如果你使用一个 Javascript 框架,而它不是从 HTTP 源提供,那么就 Google Chrome 而言,这会破坏我们安全的保障,我们需要修补它。
如果你使用的外部资源没有提供 HTTPS 作为源,那么你可能需要考虑自己托管它。我们现在有了 CDN,这使得提供它的负担不再是一个问题。
步骤 8:激活 SSL
哇,我们到了!自从我们在 GitHub Pages 设置中启用 HTTPS 以来,SSL 一直是我们自定义域名和 GitHub Pages 之间的缺失环节,在这里,我们可以激活我们网站上的免费 SSL 证书,这得益于 Cloudflare。
从 Cloudflare 中的加密设置开始,首先确保 SSL 证书处于活动状态。

如果证书处于活动状态,请转到主菜单中的“页面规则”,并选择“创建页面规则”选项。

…然后点击“添加设置”,选择“始终使用 HTTPS”选项。

之后点击“保存并部署”,然后庆祝吧!我们现在拥有了一个在 Google Chrome 眼中完全安全的网站,而且我们没有修改太多代码,也没有花太多钱。
总结
Google 推动 HTTPS,这意味着前端开发人员比以往任何时候都更加需要优先考虑 SSL 支持,无论是为了我们自己的网站、公司网站还是客户网站。此举为我们提供了一个做出改变的额外动力,而且我们能够通过使用 CDN 获得免费 SSL 和性能增强,这使得它更有价值。
你是否写过关于迁移到 HTTPS 的冒险经历?请在评论中告诉我,我们可以互相交流。同时,享受一个安全快捷的网站!
这可能是一个愚蠢的问题,但为什么托管/域名提供商不能给我们一个一键式(好吧,可能需要 2-3 次点击)的解决方案呢?
肯定有一些托管提供商通过利用 Let's Encrypt 使其成为一键式流程。我知道 Siteground 会在你在托管帐户中添加新域名时自动生成证书,你甚至不需要自己动手。我猜想其他托管提供商也开始这样做。
许多托管提供商允许你只需点击一个按钮即可安装它。这是一个最新支持这些公司的列表 https://community.letsencrypt.org/t/web-hosting-who-support-lets-encrypt/6920
我做了类似的事情,但使用的是 Netlify.com 而不是 Cloudflare (https://scripter.co)。这些服务使得切换到 https 变得轻而易举,而且是免费的。
值得注意的是,虽然使用 Cloudflare 进行 SSL 可以工作,而且工作得很好,但它只保护 Cloudflare 服务器和访问者浏览器之间的流量。从 Cloudflare 到你的服务器的流量没有被加密。你发送回服务器的任何表单数据都只会被加密到 Cloudflare,而其余部分则是明文传输。
也就是说,我在某些地方使用 Cloudflare 进行 SSL,我不收集/发送任何数据回我的服务器。
如果你有一个在线隐私声明,你可能还想在其中提到使用 CDN 进行 SSL。
(我应该进一步说明,这是当在没有以 SSL 方式提供服务的网站前面使用 Cloudflare 时。抱歉,我第一次没有说明清楚。)
看起来在这种情况下,你会拥有端到端的 SSL。这很不错。
(但还是要更新你的隐私声明。)
我有点担心你暗示使用 CDN 是获得 SSL 证书所必需的。如果你已经想要一个 CDN,这很有用,但是对于那些真正省钱的人来说,不要忘记 Let's Encrypt。 https://letsencrypt.openssl.ac.cn/
我没有得到这样的暗示,只是它是一条“更容易”的路线,而不是唯一免费的路线。Let's Encrypt 非常棒,但需要一些技术知识才能使其运行。
@Ken Let's Encrypt 确实需要一些知识才能使其运行。但如果你不会通过使用 CloudFlare CDN 来处理任何敏感数据,那么你可以选择 CloudFlare 路线。
但如果你通过你的托管提供商获得了 Let's Encrypt——请务必选择它!我很乐意随时获得一个符合 PCI 标准的 TLS 证书!
此致,
Mic Sumner
我通过名为 serverpilot.io 的服务托管了一些客户的网站。
在每月 10 美元的计划中,他们允许你使用 Let's Encrypt 设置 https+ssl,只需一键式设置。
对于非 GitHub Pages 和非静态网站的人来说,让你的开发人员访问 https://letsencrypt.openssl.ac.cn/ 以获取免费 SSL。这是合法的。
为什么没有提到 https://letsencrypt.openssl.ac.cn/ ?
嗨 Christopher,
我刚刚在 Twitter 上看到了这篇文章,它再及时不过了!我当时已经开始恐慌了,因为我以为切换到 HTTPS 肯定会是一件很麻烦的事情。但是你的解决方案非常适合我(我已经在使用 CloudFlare)。
不过我有一个快速的问题
我有一个不同的主机(我在德国),他们没有像你展示的 GitHub 那样强制使用 HTTPS 的选项。你知道在 GitHub 上选中那个框是否与在 .htaccess 文件中添加以下代码相同吗?
RewriteEngine On
RewriteCond %{HTTP_HOST} ^example.com [NC]
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.example.com/$1 [R,L]
非常感谢,
Gill
Grill,试试这个解决方案
.htaccess
RewriteEngine On
RewriteCond %{ENV:HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
我收到了来自 Google 的相同消息,并将我的网站迁移到了 https://pyrx.sourceforge.io。Sourceforge 使得一键式切换变得很容易。除了 Disqus 评论和 Sumo 应用之外,一切都运行良好。对于 Disqus,我必须在插件中将 http 更改为 https,并使用 Disqus 仪表板迁移评论。Sumo 应用没有保留点赞和分享次数。我不会为此烦恼,因为它对我的网站来说不是必需的。
有很多很好的理由使用 CDN,我感谢你一步步地解释了这个过程。
但是,如果你只是在寻找 SSL 证书,这并不完全准确。
SSL 并不昂贵——它是免费的。具体来说,通过 Let's Encrypt,由 EFF 和 Mozilla 等组织带头。许多网站托管商现在都提供自动或“一键式”安装,在某些情况下,它甚至成为新网站的默认设置。
现在,Let's Encrypt 提供基本的证书,如果你拥有高价值、高流量或非常敏感的网站,你可能需要 SSL 证书中的更多功能,而这些选项确实会花费金钱。
但是,如果你追求“以极低成本将你的网站切换到 HTTPS”,那么不提及 Let's Encrypt 这种真正基础且真正免费的选项就显得奇怪了,对于大多数人来说,它的设置速度比 Cloudflare 更快。
我想为 https://letsencrypt.openssl.ac.cn/ 投一票。
这对每个人来说都是一个非常真实的解决方案,即使是企业也可以轻松地设置 https。
此外,我想补充一点,浏览器实际上不再使用 SSL,而是使用 TLS。(我们在服务器上禁用了 SSLv2 和 SSLv3)
https://en.wikipedia.org/wiki/Transport_Layer_Security
SSL 和 TLS 之间有什么区别?
https://security.stackexchange.com/questions/5126/whats-the-difference-between-ssl-tls-and-https
我发现称之为“https”连接或“https 证书”有助于我和客户之间的沟通。他们理解“https”是什么,但从未听说过 SSL 或 TLS。他们可以在浏览器中看到“https”和绿色的锁。这样就不需要解释其中任何一个了。
我们即将实现 Let's Encrypt 的一键式安装(目前仅支持命令行,但只需一条命令)。甚至还有适用于 Let's Encrypt 的 WordPress 插件。
澄清一下,浏览器“计划”停止支持 SSL。
https://blog.mozilla.org/security/2014/10/14/the-poodle-attack-and-the-end-of-ssl-3-0/
很棒的文章,感谢分享。我真的很感谢你的文章。再次感谢。我创建了一个网站 PocketSpider.com,我肯定会使用 https:// SSL 证书。
在网站上使用 SSL 证书会有什么损失吗?
访客?
Cloudflare 免费 SSL 会在所有版本的 Internet Explorer 中显示警告。
如果你想支持所有浏览器,你需要使用他们的付费计划或从他们那里购买专用证书。
我不同意,IE 和 Edge 在我使用 Cloudflare 免费 SSL 设置的网站上绝对没有显示任何警告。
我一直想进行这种切换,但有一个问题我找不到答案,也许你们可以帮我找到答案。
我们的网站是远程托管的,但网站的一个重要部分是使用 iframe 来显示我们办公室服务器上的内容。据我了解,如果我在主网站上启用 https,iframe 将不再起作用,因为这里的服务器没有设置 SSL。
SSL 是基于域名的还是基于服务器的?
我是否需要在两台服务器上都设置 SSL 才能使所有功能正常运行?
谢谢。
我很高兴地发现,在 Media Temple DV 上的 Plesk 中安装 Let's Encrypt 是多么容易:https://css-tricks.cn/media-temple/
我想呼应 Netlify!它非常适合静态网站(而且免费!)。部署选项非常简单——你可以通过命令行工具上传、将它连接到 git 仓库(并在必要时运行构建脚本),或者只是将静态文件夹拖放到他们的 Web 界面中。当然,你可以在自定义域名上启用 HTTPS!他们可以为你管理 DNS,或者你可以将自己的 DNS 记录指向他们的服务器,两种选项都允许 HTTPS。
我强烈建议你查看 https://fly.io 而不是 Cloudflare。设置要容易 20 倍,而且他们都是好人。
嗨,Chris Schmitt,
我同意,**一些托管提供商**没有像 Let's Encrypt 这样的免费 SSL,因此,如果客户出于某种原因希望留在他们的托管服务中,我们将不得不选择 CDN 的反向代理来解决这个问题。
但我敢肯定托管提供商会提供 Let's Encrypt SSL,因为它的应用无处不在,而且非常棒!
一个问题。
为什么我们选择“完全”,因为这似乎不起作用!相反,我们将不得不将其设置为**灵活 SSL**,请查看 CloudFlare 的 SSL 选项:https://support.cloudflare.com/hc/en-us/articles/200170416-What-do-the-SSL-options-mean-。
我喜欢 Cloudflare,因为这样网站就可以使用 HTTP/2 协议以及其他 CloudFlare 服务器增强功能——如果你当前的托管提供商没有这些增强功能,这将是一件很棒的事情!
此致,
Mic Sumner
正如 Ed Zahurak 所提到的,依赖 CDN 来保证安全存在非常严重的风险。
还记得 Cloudbleed 吗?
换句话说,没有人会知道它的真实危害程度,而且一些信息(“完整的 https 请求、客户端 IP 地址、完整的响应、Cookie、密码、密钥、数据,所有内容”)可能仍然可以通过公开查询获取。
Let's Encrypt 提供端到端加密,而 Cloudflare 则没有。所以就我而言(它们都是免费的!),无论你是否向你的服务器发送数据,它都是一个更安全的解决方案。希望这能帮助一些人做出决定!
感谢你的回复,Khek。
很高兴知道 Let's Encrypt 现在是更明显的选择!
希望 Cloudflare 的任何工作人员都能对此做出回应?
此致,
Mic Sumner
需要注意的一点是,如果你要进行任何类型的财务交易,你的网站需要符合 PCI 标准——你的支付网关也是如此。如果你选择 Cloudflare,你需要升级到他们的 200 美元/月的计划。但是,这是合理的。你假设是在赚钱。
是的,letsencrypt.org 绝对应该在“极低成本”中提及。而且,“SSL”是一个过时的缩写,不应该使用,因为它已经被 TLS 取代,TLS 实现了许多奇妙的功能,比如允许你在单个 IP 上应用多个证书!拜托,跟上时代吧!