Mixed Content: 资源加载失败

桃扇骨 2022-11-19 14:59 235阅读 0赞

### 文章目录 ###

*   *   *  原因
         *  特点
         *   *  Passsive mixed content
             *  Active mixed content
         *  解决

### 原因 ###

当一个https的网站，发出了http的请求，就会出现以下的情况。

谷歌浏览器中

The page at 'https://active-mixed-content.glitch.me/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://active-mixed-content.glitch.me/xmlhttprequest-data.js'. This request has been blocked; the content must be served over HTTPS

火狐中

已阻止载入混合活动内容“http://active-mixed-content.glitch.me/insecure-styles.css”

### 特点 ###

#### Passsive mixed content ####

值得注意的是，未必所有的mixed content都会加载失败，对于以下的资源，仍旧是可以成功加载的。

这些资源包括：

*  图片
 *  视频
 *  音频

如下图：这些资源虽然是mixed content，但仍旧可以成功加载，只不过抛出了警告。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]  
以上的资源称为**passive mixed content**，可以简单的理解为仅仅用于展示的资源，这些资源出现安全问题的风险比较低。所以浏览器允许这些资源显示。但值得注意的是，虽然资源被加载了，但浏览器将不再展示https锁的标识。

#### Active mixed content ####

相比而言，**active mixed content**，则是很危险的mixed content，比如一个脚本文件被中间人劫持，可能导致用户提交表单数据中的关键信息的泄露。所以这些资源是不被允许加载的。

这种类型的资源包含：

*  <script>
 *  <link>
 *  <iframe>
 *  XMLHttpRequest
 *  fetch 请求
 *  <object>  
    ![在这里插入图片描述][20210108131322766.png]

### 解决 ###

遇到这个问题，我们需要通过升级http的请求到https，保证资源可以被加载。

在引用外部资源文件的时候，可以通过`//`来代替`https://`或者`http://`：

<script src="//cdn.domain.com/your-file.js"></script>
    
    <script src="http://cdn.domain.com/your-file.js"></script>
    
    <script src="https://cdn.domain.com/your-file.js"></script>

`//`会自动根据当前页面协议来决定自身加载所使用的协议。进而保证当前加载的资源文件不出现mixed content。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]: /images/20221119/4e5897710b454e27b1de1b8324f356d7.png
[20210108131322766.png]: /images/20221119/d5c4e5609d1343df9df9a7b3ad0afa98.png