没有不值得去解决的问题,也没有不值得去学习的技术!

Mixed Content 导致网站页面错乱?一次 ISC 项目的完整排查与修复

网站界面错乱,打开开发者工具 - 网络 - 全部。然后刷新网页,查看网络请求。发现样式文件的状态为:(已屏蔽:mixed-content)。

作者:

在

, , ,

1、网站界面错乱,打开开发者工具 – 网络 – 全部。然后刷新网页,查看网络请求。发现样式文件的状态为:(已屏蔽:mixed-content)。如图1

网站界面错乱,打开开发者工具 - 网络 - 全部。然后刷新网页,查看网络请求。发现样式文件的状态为:(已屏蔽:mixed-content)。

2、但是,将状态为:(已屏蔽:mixed-content) 的 css 文件的网址在新标签页中打开,状态是 200。如图2

但是,将状态为:(已屏蔽:mixed-content) 的 css 文件的网址在新标签页中打开,状态是 200

3、为什么会出现 (已屏蔽: mixed-content)

网站是:

👉 https://www.jammerfromchina.com

但页面里加载的 CSS 是:

👉 http://xxx.css(注意是 http)

浏览器安全策略是这样的:

HTTPS 页面
❌ 不允许加载 HTTP 资源(CSS / JS / 图片)

否则就会:
👉 直接拦截(blocked:mixed-content)

所以看到:

状态:(已屏蔽:mixed-content)

4、为什么“单独打开 CSS 是 200”?

这个也很好理解:

在新标签打开:
👉 http://xxx.css

这是一个独立 HTTP 请求

浏览器不会限制 → 返回 200 ✅

但:

❗ 在 HTTPS 页面里引用 HTTP 资源 → 被拦截

5、查看网页源代码,搜索:Styles/styles.css,发现引用网址为:http://www.jammerfromchina.com/templates/__master/Styles/styles.css 。

6、ISC(Interspire Shopping Cart)是一款老牌 PHP+MySQL 商业电商系统,2012 年已官方停更,核心定位是轻量、易用、快速建站,曾是 Magento、ZenCart 的有力竞品。编辑配置文件 /config/config.php,http: 替换为 https:

PHP
<?php

        $GLOBALS['ISC_CFG']["ShopPath"] = 'https://www.jammerfromchina.com';

7、刷新页面,界面已经正常。打开开发者工具 – 网络 – 全部。然后刷新网页,查看网络请求。发现样式文件的状态为:200。如图3

刷新页面,界面已经正常。打开开发者工具 - 网络 - 全部。然后刷新网页,查看网络请求。发现样式文件的状态为:200

关于作者 · 持续学习与技术实践

我是一名拥有 15 年以上开发经验的技术从业者,自 2013 年起持续运营个人技术博客,记录工作与个人项目中遇到的真实问题,以及解决问题过程中的探索、实践和思考。

除了技术写作,我也在持续开发和维护自己的独立项目,探索新技术和新工具在实际场景中的应用。我始终相信,没有不值得去解决的问题,也没有不值得去学习的技术。

如果这篇文章对你有所帮助,欢迎浏览博客中的其他文章,也欢迎交流技术经验与想法。

关于我  ·  GitHub  ·  邮件联系