网站被浏览器报不安全:HTTPS证书链、安全响应头与Mixed Content的排查记录

简介: 客户网站突然被浏览器报不安全,排查发现是HTTPS证书链不完整加安全响应头缺失。本文记录了证书链补全、CSP/HSTS等安全响应头配置和Mixed Content修复的完整过程,以及5个实际踩过的坑。

上周三下午两点,客户突然打电话过来说网站被浏览器报"不安全",地址栏左边是个红色三角形。我打开Chrome一看,果然报了"您的连接不是私密连接"。排查了半天才发现是HTTPS证书链不完整加安全响应头缺失导致的。这篇把排查过程和关键配置记下来。

一、先定位:浏览器报的是什么

打开Chrome的开发者工具,Security面板显示:证书已过期但实际证书是有效的,问题出在中间证书没配置。另外Console里有几条Mixed Content警告——页面是HTTPS但引用了HTTP的图片资源。

排查清单:
1. Security面板看证书链是否完整
2. Console搜"Mixed Content"
3. 用curl -I看响应头
4. SSL Labs测试评级

二、安全响应头:CSP、HSTS、X-Frame-Options

光有HTTPS不够,浏览器还需要几个安全响应头来防止点击劫持、MIME嗅探和协议降级。在Nginx配置里加上:

add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" always;
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Content-Security-Policy "default-src 'self'; img-src 'self' https: data:; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'" always;

HSTS的max-age设了63072000秒(两年),includeSubDomains表示所有子域名也强制HTTPS。CSP里img-src允许https:和data:,因为文章里有内嵌图片。

踩坑提醒:CSP配太严会把正常的JS和CSS也拦了,建议先只报告模式(Content-Security-Policy-Report-Only)观察一周,再切到强制模式。

三、证书链补全:中间证书不能漏

客户用的是Let's Encrypt证书,Nginx配置里只指定了fullchain.crt但服务器上这个文件其实是域名证书,没有拼中间证书。浏览器在某些环境下不会自动补全中间证书链,就会报"证书不受信任"。

正确做法是把域名证书和中间证书按顺序拼在一个文件里:

# fullchain.pem 内容顺序:
# 1. 域名证书 (-----BEGIN CERTIFICATE----- ... 域名证书 ...)
# 2. 中间证书 (-----BEGIN CERTIFICATE----- ... 中间证书 ...)
# 不要加CA根证书,根证书由浏览器内置

ssl_certificate /etc/nginx/ssl/fullchain.pem;
ssl_certificate_key /etc/nginx/ssl/privkey.pem;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers off;

配置完用openssl s_client -connect 域名:443 -showcerts验证,返回的证书链应该有2个证书(域名+中间),不是只有1个。

四、实际踩过的5个坑

  1. HSTS加了max-age=300,第二天想切回HTTP测试发现浏览器强制跳HTTPS回不去,后来等了5分钟才恢复——max-age不要一开始就设太大。
  2. CSP里漏了data:,导致内嵌的base64图片全部加载失败,Console报Refused to load。
  3. X-Frame-Options设成了DENY,但页面里有个同域的iframe嵌入客服窗口,结果iframe白屏,改成SAMEORIGIN就好了。
  4. 证书文件权限设成了777,Nginx启动直接报错——privkey.pem必须是600,fullchain.pem可以是644。
  5. Mixed Content里有个统计脚本引用了http://,改成//协议相对URL还不行,必须写成https://。

这次网站安全头配置是在乔拓云的建站产品上做的,我主要在Nginx层补了证书链和安全响应头,浏览器安全评级从B升到了A。

复盘要点

  1. HTTPS不只是装证书,证书链必须包含中间证书。
  2. 安全响应头至少配HSTS、X-Frame-Options、X-Content-Type-Options三个。
  3. CSP先用Report-Only模式观察,不要一上来就强制。

以上是个人实践记录,各平台具体功能以官方实时信息为准。

留个问题:你们生产环境CSP是用Report-Only还是强制模式?HSTS的max-age一般设多少?

相关文章
|
存储 安全 网络安全
探索网络安全与信息安全:漏洞、加密技术与安全意识
在当今数字化时代,网络安全与信息安全日益受到重视。本文从网络安全漏洞的本质、加密技术的应用以及安全意识的培养三个方面展开探讨,旨在帮助读者更好地了解和应对网络安全挑战。
285 23
|
27天前
|
SQL 测试技术 数据库连接
我用ChatGPT把回归测试从3天压到3小时,提示词全公开
本文分享如何用ChatGPT优化电商后台回归测试:通过提示词引导,实现用例梳理、自动化脚本生成与日志分析三步提效,将3天人工测试压缩至3小时。强调其辅助定位而非替代人力,聚焦释放工程师精力于高价值工作。
|
1月前
|
存储 人工智能 弹性计算
最新版阿里云AI产品与云产品组合购活动:精选"云+AI"产品组合,组合购享超值优惠价
阿里云推出的云产品组合购活动包括“AI产品组合购”与“云产品组合购”双板块,活动围绕“云+AI”深度融合思路,将Token Plan、Qoder CN、轻量应用服务器、AI建站、视频点播等核心产品打包成十余类场景化套餐,低至3.9折,价格覆盖1元域名到数百元企业级方案,全面覆盖个人开发者、中小企业从入门体验到生产级应用的全场景需求。
246 21
|
2月前
|
弹性计算 Cloud Native Linux
阿里云轻量应用服务器怎么部署网站?流程复杂吗?
阿里云轻量应用服务器支持一键部署网站:选择WordPress、宝塔等应用镜像,开箱即用,无需手动配置环境,新手分钟级建站。支持ICP备案,含登录地址、账号密码等完整指引。阿里云轻量应用服务器官网:https://t.aliyun.com/U/dwftch
405 4
|
DataWorks API 数据库
DataWorks操作报错合集之在使用 OceanBase (OB) 作为数据源进行数据集成时遇到报错,该如何排查
DataWorks是阿里云提供的一站式大数据开发与治理平台,支持数据集成、数据开发、数据服务、数据质量管理、数据安全管理等全流程数据处理。在使用DataWorks过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
|
Kubernetes Cloud Native 持续交付
云原生技术在现代企业中的应用与挑战
随着数字化转型的浪潮席卷全球,云原生技术成为推动企业IT架构现代化的关键力量。本文将深入探讨云原生的核心概念、关键技术及其在现代企业中的实际应用场景。同时,我们也将分析企业在采纳云原生过程中可能遇到的挑战,并提供相应的应对策略。通过案例分析和数据支持,本文旨在为读者提供一份关于云原生技术应用的全景式指南,以促进企业更高效地利用云计算资源,加速业务创新和价值实现。
292 36
|
监控 供应链 物联网
新技术革命下的未来社会:区块链、物联网和虚拟现实的融合与创新
随着科技的不断进步,新兴技术如区块链、物联网(IoT)和虚拟现实(VR)正在逐渐融入我们的生活。本文将探讨这些技术的发展趋势和应用场景,以及它们如何相互融合,共同推动未来社会的发展。
368 35
|
安全 PHP 开发者
PHP中的面向对象编程:深入理解与应用
在PHP的世界里,面向对象编程(OOP)是一块基石,它不仅为开发者提供了一种组织代码的清晰方式,而且通过类和对象的概念,增强了代码的重用性和可维护性。本文旨在深入探讨PHP中OOP的核心概念,包括类、对象、继承、封装、多态等,并通过实例展示如何在实际开发中有效利用这些概念。我们将从基础开始,逐步过渡到高级主题,并探索PHP 7及以上版本中OOP的新特性,以及它们如何影响现代PHP开发。
199 33
|
人工智能 安全 5G
探索移动应用开发的未来趋势
随着智能手机的普及和移动技术的飞速发展,移动应用开发已经成为一个充满活力和创新的领域。从早期的简单工具和游戏,到如今的复杂社交平台、金融科技应用以及增强现实体验,移动应用已经深入人们生活的方方面面。本文将探讨移动应用开发的新趋势,包括跨平台框架的兴起、人工智能的集成、移动支付安全的新挑战,以及5G技术对移动应用性能和应用范围的影响。通过这些讨论,我们不仅能够预见未来移动应用的发展轨迹,还能洞察开发者如何适应这些变化以满足用户的需求和期望。
297 33
|
API 开发工具 Android开发
安卓与iOS开发环境的对比分析
在数字科技飞速发展的时代,移动应用的开发已成为创新技术的一个重要领域。本文将深入探讨Android和iOS两大主流操作系统的开发环境差异,通过比较它们的编程语言、开发工具、用户界面设计、系统架构及API等方面,为开发者提供一个全面的参考视角。文章旨在揭示不同平台下的开发优势与挑战,帮助开发者更好地选择适合自己项目需求的开发环境。
444 33