偶然发现的http转https

本文详细介绍了如何使用Let’sEncrypt为网站部署HTTPS,并提供了Nginx+Ubuntu的实战步骤。文中还讨论了HTTPS证书的自动续期及网站内部链接的修改方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

有时间亲测一下        这里做一下记录

来源链接  https://coolshell.cn/articles/18094.html?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

今天,我把CoolShell变成https的安全访问了。我承认这件事有点晚了,因为之前的HTTP的问题也有网友告诉我,被国内的电信运营商在访问我的网站时加入了一些弹窗广告。另外,HTTP的网站在搜索引擎中的rank会更低。所以,这事早就应该干了。现在用HTTP访问CoolShell会被得到一个 301 的HTTPS的跳转。下面我分享一下启用HTTPS的过程。

我用的是 Let’s Encrypt这个免费的解决方案。Let’s Encrypt 是一个于2015年推出的数字证书认证机构,将通过旨在消除当前手动创建和安装证书的复杂过程的自动化流程,为安全网站提供免费的SSL/TLS证书。这是由互联网安全研究小组(ISRG – Internet Security Research Group,一个公益组织)提供的服务。主要赞助商包括电子前哨基金会Mozilla基金会Akamai以及Cisco等公司(赞助商列表)。

2015年6月,Let’s Encrypt得到了一个存储在硬件安全模块中的离线的RSA根证书。这个由IdenTrust证书签发机构交叉签名的根证书被用于签署两个证书。其中一个就是用于签发请求的证书,另一个则是保存在本地的证书,这个证书用于在上一个证书出问题时作备份证书之用。因为IdenTrust的CA根证书目前已被预置于主流浏览器中,所以Let’s Encrypt签发的证书可以从项目开始就被识别并接受,甚至当用户的浏览器中没有信任ISRG的根证书时也可以。

以上介绍文字来自 Wikipedia 的 Let’s Encrypt 词条

为你的网站来安装一个证书十分简单,只需要使用电子子前哨基金会EFF的 Certbot,就可以完成。

1)首先,打开 https://certbot.eff.org 网页。

2)在那个机器上图标下面,你需要选择一下你用的 Web 接入软件 和你的 操作系统。比如,我选的,nginx 和 Ubuntu 14.04

3)然后就会跳转到一个安装教程网页。你就照着做一遍就好了。

以Coolshell.cn为例 – Nginx + Ubuntu

首先先安装相应的环境:

1
2
3
4
5
$ sudo apt-get update
$ sudo apt-get install software-properties-common
$ sudo add-apt-repository ppa:certbot /certbot
$ sudo apt-get update
$ sudo apt-get install python-certbot-nginx

然后,运行如下命令:

1
$ sudo certbot --nginx

certbot 会自动检查到你的 nginx.conf 下的配置,把你所有的虚拟站点都列出来,然后让你选择需要开启 https 的站点。你就简单的输入列表编号(用空格分开),然后,certbot 就帮你下载证书并更新 nginx.conf 了。

你打开你的 nginx.conf 文件 ,你可以发现你的文件中的 server 配置中可能被做了如下的修改:

1
2
3
4
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/coolshell .cn /fullchain .pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/coolshell .cn /privkey .pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx .conf; # managed by Certbot

1
2
3
4
# Redirect non-https traffic to https
if ($scheme != "https" ) {
   return 301 https: // $host$request_uri;
} # managed by Certbot

 

这里建议配置 http2,这要求 Nginx 版本要大于 1.9.5。HTTP2 具有更快的 HTTPS 传输性能,非常值得开启(关于性能你可以看一下这篇文章)。需要开启HTTP/2其实很简单,只需要在 nginx.conf 的 listen 443 ssl; 后面加上 http2 就好了。如下所示:

1
2
3
4
listen 443 ssl http2; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/coolshell .cn /fullchain .pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/coolshell .cn /privkey .pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx .conf; # managed by Certbot

然后,就 nginx -s reload 就好了。

但是,Let’s Encrypt 的证书90天就过期了,所以,你还要设置上自动化的更新脚本,最容易的莫过于使用 crontab 了。使用 crontab -e 命令加入如下的定时作业(每个月都强制更新一下):

1
2
0 0 1 * * /usr/bin/certbot renew --force-renewal
5 0 1 * * /usr/sbin/service nginx restart

当然,你也可以每天凌晨1点检查一下:

1
0 1 * * * certbot renew

注:crontab 中有六个字段,其含义如下:

  • 第1个字段:分钟 (0-59)
  • 第2个字段:小时 (0-23)
  • 第3个字段:日期 (1-31)
  • 第4个字段:月份 (1-12 [12 代表 December])
  • 第5个字段:一周当中的某天 (0-7 [7 或 0 代表星期天])
  • /path/to/command – 计划执行的脚本或命令的名称

这么方便的同时,我不禁要问,如果是一些恶意的钓鱼网站也让自己的站点变成https的,这个对于一般用来说就有点难以防范了。哎……

当然,在nginx或apache上启用HTTPS后,还没有结束。因为你可能还需要修改一下你的网站,不然你的网站在浏览时会出现各种问题。

启用HTTPS后,你的网页中的所有的使用 http:// 的方式的地方都要改成 https:// 不然你的图片,js, css等非https的连接都会导致浏览器抱怨不安全而被block掉。所以,你还需要修改你的网页中那些 hard code http:// 的地方。

对于我这个使用wordpress的博客系统来说,有这么几个部分需要做修改。

1)首先是 wordpress的 常规设置中的 “WordPress 地址” 和 “站点地址” 需要变更为 https 的方式。

2)然后是文章内的图片等资源的链接需要变更为 https 的方式。对此,你可以使用一个叫 “Search Regex” 插件来批量更新你历史文章里的图片或别的资源的链接。比如:把 http://coolshell.cn 替换成了 https://coolshell.cn

3)如果你像我一样启用了文章缓存(我用的是WP-SuperCache插件),你还要去设置一下 “CDN” 页面中的 “Site URL” 和 “off-site URL” 确保生成出来的静态网页内是用https做资源链接的。

基本上就是这些事。希望大家都来把自己的网站更新成 https 的。


在讨论“Magic UI Framework or Tool”时,尽管没有明确指代某个特定的框架或工具,但可以结合引用内容推测这可能与用户提到的“Magic Unicorn”版本的Entity Framework相关,或者是某种UI建模工具,如引用[2]提到的支持使用UI模型进行应用程序仿真的IRISE产品[^2]。 从引用[4]来看,ASP.NET Web Forms中的ViewState机制通过一个名为VIEWSTATE的隐藏表单字段实现,它不依赖于Cookie、会话变量或应用程序变量,这种机制在Web UI框架中提供了一种状态管理方式[^4]。 此外,引用[5]提到了一种简化资源懒加载的工具或函数,说明现代UI框架或工具通常会提供便捷的资源管理功能,提升用户体验和性能[^5]。懒加载技术在前端和后端UI框架中都得到了广泛应用,尤其是在处理大量数据或资源时,可以显著优化加载时间和内存使用。 ### UI框架或工具的关键特性 1. **状态管理**:如ViewState机制,确保页面状态在请求之间得以保留,适用于需要复杂交互的Web应用。 2. **UI建模与仿真**:某些工具(如IRISE)支持通过UI模型进行应用程序仿真,这对于原型设计和早期测试非常有用。 3. **资源优化**:懒加载技术允许在需要时才加载资源,减少初始加载时间并提升性能。 4. **跨平台支持**:许多现代UI框架支持多平台开发,如Web、移动端和桌面端,提供一致的开发体验。 ### 示例代码:懒加载资源 以下是一个简单的懒加载图片的JavaScript示例,展示了如何在UI框架或工具中实现资源优化: ```javascript document.addEventListener("DOMContentLoaded", function () { const images = document.querySelectorAll("img.lazy"); const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; observer.unobserve(img); } }); }); images.forEach(img => { observer.observe(img); }); }); ``` 在HTML中使用懒加载图片的方式如下: ```html <img src="placeholder.jpg" data-src="actual-image.jpg" class="lazy" alt="Lazy Loaded Image"> ``` 通过这种方式,图片只有在进入视口时才会被加载,从而优化了页面性能。 ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值