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

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

前端开发QQ群:377786580

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

部署到 HTTPS 会发生什么

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

随着 chrome 的 安全计划,今后以下的 API 只能在 安全环境 中使用:

实测中,当前获取用户地理位置 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

参考和引用

网站部署 HTTPS 中需要做的事情的更多相关文章

  1. 10件在PHP7中不要做的事情

    10件在PHP7中不要做的事情 1. 不要使用mysql_函数 这一天终于来了,从此你不仅仅“不应该”使用mysql_函数.PHP 7 已经把它们从核心中全部移除了,也就是说你需要迁移到好得多的mys ...

  2. 明年将制定个人信息保护法 网站部署https迫在眉睫

    12月20日,全国人大常委会法工委举行第三次记者会.全国人大常委会法工委发言人岳仲明表示,中国明年将制定个人信息保护法.数据安全法等. 数据泄露为何频频出现 你是否经常接到骚扰电话?推销.诈骗等等均有 ...

  3. 10 件在 PHP 7 中不要做的事情

    1. 不要使用mysql_函数 这一天终于来了,从此你不仅仅"不应该"使用mysql_函数.PHP 7 已经把它们从核心中全部移除了,也就是说你需要迁移到好得多的mysqli_函数 ...

  4. 10件在PHP 7中不要做的事情

    刚刚在园子里看到一篇特别好的文章,就拿到我的园子里分享了. 1. 不要使用mysql_函数 这一天终于来了,从此你不仅仅“不应该”使用mysql_函数.PHP 7 已经把它们从核心中全部移除了,也就是 ...

  5. web forms page和control的生命周期life cycle交互,以及page生命周期中每个event中需要做什么事情

    只有 page_load和page_init这些可以autoeventwireup RenderControl只提供override public override void RenderContro ...

  6. 一次部署HTTPS的相关事件引发的思考

    前言: 上周五快要下班的时候,突然收到通知客户希望了解一下部署HTTPS的流程,这种事情谁听了都会有几分诧异的.因为这件事虽然和工作有一定的相关度,但平时不会走这个方向,实际上也较少接触.此外,客户手 ...

  7. 微软ASP.NET网站部署指南(2):部署SQL Server Compact数据库

    1. 综述 对于数据库訪问,Contoso University程序要求以下的软件必须随程序一起部署.由于不属于.NET Framework: SQL Server Compact (数据库引擎) A ...

  8. 如何为网站启用HTTPS加密传输协议

    前言 当今时代对上网的安全性要求比以前更高,chrome和firefox也都大力支持网站使用HTTPS,苹果也从2017年开始在iOS 10系统中强制app使用HTTPS来传输数据,微信小程序也是要求 ...

  9. 不是 HTTPS 拖慢网站速度,而是优化做的不够优秀

    HTTPS(全称:Hyper Text Transfer Protocol over SecureSocket Layer),是以安全为目标的 HTTP 通道,简单讲是 HTTP 的安全版,即 HTT ...

随机推荐

  1. Python 爬取所有51VOA网站的Learn a words文本及mp3音频

    Python 爬取所有51VOA网站的Learn a words文本及mp3音频 #!/usr/bin/env python # -*- coding: utf-8 -*- #Python 爬取所有5 ...

  2. HTTP消息中header头部信息的讲解

    HTTP Request的Header信息 1.HTTP请求方式 如下表: GET 向Web服务器请求一个文件 POST 向Web服务器发送数据让Web服务器进行处理 PUT 向Web服务器发送数据并 ...

  3. Flex4 自定义分页组件

    自己写的Flex4分页组件,去伪存真,只实现基本的分页功能,数据过滤神马的都不应该是分页组件干的活,有呆毛才有真相: [源代码下载] Flex自从转手给Apache后人气急跌,本人也很捉鸡,尽管Apa ...

  4. Android简单例子——AlertDialog

    最近学习了一段时间的Android,在网上找了些小的Demo,自己模拟这做了下,首先谢谢那些提供例子的朋友 今天主要学习的是简单的Dialog的使用(实现退出对话框)和自定义对话框 1.实现退出对话框 ...

  5. 微信小程序豆瓣电影项目的改造过程经验分享

    在学习微信小程序开发过程中,一部分的难点是前端逻辑的处理,也就是对前端JS的代码编辑:一部分的难点是前端界面的设计展示:本篇随笔基于一个豆瓣电影接口的小程序开源项目进行重新调整,把其中遇到的相关难点和 ...

  6. 各种MM(存储器)含义

    1.rom:read only memory 只读存储器 只能读,不能写. 2.ram:random access memory 随机存取存储器 可读可写. 3.fifo:first in first ...

  7. tomcat源码研究之源码导入eclipse

    版本:8.5.x官网:https://tomcat.apache.org/svn.html1. 下载源码,git镜像:https://github.com/apache/tomcat85 .2. 导入 ...

  8. 2018牛客网暑假ACM多校训练赛(第三场)G Coloring Tree 计数,bfs

    原文链接https://www.cnblogs.com/zhouzhendong/p/NowCoder-2018-Summer-Round3-G.html 题目传送门 - 2018牛客多校赛第三场 G ...

  9. 导出表结构sql语句

    -- C:/dba必需是已经存在的目录 -- create or replace directory UTL_DIR as 'C:\dba'; --用sys用户登录给要访问的用户指定访问目录的权限gr ...

  10. [java] DOS编译 .java 文件得到 .class 文件 并执行 以及使用外部 .jar包 时的命令

    当写一个java文件后,在DOS中进行编译与执行时,如果没有引入外来的包,那情况很简单 例如: public class hello_world { public static void main(S ...