请求HTTP链接的图片等资源被自动变成HTTPS请求的问题解决（顺便可以解决图片防盗链）

文章目录

• • • 问题现象
    • 问题根本原因
    • 常规问题解决办法
    • • 非Chrome浏览器：控制CSP协议
      • • 对HTML页面处理
        • nginx配置中处理
      • Chrome浏览器本地处理方式
    • Chrome浏览器通用解决办法（服务器端无法控制新版Chrome这种行为，只能曲线救国--顺便可以解决图片防盗链）
    • • [网页的网站使用 http 域名](#网页的网站使用 http 域名)
      • 代理服务器
      • [使用CORS：fetch API请求图片](#使用CORS：fetch API请求图片)

问题现象

Chrome浏览器中，在采用 https 协议的页面当中，当以<img src="http://xxx">这样的方式去请求 http 资源的时候，原本属于 http 协议的资源地址将会被转换成为 https。

举例：

假设你有一个网页，页面地址是https://www.example.com。（注意：网页是一个 https 开头的网址）

页面中有如下的图片引用代码：（注意：src是一个 http 开头的网址）

<img src="http://img.another-example.com/image.jpg">

在最新版本的Chrome浏览器中，当加载这个采用 HTTPS 协议的网页时，浏览器会将图片的请求地址http://img.another-example.com/image.jpg自动转换为https://img.another-example.com/image.jpg进行请求。

如果img.another-example.com这个服务器没有配置好 HTTPS 服务设置不支持 HTTPS，那么这个图片会因为无法通过安全验证而无法正常加载，浏览器会不能显示该图片，并在控制台中输出相关的安全错误信息。

问题根本原因

Chrome浏览器最新版本 （从某个版本以后的所有新版本）在请求图片等资源时都会自动将HTTP请求升级为HTTPS请求，以提高安全性。且无法通过服务器端（例如HTTP Header等手段）控制这种行为。

常规问题解决办法

非Chrome浏览器：控制CSP协议

对于非Chrome浏览器，可以通过控制CSP协议的方式来改变在请求图片等资源时自动将HTTP请求升级为HTTPS请求的行为。

具体来讲，有2种方式：

对HTML页面处理

可以在HTML页面的<header>标签中添加如下代码：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

nginx配置中处理

在 nginx.conf 中的server块下添加如下配置：

        # 对xxx路径的页面，允许不安全的请求（即允许HTTP资源加载）
        location /xxx/ {
            add_header Content-Security-Policy "default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * http://pal3.roogames.com/  data: 'unsafe-inline' 'unsafe-eval'; connect-src *; frame-src *; font-src * data:; style-src * 'unsafe-inline'";
            add_header Upgrade-Insecure-Requests off;
        }

Chrome浏览器本地处理方式

为了清除Chrome浏览器中特定域名的HSTS（HTTP Strict Transport Security）策略，可以按照以下步骤操作：

1. 在Chrome浏览器的地址栏中输入 chrome://net-internals/#hsts，然后按Enter键进入Chrome的网络内部设置页面。

2. 在页面的"Delete domain security policies"部分，输入你要删除HSTS策略的域名（只需输入"http://"后面的域名部分，例如 example.com），然后点击"Delete"按钮以删除该域名的HSTS策略。

3. 接下来，你可以在"Query domain"部分输入相同的域名，以测试HSTS策略是否已被成功删除。如果删除成功，你应该不会看到有关该域名的HSTS记录。

4. 如果上述步骤未能解决问题，尝试清除浏览器缓存。打开Chrome浏览器的清除浏览数据功能（通常可通过按Ctrl + Shift + Delete组合键快速访问），选择清除缓存和Cookies，然后点击"清除数据"。完成清理后，重启浏览器再次尝试访问该网站。

Chrome浏览器通用解决办法（服务器端无法控制新版Chrome这种行为，只能曲线救国--顺便可以解决图片防盗链）

网页的网站使用 http 域名

包含 <img src="http://xxx"> 的网页如果是 http 协议，那么就可以避免该问题。尤其是使用不带协议头的地址来请求资源时，会默认添加当前网页的协议，例如：<img src="//img.another-example.com/image.jpg">

代理服务器

例如如下的nginx配置：

http {
    upstream another_example_com {
        server img.another-example.com:80;
    }

    # 主要的Nginx服务器配置
    server {
        listen 443 ssl;  # 监听443端口并启用SSL
        server_name proxy2img.example.com;  # 你的主域名

        # SSL证书配置
        ssl_certificate /etc/nginx/ssl/example.com.crt;
        ssl_certificate_key /etc/nginx/ssl/example.com.key;

        # 代理服务器配置
        location / {
            # 主要的代理配置
            proxy_pass http://another_example_com;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;

            # 重定向所有HTTP请求到HTTPS
            if ($scheme != "https") {
                return 301 https://$host$request_uri;
            }
        }

        # 特殊的代理配置用于处理图片
        location ~* ^.+\.(jpg|jpeg|gif|png)$ {
            proxy_pass http://another_example_com;
            proxy_set_header Host img.another-example.com;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header Accept-Encoding "";
            proxy_cache_bypass $http_pragma;
        }
    }
}

在网页中可以将http的资源目标地址替换为本代理网站，或者使用以下js脚本来实现自动转发：

self.addEventListener('fetch', event => {
  if (event.request.url.includes('example.com/images/')) {
    event.respondWith(
      fetch(event.request.url.replace('example.com', 'your-proxy-server.com'))
    );
  } else {
    event.respondWith(fetch(event.request));
  }
});

通过该方式还有一个优点时：一般不会受到目标图片网站的防盗链等机制的干扰。

使用CORS：fetch API请求图片

CORS是一种安全机制，用于控制一个域下的Web页面能否访问另一个域下的资源。根据同源策略（Same-Origin Policy），Web浏览器默认不允许从一个域加载另一个域的数据，除非后端服务器明确允许这种跨域请求。

CORS通过在HTTP响应头中设置特定的字段来指示浏览器是否允许跨域请求。这些字段包括但不限于：

• Access-Control-Allow-Origin: 用于告诉浏览器允许哪些源（即域名）进行跨域请求。
• Access-Control-Allow-Methods: 指定允许的HTTP方法（如GET、POST等）。
• Access-Control-Allow-Headers: 指定允许的请求头字段。
• Access-Control-Allow-Credentials: 是否允许携带认证信息（如Cookie或HTTP认证信息）。

开启CORS支持后，通过fetch API请求图片资源，然后将获取到的图片数据转换为Blob对象，并创建一个URL来引用这个Blob对象，最后将这个URL设置为HTML <img> 元素的 src 属性，从而在页面上显示图片。

示例代码如下：

fetch('https://example.com/images/my-image.jpg')
  .then(response => response.blob())
  .then(blob => {
    const imageUrl = URL.createObjectURL(blob);
    document.getElementById('image').src = imageUrl;
  });

Fetch API允许你在请求中自定义HTTP头，包括Referer头，这可以帮助绕过图片防盗链机制。

// 设置请求头
const headers = new Headers({
  'Referer': 'https://your-allowed-domain.com',
  'User-Agent': 'Mozilla/5.0 (Your-Browser-Info)'
});

// 创建请求选项
const options = {
  method: 'GET',
  headers: headers
};

// 发起请求
fetch('https://example.com/images/my-image.jpg', options)
  .then(response => {
    // 检查响应状态
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.blob();
  })
  .then(blob => {
    const imageUrl = URL.createObjectURL(blob);
    document.getElementById('image').src = imageUrl;
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });