这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

开发过程中 常见的 https 问题 - 避坑

做前端多年,发现有些问题需要重复解决很多次,浪费了不少时间,https 导致的问题就属于其中的一种,被不同岗位的同事问过很多次。 这篇关于 https 的科普文,赶紧安利给团队的相关小伙伴看看吧,从此再也不会有人找你解决 https 相关的 bug,又多了一些摸鱼的时间,爽(巴适得很)。

注:本篇文章提到的浏览器都是指 chrome 浏览器

案例 1 - 下载资源失败或图片加载失败 - “Mixed Content”问题

在 https 网站中发起的 http 请求被禁止

这是因为最新版本的 chrome 提高了用户安全策略,保护用户免受不安全下载的侵害(点击这里查看 chrome 文档 Protecting users from insecure downloads)

注意:

  1. https 协议的网站中不允许存在 http 协议的请求
  2. http 协议的网站中允许访问 https 协议的资源

案例 2 - 浏览器提示网站不安全 记住的账户密码不能自动填充 - 证书错误问题

提示不安全是因为 chrome 认为 当前网站存在信息泄漏的风险。

检查当前网站协议是否为 https:

如果是 https 的话有两种可能,一种是当前网站被标记为不安全,另一种是 https 证书无效、过期了。

如果是 http 的话,需要升级当前网站协议为 https。

chrome 浏览器对 http 协议的限制很多,所以运维在部署网站的时候大概率是需要申请 https 协议的。

账号密码不能自动填充是因为 chrome 记住密码功能记住的网站是包含域名、协议和端口的,其中一个变化了都不能自动填充。

注意:

  1. 项目部署后同时给域名申请 https 安全协议
  2. 运维需要关注 https 自动续费,以免影响线上环境

案例 3 - webpack-dev-server 代理的后端服务 忽然报 CORS 错误 - 强制使用 https 问题

看控制台报错,意思是后端服务自动跳转到另一个服务了,而那个服务未开启 cors 策略。 遇到这个问题的时候我很迷惑,跳转的这个域名也是非常规的域名,以为是后端某位同学的服务注册到线上了,但是经过观察,发现线上环境没有影响,只有本地开发环境的请求会报错。

如果是后端本地服务注册到线上,那么线上和本地都应该是随机访问到这个同学的服务而报错。

最后想到本地和线上的不同,就是一个是 http,一个是 https,在浏览器直接访问后端的服务发现,后端服务开启了 http 自动升级 https,因此所有 http 协议的请求都不能通过了。

查看后端服务的 nginx 配置,可以看到所有请求都配置了 301 重定向。

修改本地使用的后端服务协议为 https 解决此问题。

总结

总的来说,一个前端将会遇到的 https 问题大概有以下 3 种:

  1. Mixed Content 错误:

    当网站同时使用 HTTPS 和 HTTP 的资源时,例如在 HTTPS 的网站中引入 HTTP 的图片、CSS、JavaScript 等文件,浏览器会提示“Mixed Content”错误,这是因为 HTTP 的资源容易被恶意攻击者利用。解决方法是将所有资源都使用 HTTPS 进行加载。

  2. 证书错误:

    在使用 HTTPS 时,需要使用 SSL 证书来验证网站的身份。如果证书无效、已过期或不受信任,浏览器会提示证书错误。解决方法是获取有效的 SSL 证书,并将其安装到 Web 服务器中。

  3. HSTS:

    HSTS(HTTP Strict Transport Security)是一种安全机制,可以强制浏览器只使用 HTTPS 连接访问网站。如果网站启用了 HSTS,浏览器会自动将 HTTP 请求重定向到 HTTPS。在开发过程中,需要注意是否启用了 HSTS,以避免由于 HSTS 导致的连接问题。

tips

  • https 是绝对安全的?

    https 也能被抓包,但是抓到之后攻击者由于没有私钥所以也无法解密,抓到也没有用。https 的安全是基于对证书颁发机构的信任的,也不能算是 100% 的安全。

  • 为什么说非对称加密效率不高 速度慢 具体体现在哪里?

    对称加密本质上是位运算包含位移和替换,非对称加密包含大量大数乘法、大数模计算(RSA 的核心算法是欧拉定理)。
    AES 算法的底层原理RSA 算法详解

  • 登录密码需要加密?

    如果说是为了防止被抓包,那没必要,因为 https 已经做了数据加密,即使是被抓包了也是加密过的数据。
    如果说是为了防止部分用户存在一个密码多个网站使用的情况下,密码泄漏导致多个网站密码泄漏,那就是有意义的。

  • 请求参数有必要加密?

    请求的参数没必要加密,因为 https 本身会加密数据,服务端接收到之后会自动解密,如果再加一层加密,无疑增加了响应时间。
    使用额外的加密层会增加网络负载和系统资源开销

  • 响应数据有必要加密?

    根据上一条响应数据也没必要加密,另外,响应体整体加密也没必要,感兴趣的同学可以看这篇response body 加密了怎么办? 来 破解它

本文转载于:

https://juejin.cn/post/7208466455880417317

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

网站https 问题记录的更多相关文章

  1. (转)Nginx的https配置记录以及http强制跳转到https的方法梳理

    Nginx的https配置记录以及http强制跳转到https的方法梳理 原文:http://www.cnblogs.com/kevingrace/p/6187072.html 一.Nginx安装(略 ...

  2. 使用Let’s Encrypt实现网站https化

    使用 Let's Encrypt 证书和搭配 Nginx 实现网站 https 化. 一.SSL证书获取 由于 Let's Encrypy 申请的 SSL 证书只有三个月的有效期,为了实现自动续期,使 ...

  3. 网站https证书SSL证书相关

    网站https证书SSL证书相关 二级域名可以申请证书来使用,主域名申请的单域名证书,二级域名不在https加密保护内,通配符证书可以保护主域名下所有的二级子域名,二级域名等于和主域名使用的同一张证书 ...

  4. 分享一个编程学习网站:https://github.com/justjavac/free-programming-books-zh_CN

    分享一个编程学习网站:https://github.com/justjavac/free-programming-books-zh_CN

  5. 修改图片尺寸网站https://www.yasuotu.com/

    修改图片尺寸网站https://www.yasuotu.com/

  6. Let'sencrypt认证的网站Https配置

    推荐使用这个脚本,具体说明里面都有 https://github.com/xdtianyu/scripts/tree/master/le-dns 它是通过调用dns服务商的api更新txt记录实现,无 ...

  7. 最新阿里云申请免费SSL证书实现网站HTTPS化(图文教程一)

    一.申请免费SSL证书: 1.登录阿里云: 2.领取代金券礼包: https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=0a ...

  8. 2018网站Https升级完全攻略

    这篇文章主要讲下HTTPs升级的全部流程,包括SSL/TLS证书获取,证书安装,网站调试(将站内http资源全部改为https+重定向等),升级成功后向谷歌webmaster和GA的重新提交新的网站. ...

  9. js记录用户在网站的浏览记录和停留时间

    by weber开发者 from http://weber.pub/ 本文地址: http://weber.pub/js记录用户行为浏览记录和停留时间/163.html 问题 公司想统计一个用户从进入 ...

  10. 网站相关人员信息记录humans.txt

    前面的话 robots.txt文件告诉搜索引擎哪些页面可以抓取,哪些页面不能抓取.而humans.txt文件则是为人类准备的,包含参加该网页设计和建立的相关人员的信息.本文将详细介绍humans.tx ...

随机推荐

  1. windows远程连接centos及闪退异常解决记录

     平时在学校实验室写代码用的环境是linux系统,放假回家之后之后笔记本的性能和系统多少有些不方便,因此使用服务器安装IDEA进行编程,记录一下远程桌面的安装及出现的问题解决. 一. 安装Centos ...

  2. lombok-ex 编译时注解框架,性能完爆 AOP

    lombok-ex lombok-ex 是一款类似于 lombok 的编译时注解框架. 主要补充一些 lombok 没有实现,且自己会用到的常见工具. 编译时注解性能无任何损失,一个注解搞定一切,无三 ...

  3. Swoole从入门到入土(21)——毫秒定时器

    Swoole提供了毫秒精度的定时器,所有操作都是内存操作,无额外的IO开销. 下面让我们一起详细了解每个函数的作用: 1) 函数tick:设置一个间隔时钟定时器,这个定时器会持续触发 Swoole\T ...

  4. 使用@ControllerAdvice统一处理自定义异常

    最近工作中涉及到捕捉AOP方法中抛出的异常. 想针对某一种异常做一个统一的处理器并封装好异常信息以JSON格式交给前端进行提示. 主要实现的话有以下几步: 1.编写自定义异常类 package com ...

  5. 原来你是这样的JAVA--[07]聊聊Integer和BigDecimal

    今天来聊聊Java中跟数值处理相关的两个类型Integer和BigDecimal. 说起这两个类型,我们肯定都不陌生,但是其中有些容易踩到的坑需要注意避让. Integer 整型我们应该每天都会用到, ...

  6. 用Visual Studio把代码放到GitLab

    1.点"Git更改" 2.点"创建Git仓库--": 3.点"现有远程",再输入"远程URL": 4.在出现的警告框里选 ...

  7. 【Azure Key Vault】客户端获取Key Vault机密信息全部失败问题分析

    问题描述 在应用中获取存储在Azure Key Vault的机密信息,全部失败. 报错日志内容如下: [reactor-http-epoll-4] [reactor.netty.http.client ...

  8. 【Azure 媒体服务】AMS的Manifest文件中SmoothStreamingMedia片段中<c t="6161940" d="749970" r="2" n="0" />, c, t, d, r, n 的解析

    问题描述 在Azure媒体服务(AMS: Azure Media Service)中,不管是点播,直播都需要下载manifest文件.而文件中有一段[<c t="6161940&quo ...

  9. 【Azure API 管理】 为APIM创建一个审批订阅申请的RBAC角色,最少的Action内容是什么呢?

    问题描述 在使用APIM服务中,需要为专门的一组用户赋予特殊的权限:审批APIM用户的对产品的订阅.需要自定义一个RBAC角色,那么如何来设置最少的Action满足需求呢? 问题解答 要对APIM订阅 ...

  10. 基于 Nebula Graph 构建图学习能力

    本文首发于 Nebula Graph Community 公众号 经常看技术文章的小伙伴可能会留意到除了正在阅读的那篇文章,在文章页面的正文下方或者右侧区域会有若干同主题.同作者的文章等你阅读:经常逛 ...