http转https后资源加载不显示
【点击领取】阿里云代金券 | 阿里云优惠券 |阿里云优惠码|云服务器|阿里云|阿里云代金券 – 限时领取1888元阿里云代金券
【3折购买ECS服务器入口】:https://promotion.aliyun.com/ntms/act/qwbk.html?userCode=t9686fzw
关于启用 HTTPS 的一些经验分享
随着国内网络环境的持续恶化,各种篡改和劫持层出不穷,越来越多的网站选择了全站 HTTPS。HTTPS 通过 TLS 层和证书机制提供了内容加密、身份认证和数据完整性三大功能,可以有效防止数据被查看或篡改,以及防止中间人冒充。本文分享一些启用 HTTPS 过程中的经验,重点是如何与一些新出的安全规范配合使用。至于 HTTPS 的部署及优化,之前写过很多,本文不重复了。
理解 Mixed Content
HTTPS 网页中加载的 HTTP 资源被称之为 Mixed Content(混合内容),不同浏览器对 Mixed Content 有不一样的处理规则。
早期的 IE
早期的 IE 在发现 Mixed Content 请求时,会弹出「是否只查看安全传送的网页内容?」这样一个模态对话框,一旦用户选择「是」,所有 Mixed Content 资源都不会加载;选择「否」,所有资源都加载。
比较新的 IE
比较新的 IE 将模态对话框改为页面底部的提示条,没有之前那么干扰用户。而且默认会加载图片类 Mixed Content,其它如 JavaScript、CSS 等资源还是会根据用户选择来决定是否加载。
现代浏览器
现代浏览器(Chrome、Firefox、Safari、Microsoft Edge),基本上都遵守了 W3C 的 Mixed Content 规范,将 Mixed Content 分为Optionally-blockable 和 Blockable 两类:
Optionally-blockable 类 Mixed Content 包含那些危险较小,即使被中间人篡改也无大碍的资源。现代浏览器默认会加载这类资源,同时会在控制台打印警告信息。这类资源包括:
通过 标签加载的图片(包括 SVG 图片);
通过 <img> 标签加载的图片(包括 SVG 图片);
通过 <video> / <audio> 和 <source> 标签加载的视频或音频;
预读的(Prefetched)资源;
预读的(Prefetched)资源;
除此之外所有的 Mixed Content 都是 Blockable,浏览器必须禁止加载这类资源。所以现代浏览器中,对于 HTTPS 页面中的 JavaScript、CSS 等 HTTP 资源,一律不加载,直接在控制台打印错误信息。
移动浏览器
前面所说都是桌面浏览器的行为,移动端情况比较复杂,当前大部分移动浏览器默认都允许加载 Mixed Content。也就是说,对于移动浏览器来说,HTTPS 中的 HTTP 资源,无论是图片还是 JavaScript、CSS,默认都会加载。
一般选择了全站 HTTPS,就要避免出现 Mixed Content,页面所有资源请求都走 HTTPS 协议才能保证所有平台所有浏览器下都没有问题。
合理使用 CSP
CSP,全称是 Content Security Policy,它有非常多的指令,用来实现各种各样与页面内容安全相关的功能。
block-all-mixed-content
前面说过,对于 HTTPS 中的图片等 Optionally-blockable 类 HTTP 资源,现代浏览器默认会加载。图片类资源被劫持,通常不会有太大的问题,但也有一些风险,例如很多网页按钮是用图片实现的,中间人把这些图片改掉,也会干扰用户使用。
通过 CSP 的 block-all-mixed-content 指令,可以让页面进入对混合内容的严格检测(Strict Mixed Content Checking)模式。在这种模式下,所有非 HTTPS 资源都不允许加载。跟其它所有 CSP 规则一样,可以通过以下两种方式启用这个指令:
HTTP 响应头方式:
Content-Security-Policy: block-all-mixed-content
<meta>标签方式:
<!--如果换成https后图片或者其他资源加载不上来,可以加上这个meta-->
<meta http-equiv='Content-Security-Policy' content='block-all-mixed-content'>
upgrade-insecure-requests
历史悠久的大站在往 HTTPS 迁移的过程中,工作量往往非常巨大,尤其是将所有资源都替换为 HTTPS 这一步,很容易产生疏漏。即使所有代码都确认没有问题,很可能某些从数据库读取的字段中还存在 HTTP 链接。
而通过 upgrade-insecure-requests 这个 CSP 指令,可以让浏览器帮忙做这个转换。启用这个策略后,有两个变化:
页面所有 HTTP 资源,会被替换为 HTTPS 地址再发起请求;
页面所有站内链接,点击后会被替换为 HTTPS 地址再跳转;
跟其它所有 CSP 规则一样,这个指令也有两种方式来启用,具体格式请参考上一节。需要注意的是 upgrade-insecure-requests 只替换协议部分,所以只适用于 HTTP/HTTPS 域名和路径完全一致的场景。
合理使用 HSTS
在网站全站 HTTPS 后,如果用户手动敲入网站的 HTTP 地址,或者从其它地方点击了网站的 HTTP 链接,依赖于服务端 301/302 跳转才能使用 HTTPS 服务。而第一次的 HTTP 请求就有可能被劫持,导致请求无法到达服务器,从而构成 HTTPS 降级劫持。
HSTS 基本使用
这个问题可以通过 HSTS(HTTP Strict Transport Security,RFC6797)来解决。HSTS 是一个响应头,格式如下:
Strict-Transport-Security: max-age=expireTime [; includeSubDomains] [; preload]
max-age,单位是秒,用来告诉浏览器在指定时间内,这个网站必须通过 HTTPS 协议来访问。也就是对于这个网站的 HTTP 地址,浏览器需要先在本地替换为 HTTPS 之后再发送请求。
includeSubDomains,可选参数,如果指定这个参数,表明这个网站所有子域名也必须通过 HTTPS 协议来访问。
preload,可选参数,后面再介绍它的作用。
HSTS 这个响应头只能用于 HTTPS 响应;网站必须使用默认的 443 端口;必须使用域名,不能是 IP。而且启用 HSTS 之后,一旦网站证书错误,用户无法选择忽略。
HSTS Preload List
可以看到 HSTS 可以很好的解决 HTTPS 降级攻击,但是对于 HSTS 生效前的首次 HTTP 请求,依然无法避免被劫持。浏览器厂商们为了解决这个问题,提出了 HSTS Preload List 方案:内置一份列表,对于列表中的域名,即使用户之前没有访问过,也会使用 HTTPS 协议;列表可以定期更新。
目前这个 Preload List 由 Google Chrome 维护,Chrome、Firefox、Safari、IE 11 和 Microsoft Edge 都在使用。如果要想把自己的域名加进这个列表,首先需要满足以下条件:
拥有合法的证书(如果使用 SHA-1 证书,过期时间必须早于 2016 年);
将所有 HTTP 流量重定向到 HTTPS;
确保所有子域名都启用了 HTTPS;
输出 HSTS 响应头:
max-age 不能低于 18 周(10886400 秒);
必须指定 includeSubdomains 参数;
必须指定 preload 参数;
即便满足了上述所有条件,也不一定能进入 HSTS Preload Lis。通过 Chrome 的 chrome://net-internals/#hsts 工具,可以查询某个网站是否在 Preload List 之中,还可以手动把某个域名加到本机 Preload List。
对于 HSTS 以及 HSTS Preload List,我的建议是只要你不能确保永远提供 HTTPS 服务,就不要启用。因为一旦 HSTS 生效,你再想把网站重定向为 HTTP,之前的老用户会被无限重定向,唯一的办法是换新域名。
CDN 安全
对于大站来说,全站迁移到 HTTPS 后还是得用 CDN,只是必须选择支持 HTTPS 的 CDN 了。如果使用第三方 CDN,安全方面有一些需要考虑的地方。
合理使用 SRI
HTTPS 可以防止数据在传输中被篡改,合法的证书也可以起到验证服务器身份的作用,但是如果 CDN 服务器被入侵,导致静态文件在服务器上被篡改,HTTPS 也无能为力。
W3C 的 SRI(Subresource Integrity)规范可以用来解决这个问题。SRI 通过在页面引用资源时指定资源的摘要签名,来实现让浏览器验证资源是否被篡改的目的。只要页面不被篡改,SRI 策略就是可靠的。
SRI 并不是 HTTPS 专用,但如果主页面被劫持,攻击者可以轻松去掉资源摘要,从而失去浏览器的 SRI 校验机制。
了解 Keyless SSL
另外一个问题是,在使用第三方 CDN 的 HTTPS 服务时,如果要使用自己的域名,需要把对应的证书私钥给第三方,这也是一件风险很高的事情。
CloudFlare 公司针对这种场景研发了 Keyless SSL 技术。你可以不把证书私钥给第三方,改为提供一台实时计算的 Key Server 即可。CDN 要用到私钥时,通过加密通道将必要的参数传给 Key Server,由 Key Server 算出结果并返回即可。整个过程中,私钥都保管在自己的 Key Server 之中,不会暴露给第三方。
CloudFlare 的这套机制已经开源,如需了解详情,可以查看他们官方博客的这篇文章:Keyless SSL: The Nitty Gritty Technical Details。
好了,本文先就写到这里,需要注意的是本文提到的 CSP、HSTS 以及 SRI 等策略都只有最新的浏览器才支持,详细的支持度可以去 CanIUse 查。切换到 HTTPS 之后,在性能优化上有很多新工作要做,这部分内容我在之前的博客中写过很多,这里不再重复,只说最重要的一点:既然都 HTTPS 了,赶紧上 HTTP/2 才是正道。
【点击领取】阿里云代金券 | 阿里云优惠券 |阿里云优惠码|云服务器|阿里云|阿里云代金券 – 限时领取1888元阿里云代金券
【3折购买ECS服务器入口】:https://promotion.aliyun.com/ntms/act/qwbk.html?userCode=t9686fzw
转载于:https://juejin.im/post/5c9e2ae76fb9a05e3345c61c
http转https后资源加载不显示相关推荐
- 网站开启https后很慢_网站HTTPS后初次加载奇慢,打开后站内浏览速度又正常
网站HTTPS后打开奇慢,首页加载后后站内加载速度又正常. 开HTTPS后,首页初次打开特别慢,换了设备情况也是一样. 把HTTPS关了后,首页打开恢复正常, 难道是免费的HTTPS的锅? 如果是这样 ...
- unity嵌入android应用后资源加载很慢
症状 unity 使用 Resource.LoadAsync 加载资源要等好几秒 单独使用 unity 打包apk不会,但导成 aar 给别的 android 应用使用就会 原因 unity 默认打包 ...
- vue解决图片加载失败显示默认图片的方法
在项目中经常会遇到图片加载失败需要显示默认图片的场景,那么如何在图片src资源加载失败显示出默认的图片呢? 方法一:onerror <img src="原来要加载的资源" o ...
- 06.Spring 资源加载 - ResourceLoader
基本概念 ResourceLoader 接口,在 Spring 中用于加载资源,通过它可以获取一个 Resouce 对象. 内部构造 首先来看它的接口定义: public interface Reso ...
- 【Android 插件化】Hook 插件化框架总结 ( 插件包管理 | Hook Activity 启动流程 | Hook 插件包资源加载 ) ★★★
Android 插件化系列文章目录 [Android 插件化]插件化简介 ( 组件化与插件化 ) [Android 插件化]插件化原理 ( JVM 内存数据 | 类加载流程 ) [Android 插件 ...
- 【Android 插件化】“ 插桩式 “ 插件化框架 ( 类加载器创建 | 资源加载 )
Android 插件化系列文章目录 [Android 插件化]插件化简介 ( 组件化与插件化 ) [Android 插件化]插件化原理 ( JVM 内存数据 | 类加载流程 ) [Android 插件 ...
- 【Flutter】Image 组件 ( 配置本地 gif 图片资源 | 本地资源加载 placeholder )
文章目录 一.配置本地 gif 图片资源 二.本地资源加载 Placeholder 三.完整代码示例 四.相关资源 一.配置本地 gif 图片资源 配置 assets 图片资源 : 将 gif 图片拷 ...
- Android apk动态加载机制的研究(二):资源加载和activity生命周期管理
转载请注明出处:http://blog.csdn.net/singwhatiwanna/article/details/23387079 (来自singwhatiwanna的csdn博客) 前言 为了 ...
- 浏览器页面资源加载过程与优化
评价页面性能好坏的核心之一就是页面的加载速度,而页面加载速度的关键就是页面资源的加载.本文将从浏览器浏览器页面资源加载过程展开分析,来引出页面关键请求路径的概念,并给出如何优化该关键请求路径的一些方法 ...
- Unity游戏开发——新发教你做游戏(三):3种资源加载方式
文章目录 一.前言 二.Unity的目录结构规范 1.Resources(不是很推荐把资源放这个目录) 2.RawAssets(存放生资源) 3.GameRes(存放熟资源) 4.StreamingA ...
最新文章
- Matlab学习笔记——find()函数
- 用户请求队列化_分布式消息队列选型分析
- 无处不在的智能设备与边缘计算时代即将来临
- 新课标下计算机教学,浅析新课程标准下小学信息技术教学
- VTK:Points之ExtractSurface
- java基础---多线程同步锁问题
- 分布式是写出来的(六)
- clickhouse的ReplacingMergeTree引擎实战
- 超火AI变脸特效来袭!马云蔡徐坤一起《吗咿呀嘿》 网友:摇不能停
- 2022年投影仪推荐 家用投影仪推荐一下哪款比较好2022
- 汇智创科机器人,【汇智创科机器人】这个周六,和孩子一起“动手不动口”,比比看谁最棒!...
- java hl7v3_hl7 java 解析
- 声纹识别demo_语音识别、声纹识别的区别及测试
- 分享一个便宜又好用的代理ip
- EA将向内政及手机游戏开辟商供应发行办事
- android桌面动画
- 常用IP地址端口对照表
- 【单调队列优化DP】烽火传递 LibreOJ - 10180
- Mac android studio 环境搭建和真机运行
- VMware Horizon View 7.5 如何搭建虚拟桌面,我们有软件硬件解决方案
热门文章
- 地震应急综合解决方案
- java 提高随机数效率_抢拍神器的关键:优化提升Java线程局部随机数ThreadLocalRandom高并发技巧 - alidg...
- 官方教你如何为centos 7.x 安装Broadcom无线网卡驱动
- 苹果软件更新在哪里_手机资讯:iPhone 为什么比安卓手机好用iPhone 的独到之处在哪里...
- DruidDataSource配置说明
- linux下删除系统软件,Linux系统 安装垃圾清除软件,linux清理工具安装教程
- 计算机中常用术语CAD是指,计算机常用术语CAD的含义是
- 蚂蚁金服红蓝军技术攻防演练究竟有多“狠”
- 用C语言将四个数字排列顺序(不重复)
- 样本不平衡的解决方案(很详细)