Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Localhost何时要用HTTPS?

Localhost何时要用HTTPS?

原创
作者头像
智影Yodonicc
发布于 2022-04-22 12:52:11
发布于 2022-04-22 12:52:11
3.5K2
举报
文章被收录于专栏:智影Yodonicc智影Yodonicc

作者:Maud Nalpas

原文链接:When to use HTTPS for local development

译者:Yodonicc

使用http://localhost 进行本地开发在大多数情况下是没有问题的,除了一些特殊情况。这篇文章解释了什么时候需要用HTTPS运行你的本地开发网站。

在这篇文章中,关于localhost的说法对127.0.0.1[::1]也是有效的,因为它们都描述了本地计算机地址,也叫 "回环地址"。另外,为了使事情简单,不指定端口号。因此,当你看到http://localhost时,请将其理解为http://localhost:{PORT}http://127.0.0.1:{PORT}

总结

在本地开发时,默认使用http://localhost。Service Workers、Web Authentication API等都可以正常工作。然而,在以下情况下,你需要HTTPS来进行本地开发。

  • 在不同的浏览器中以一致的方式设置安全cookies
  • 调试mixed-content的问题
  • 使用HTTP/2及更高版本
  • 使用需要HTTPS的第三方库或API
  • 使用自定义的主机名
在本地开发中需要使用HTTPS的情况列表.png
在本地开发中需要使用HTTPS的情况列表.png

<center>在本地开发中需要使用HTTPS的情况列表

</center>

如果你需要HTTPS用于上述用例之一,请查看如何使用HTTPS进行本地开发。

✨ 这就是你需要知道的一切。如果你对更多的细节感兴趣,请继续阅读!

为什么你的开发网站应该更具有安全性

为了避免遇到意想不到的问题,你希望你的本地开发网站尽可能地表现得像你的生产网站。因此,如果你的生产网站使用HTTPS,你希望你的本地开发网站表现得像一个HTTPS网站

警告:

如果你的生产环境没有使用HTTPS,请将其作为优先事项。

默认使用http://localhost

浏览器以一种特殊的方式对待http://localhost虽然它是HTTP,但它大多表现得像一个HTTPS网站

http://localhost,Service Workers、传感器API、Authentication API、支付以及其他需要一定安全保障的功能都得到了支持,并且表现得与HTTPS网站完全一样。

什么时候为本地开发使用HTTPS?

你可能会遇到这样的特殊情况:http://localhost不像一个 HTTPS 网站,或者你可能只是想使用一个非http://localhost的自定义网站名称。

在以下情况下,你需要使用HTTPS进行本地开发。

  • 你需要在本地设置一个Secure、或SameSite:none、或具有__Host前缀的cookieSecurecookie只在HTTPS上设置,而不是在所有浏览器的http://localhost。而且,由于SameSite:none__Host也要求cookie是Secure的,在你的本地开发网站上设置这种cookie也需要HTTPS。

小贴士

当涉及到在本地设置Securecookie时,并非所有的浏览器都以同样的方式行事。例如,Chrome和Safari不在本地主机上设置Securecookie,但Firefox会。在Chrome中,这被认为是一个错误。

  • 你需要在本地调试一个只在HTTPS网站上发生,而在HTTP网站上不发生的问题,甚至http://localhost,例如 mixed-content 问题。
  • 你需要在本地测试或重现HTTP/2或更新的特定行为。例如,如果你需要测试HTTP/2或更新版本的加载性能。不安全的HTTP/2或更新版本不被支持,甚至在localhost上也不被支持。
  • 你需要在本地测试需要HTTPS的第三方库或API(例如OAuth)。
  • 你没有使用localhost,而是使用一个用于本地开发的自定义主机名,例如mysite.example。通常,这意味着你已经覆盖了你的本地hosts文件。
终端编辑hosts文件的屏幕截图.jpeg
终端编辑hosts文件的屏幕截图.jpeg

<center>终端编辑hosts文件的屏幕截图

</center>

代码语言:txt
AI代码解释
复制
	在这种情况下,Chrome、Edge、Safari和Firefox默认不认为`mysite.example`是安全的,尽管它是一个本地		网站。所以它不会表现得像一个HTTPS网站。
  • 其他情况! 这不是一个详尽的列表,但是如果你遇到这里没有列出的情况,你就会知道:事情会在http://localhost上出意外,或者它的行为不太像你的生产网站。🙃

在所有这些情况下,你需要在本地开发中使用HTTPS

如何在本地开发中使用HTTPS?

如果你需要使用HTTPS进行本地开发,请期待本系列的下一篇文章:如何在Localhost使用HTTPS开发?

如果你使用自定义主机名的提示

如果你使用一个自定义的主机名,例如,编辑你的hosts文件

  • 不要使用像mysite这样的裸主机名,因为如果有一个顶级域名(TLD)恰好有相同的名字(mysite),你会遇到问题。而且,这并非不可能:在2020年,有超过1500个顶级域名,而且这个名单还在不断增加。coffee, museum, travel,以及许多大公司的名称(甚至可能是你正在工作的公司!)都是顶级域名。请看这里的完整列表
  • 只使用属于你的域名,或为此目的保留的域名。如果你没有自己的域名,你可以使用testlocalhostmysite.localhost)。test在浏览器中没有特殊处理,但localhost有。Chrome和Edge对http://<name>.localhost有特殊支持 ,就像对localhost支持一样,它们将表现得很安全。试试吧:在localhost上运行任何网站,在Chrome或Edge中访问http://<你喜欢的任何名字>.localhost:<你的端口>。这可能很快就能在Firefox和Safari中实现。你之所以可以这样做(拥有像mysite.localhost这样的子域),是因为localhost不仅仅是一个主机名:它也是一个完整的顶级域名,就像com

了解更多

非常感谢所有审稿人的贡献和反馈,特别是Ryan Sleevi、Filippo Valsorda、Milica Mihajlija、Rowan Merewood和Jake Archibald。🙌

文中照片来源: @moses_lee on Unsplash

注:特别感谢技术指导dazhao(赵达)对本文翻译的审阅指正

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
2 条评论
热度
最新
11点赞举报
^_^感谢支持
^_^感谢支持
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
何时以及如何在你的本地开发环境中使用 HTTPS
翻译:布兰 作者:Maud Nalpas https://web.dev/when-to-use-local-https/ https://web.dev/how-to-use-local-https/
用户4456933
2021/06/01
2.8K0
何时以及如何在你的本地开发环境中使用 HTTPS
Localhost如何使用HTTPS?
在这篇文章中,关于localhost的说法对127.0.0.1和[::1]也是有效的,因为它们都描述了本地计算机地址,也叫 "回环地址"。另外,为了使事情简单,不指定端口号。因此,当你看到http://localhost时,请将其理解为http://localhost:{PORT}或 http://127.0.0.1:{PORT}。
智影Yodonicc
2022/04/24
13.4K0
Localhost如何使用HTTPS?
零配置网络助力httpS的部署
在《本地安排上HTTPS的最佳途径》一文中,我们了解到,现代浏览器的安全策略越来越严格了,很多系统级API只能在https的网页上使用,比如下面这些:
Jean
2021/11/10
7950
【Web技术】582- 聊聊 Cookie “火热”的 SameSite 属性
2 月份发布的 Chrome 80 版本中默认屏蔽了第三方的 Cookie,在灰度期间,就导致了阿里系的很多应用都产生了问题,为此还专门成立了小组,推动各 BU 进行改造,目前阿里系基本已经改造完成。所有的前端团队估计都收到过通知,也着实加深了一把大家对于 Cookie 的理解,所以很可能就此出个面试题,而即便不是面试题,当问到 HTTP 相关内容的时候,不妨也扯到这件事情来,一能表明你对前端时事的跟进,二还能借此引申到前端安全方面的内容,为你的面试加分。
pingan8787
2020/05/14
1.9K0
【Web技术】582- 聊聊 Cookie “火热”的 SameSite 属性
网络协议笔记(一):HTTP协议基础知识
1、HTTP协议是超文本传输协议,也就是 HyperText Transfer Protocol。 2、HTTP是一个用在计算机世界里的协议。它使用计算机能够理解的语言确立了一种计算机之间交流通信的规范,以及相关的各种控制和错误处理方式。(协议) 3、HTTP是一个在计算机世界里专门用来两点之间传输数据的约定和规范 (传输)
free赖权华
2020/06/04
1.1K0
什么是Localhost?以及它如何应用于WordPress?
在计算机网络中,“localhost”是指运行特定程序的计算机。例如,如果您在自己的计算机上运行程序(如Web浏览器或本地Web开发环境),那么您的计算机就是“Localhost”。另一方面,如果您谈论的是位于主机Web服务器上的MySQL数据库,那么您主机的Web服务器就是该场景中的“Localhost”。
Yangsh888
2022/04/05
1.9K0
前端本地开发同时起多个localhost服务,cookie里token被覆盖问题
同时开发多个前端项目,都是运行在 localhost 下的不同端口上:localhost:8080、localhost:8081、localhost:8082...一去登录其中一个端,其他端的登录态都失效了。
人人都是码农
2023/11/17
6460
前端本地开发同时起多个localhost服务,cookie里token被覆盖问题
localhost 与 127.0.0.1 的区别
localhost和127.0.0.1频繁出现在各种网络及软件开发的场景之中。它们似乎指向同一个意义——那就是你的本地设备。
软件架构师Michael
2024/08/07
1810
Cook Cookie, 我把 SameSite 给你炖烂了
SameSite cookie 推出已一年有余,自己看了不少文章,也撞了不少南墙,所以还是那句好记性不如烂笔头。你可能觉得自己懂了,但试着讲出来,才能知道自己是否真的懂了。
秋风的笔记
2021/01/06
2.5K0
Cook Cookie, 我把 SameSite 给你炖烂了
【Linux网络#15】:DNS 协议 & ICMP 协议
TCP/IP 中使用 IP 地址和端口号来确定网络上的一台主机的一个程序,但是 IP 地址不方便记忆,于是人们发明了一种叫主机名的东西, 是一个字符串, 并且使用 hosts 文件来描述主机 名和 IP 地址的关系.
IsLand1314
2025/03/04
2790
【Linux网络#15】:DNS 协议 & ICMP 协议
本地安排上HTTPS的最佳途径~
这年头没有https都没法开发软件了,web标准上近几年的api们清一色地要求https,否则就罢工!它们包括但不限于:
Jean
2020/09/25
2.4K0
本地安排上HTTPS的最佳途径~
网工就该了解:localhost 与 127.0.0.1 的区别
当你使用localhost时,系统会通过DNS(域名系统)解析来将其转换为相应的IP地址。一般情况下,这个过程很快,因为大多数操作系统都会在本地的hosts文件中对localhost进行映射,使其指向127.0.0.1或类似的环回地址。相反,使用127.0.0.1时,由于它本身就是一个IP地址,因此无需通过DNS解析,数据包直接在本机内部路由。
ICT系统集成阿祥
2024/12/03
2030
网工就该了解:localhost 与 127.0.0.1 的区别
【跨域】一篇文章彻底解决跨域设置cookie问题!
一篇文章彻底解决跨域设置cookie问题! 大家好我是雪人~~⛄ 之前做项目的时候发现后端传过来的 SetCookie 不能正常在浏览器中使用。 是因为谷歌浏览器新版本Chrome 80将Cookie的SameSite属性默认值由None变为Lax。 接下来带大家解决该问题。 原理讲解 我们可以看到Cookie有以下属性 图片 Cookie属性 名称:Cookie的name。 值:Cookie的value。 Domain: Cookie的域。如果设成xxx.com(一级域名),那么子域名x.xxx.com(
LonelySnowman
2023/01/08
8.1K1
腾讯三面:Cookie的SameSite了解吧,那SameParty呢?
同源协议中的源是由「协议+域名+端口」三者一起定义的,有一个不同就不算同源,而同站只受域名的约束,并且还不要求一模一样——只要「有效顶级域名+二级域名」相同,都算同站。
用户9899350
2022/07/29
1.1K0
腾讯三面:Cookie的SameSite了解吧,那SameParty呢?
Go Web 编程--如何确保Cookie数据的安全传输
Cookie(也叫Web Cookie或浏览器Cookie)是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常,它用于告知服务端两个请求是否来自同一浏览器,如保持用户的登录状态。Cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。
KevinYan
2020/03/12
7450
Linux DNS 服务器安装、配置和维护
每个 IP 地址都可以有一个主机名,主机名由一个或多个字符串组成,字符串之间用小数点隔开。有了主机名,就不要死记硬背每台 IP 设备的 IP 地址,只要记住相对直观有意义的主机名就行了。这就是 DNS 协议所要完成的功能。
马哥linux运维
2019/01/17
14K0
Linux DNS 服务器安装、配置和维护
DNS 协议入门
域名系统 (DNS) 的作用是将人类可读的域名 (如,www.example.com) 转换为机器可读的 IP 地址 (如,192.0.2.44)。
静默虚空
2018/10/25
2.8K0
DNS 协议入门
实用,完整的HTTP cookie指南
cookie 是后端可以存储在用户浏览器中的小块数据。 Cookie 最常见用例包括用户跟踪,个性化以及身份验证。
前端小智@大迁世界
2020/08/26
6.4K0
实用,完整的HTTP cookie指南
从URL开始,定位世界 | 洞见
从我们输入URL并按下回车键到看到网页结果之间发生了什么?换句话说,一张网页,要经历怎样的过程,才能抵达用户面前?下面来从一些细节上面尝试一下探寻里面的秘密。 ---- 前言:键盘与硬件中断 说到输入URL,当然是从手敲键盘开始。对于键盘,生活中用到的最常见的键盘有两种:薄膜键盘、机械键盘。 薄膜键盘:由面板、上电路、隔离层、下电路构成。有外观优美、寿命较长、成本低廉的特点,是最为流行的键盘种类。键盘中有一整张双层胶膜,通过胶膜提供按键的回弹力,利用薄膜被按下时按键处碳心于线路的接触来控制按键触发。 机械
ThoughtWorks
2018/04/17
9440
从URL开始,定位世界 | 洞见
Linux DNS 服务器安装、配置和维护
每个 IP 地址都可以有一个主机名,主机名由一个或多个字符串组成,字符串之间用小数点隔开。有了主机名,就不要死记硬背每台 IP 设备的 IP 地址,只要记住相对直观有意义的主机名就行了。这就是 DNS 协议所要完成的功能。 今天我们将讨论DNS服务器,特别是Linux DNS服务器,及其如何安装、配置和维护它。 /etc/hosts文件 在没有DNS服务器的情况下,每个系统在本地网络上保留其主机名和相应IP地址列表的副本是合理的——特别是在没有互联网连接的小型站点上。 在Linux系统中,这个列表就是/e
小小科
2018/05/03
10K0
Linux DNS 服务器安装、配置和维护
推荐阅读
相关推荐
何时以及如何在你的本地开发环境中使用 HTTPS
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档