文章目录
问题现象
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 域名
包含 <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);
});