网站部署 HTTPS 中须要作的事情

时间 2019-11-07

原文原文链接

这篇文章首发于个人我的网站：据说 - https://tasaid.com/，建议在个人我的网站阅读，拥有更好的阅读体验。javascript

这篇文章与博客园和 Segmentfault 共享。html

前端开发QQ群：377786580前端

这篇文章是基于我在迁移 https://tasaid.com 的时候，和在公司跟进部署 HTTPS 的一些经验所编写。收录在《Said - 从 HTTP 到 HTTPS 》系列：java

部署到 HTTPS 会发生什么

HTTP 协议和 HTTPS 协议是不兼容的，即 HTTPS 和 HTTP 是不可互相访问的 (混合资源)，当 HTTPS 页面中包含 HTTP 内容的时候，浏览器会向用户抛出警告，这个网页是加密的，可是却包含不安全的元素，即混合资源 (Mixed Content)。ajax

随着 chrome 的安全计划，从此如下的 API 只能在安全环境中使用：chrome

Geolocation - 获取用户地理位置shell
Devicemotion / orientation - 设备方向和运动信息
Encrypted Media Extensions/EME - 加密媒体扩展
getUserMedia - 采集摄像头/音频/屏幕信息

实测中，当前获取用户地理位置 API navigator.geolocation.getCurrentPosition 已经只能在安全环境 (能够理解为 HTTPS 环境)中使用，在chrome下，非安全环境使用该 API 会显示警告：

getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

作哪些事

自适应协议资源路径

传统的资源路径会通常会写成绝对路径和相对路径：

<img src="/static/bar.jpg"/>
<img src="http://tasaid.com/static/bar.jpg" />

绝对路径的资源建议使用 // 语法让它兼容 HTTP/HTTPS，//语法表示这个资源的访问协议和当前页面保持一致，若是当前页面是 HTTPS 的，则会采用 HTTPS 协议访问，若是是 HTTP 的，则使用 HTTP 协议访问。

<img src="//tasaid.com/static/bar.jpg" /><!--https://tasaid.com 中会访问 https://tasaid.com/static/bar.jpg-->

异步请求

相对路径下的异步请求没有问题，绝对路径的请求会有问题：

$.ajax('http://tasaid.com/user/get')

若是请求的 url 是兼容 HTTPS 的话，则能够在 HTTPS 环境下使用 https:// 访问，不然须要服务器作一个 HTTPS包装跳转，将原 url 的请求在本身的服务器作一层转发，表单提交同理。

$.ajax('/httpsRedirect?url=http%3A%2F%2Flinkflys.com%2Fuser%2Fget')

iframe

iframe 只能是被嵌入的 url 也一样支持 HTTPS，目前本人并未找到合适的方案。固然若是大家服务端真心 NB 的话也能够像某大型搜索引擎同样把须要内嵌 iframe 的站点抓到本身的服务器上。

HTTP严格传输安全协议

HTTP 严格传输安全协议（ HTTP Strict Transport Security，简称 HSTS ）是互联网工程任务小组 (Internet Engineering Task Force，简称IETF) 发布的互联网安全策略，后者负责互联网标准的开发和推进。网站能够选择使用 HSTS 策略，让浏览器强制使用 HTTPS 协议访问。

为何要强制访问呢？由于传统的 HTTP 跳到 HTTPS 都依赖服务端 301/302 跳转，例如访问 http://tasaid.com 跳转到 https://tasaid.com，而此次强制跳转的通讯，是基于 HTTP 的，因此是可能被劫持的。

设置 HSTS 以后，浏览器会在本地替换协议为 HTTPS 而后访问服务器，而不用再依赖服务器跳转，能够更多的减小会话劫持攻击。

HSTS 是一个响应头，只能用于 HTTPS 响应，HTTP 环境下会忽略掉这个响应头：

Strict-Transport-Security: max-age=expireTime [; includeSubDomains] [; preload]

参数	释义
max-age	指定的时间内 (单位是秒)，网站必须使用 HTTPS 协议来访问
includeSubDomains	子域名也必须经过 HTTPS 协议来访问
preload	让浏览器由安全域名列表 (Preload List) 决定是否本地替换为 HTTPS 请求

最后这个 preload 可能有点抽象，就是各大浏览器厂商 (Chrome/Firefox/IE/Safari/Edge) 共同维护的一个域名列表 (Preload List)，你能够在这里查询，chrome 浏览器能够直接在本地访问 chrome://net-internals/#hsts 查询。

设定 preload 参数，浏览器会根据当前网站知足的条件尝试把网站加入这个域名列表 (Preload List)，其余用户再访问这个网站的时候，若是这个网站域名存在于这个域名列表中，则自动启用 HTTPS 访问。

当用户第一次访问一个历来没访问过的网站时，本地是没有 HSTS 信息的，因此这个第一次的会话仍然是可能被劫持的。preload 就是为了解决这个第一次会话劫持的问题的。

值得注意的是：一旦 HSTS 生效，在 max-age 指定的时间内，你再想把网站重定向为 HTTP，以前的老用户会被无限重定向。并且一旦网站证书错误，用户没法选择忽略。

HSTS 是个大招，不要随便开，否则技能冷却时间的时间内。

结语

至此，《Said - 从 HTTP 到 HTTPS 》系列已经完结。当今互联网上多数站点都陆续部署上或者正在部署 HTTPS，主要是由于 HTTPS 的安全性，以及当前主流的浏览器支持的 HTTP/2.0 须要 HTTPS 为基础。同时，百度也正在积极推进 HTTPS的收录，而 google 也声明了 HTTPS 会提高一点点的网站排名，但变化不会很明显。

最简单直观的一个状况，常见的流量劫持 —— 好比你的手机访问某个网站，网页中被某些不良的运营商劫持，强行插入了一些广告：

web 发展迅猛，技术突飞猛进层出不穷。web 的安全性一样是一场持久的攻防战。而 HTTPS 的普及，为 web 通讯构建了更加良好和安全的根基。尽快给你的网站也部上 HTTPS 吧，迎接更好的 web 时代。

这篇文章首发于个人我的网站：据说 - https://tasaid.com/，建议在个人我的网站阅读，拥有更好的阅读体验。

这篇文章与博客园和 Segmentfault 共享。

前端开发QQ群：377786580