前言

最近在Chrome中遇到了https站点加载http图片资源失败了,新页面打开图片且在火狐中打开网站也能正常显示。仔细看了下接口返回的资源协议是 http 但到了 dom 上变成了 https 了,开始怀疑人生了~

允许谷歌浏览器加载不安全内容

几经周转终发现,谷歌浏览器版本 84 之后会组织 混合内容 的加载,若要开启 混合内容 的加载可在网址左侧的 查看网址信息 - 网站设置中更改

到此即可访问 http 内容(不推荐长期使用此方法)

一段代码将站点内所有资源都转为https

如上,谷歌浏览器会将https站点内所有的资源默认使用 https,但其他浏览器仍将按资源默认协议请求,可使用 Meta 标签来处理

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

http-equiv

该属性定义了一个编译指示指令,这个属性叫做 http-equiv(alent),是因为所有允许的值都是特定 HTTP 头部名称

  • content-security-policy

    它允许页面作者定义当前的内容策略。内容策略主要允许服务器源和脚本端点,这有助于跨站点脚本攻击

upgrade-insecure-requests

该指令指示客户端将该站点的所有不安全的 URL(通过 HTTP 提供的 URL)视为已被替换为安全的 URL(通过 HTTPS 提供的URL)。该指令适用于需要重写大量不安全的旧版 URL 的网站

upgrade-insecure-requests MDN

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<body>
<img src="http://i1.wp.com/gzw.sinaimg.cn/mw690/0085UwQ9gy1h2cll25gwzj30ia0i9q4r.jpg" alt="">
</body>
<script>
  fetch('http://google.com')
</script>
</html>

开启

关闭

可以看出请求也是可以转的~