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

文章目录

- - 问题现象
  - 问题根本原因
  - 常规问题解决办法
  - - 非Chrome浏览器：控制CSP协议
    - - 对HTML页面处理
      - nginx配置中处理
    - Chrome浏览器本地处理方式
  - Chrome浏览器通用解决办法（服务器端无法控制新版Chrome这种行为，只能曲线救国--顺便可以解决图片防盗链）
  - - 网页的网站使用 http 域名
    - 代理服务器
    - 使用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）策略，可以按照以下步骤操作：

在Chrome浏览器的地址栏中输入 chrome://net-internals/#hsts，然后按Enter键进入Chrome的网络内部设置页面。
在页面的“Delete domain security policies”部分，输入你要删除HSTS策略的域名（只需输入“http://”后面的域名部分，例如 example.com），然后点击“Delete”按钮以删除该域名的HSTS策略。
接下来，你可以在“Query domain”部分输入相同的域名，以测试HSTS策略是否已被成功删除。如果删除成功，你应该不会看到有关该域名的HSTS记录。
如果上述步骤未能解决问题，尝试清除浏览器缓存。打开Chrome浏览器的清除浏览数据功能（通常可通过按Ctrl + Shift + Delete组合键快速访问），选择清除缓存和Cookies，然后点击“清除数据”。完成清理后，重启浏览器再次尝试访问该网站。

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

http__60">网页的网站使用 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端口并启用SSLserver_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请求到HTTPSif ($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);});