H5 img标签图片无法显示 -- 解决方案

深碍√TFBOYSˉ_ 2022-07-13 13:14 524阅读 0赞

## 如果你也曾复制过一些类似腾讯、百度等各大网站的文章，你会发现黏贴下来发表之后经常出现图片无法显示，这是怎么出现的呢？ ##

### **例如：** ###

![这里写图片描述][SouthEast]

## 解决方案 ##

**使用Referer Meta标签控制referer，在H5 的 header加入meta**

**即可实现！**

## ***\_\_\_\_\_\_\_\_\_\_\_\_**如果想详细点，看下面介绍：**\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_*** ##

## 接下来，你就应该知道 **HTTP\_REFERER** ##

## **HTTP\_REFERER介绍** ##

> HTTP Referer是header的一部分，当浏览器向web服务器发送请求的时候，一般会带上Referer，告诉服务器我是从哪个页面链接过来的，服务器基此可以获得一些信息用于处理。  
>   
>

**简介**

>       简而言之，HTTP Referer是header的一部分，当浏览器向web服务器发送请求的时候，一般会带上Referer，告诉服务器我是从哪个页面链接过来的，通常被网站用来统计用户来源，是从搜索页面来的,还是从其他网站链接过来，或是从书签等访问，以便网站合理定位，服务器藉此可以获得一些信息用于处理。比如从我主页上链接到一个朋友那里，他的服务器就能够从HTTP Referer中统计出每天有多少用户点击我主页上的链接访问他的网站。  
>   
>   
>       **Referer**有时也被用作防盗链， 即下载时判断来源地址是不是在网站域名之内， 否则就不能下载或显示，很多网站，如天涯就是通过Referer页面来判断用户是否能够下载图片。  
>   
>   
>       **当然**，对于某些恶意用户，也可能伪造Referer来获得某些权限，在设计网站时要考虑到这个问题。  
>   
>   
>       **Referer** 还可用做电子商务网站的安全，在提交信用卡等重要信息的页面用referer来判断上一页是不是自己的网站，如果不是，可能是黑客用自己写的一个表单，来提交，为了能跳过你上一页里的javascript的验证等目的。  
>   
>   
>       **但是，**注意不要把Rerferer用在身份验证或者其他非常重要的检查上，因为Rerferer非常容易在客户端被改变。  
>   
>

**一、去除http头部的Referer信息，防止重要网址被浏览器“偷偷的泄漏”**

>       有时候我们需要在点击链接时候去除http头部的referer属性，比如在网站后台有链接到外部网站的地方，若不去除的话很容易暴漏我们的后台地址！
> 
> referer是由客户端的浏览器发送到服务器上的，且在客户端可以通过document.refererrer 来获取，也就是说referer的发送实际上是一个浏览器行为，发送与否的决定权实在浏览器手里。  
>   
>

**下面几种情况下，可以控制浏览器是否发送referer:**

> 1.  当网站使用refresh字段进行跳转的时候，大多数浏览器不发送referer;  
>       
>     
> 2.  从用户从一个HTTPS的网站点击链接到另一个HTTP的网站时，不发送referer;  
>       
>     
> 3.  html5中，a标签的rel = “noreferrer”, 可以让浏览器不发送referer;  
>       
>     
> 4.  使用Data URI scheme链接的，浏览器也不发送referer;  
>       
>     
> 5.  使用Content Security Policy, 也可以让浏览器不发送referer;  
>       
>     
> 6.  在html头部中使用meta标签来控制不让浏览器发送referer;  
>       
>     
> 7.  用户手输入网址或是从收藏夹、书签中访问。  
>       
>

## 技术细节 ##

**referer 的 metedata 参数可以设置为以下几种类型的值：**

> 1.  never  
>       
>     
> 2.  always  
>       
>     
> 3.  origin  
>       
>     
> 4.  default

**浏览器后续发起 http 请求的时候，会按照 content 的值，做出如下反应(下面 referer-policy 的值即 meta 标签中 content 的值)：**

> 1.如果 referer-policy 的值为never：删除 http head 中的 referer；
> 
> 2.如果 referer-policy 的值为default：如果当前页面使用的是 https 协议，而正要加载的资源使用的是普通的 http 协议，则将 http header 中的 referer 置为空；
> 
> 3.如果 referer-policy 的值为 origin：只发送 origin 部分；
> 
> 4.如果 referer-policy 的值为 always：不改变http header 中的 referer 的值，注意：这种情况下，如果当前页面使用了 https 协议，而要加载的资源使用的是 http 协议，加载资源的请求头中也会携带 referer。

**例子**

1、如果页面中包含了如下 meta 标签，所有从当前页面中发起的请求将不会携带 referer：

2、如果页面中包含了如下 meta 标签，则从当前页面中发起的 http请求将只携带 origin 部分（注：根据原文中的语境，我理解这里的 origin 是包含了 schema 和 hostname 的部分 url，不包含 path 等后面的其他 url 部分），而不是完整的 URL ：

**注意**：在使用本文中所述的 meta 标签的时候，浏览器原有的 referer 策略将被打破，比如从 http 协议的页面跳转到 https 的页面的时候，如果设置了适当的值，也会携带 referer。

--------------------

[SouthEast]: /images/20220713/b1b15b447a364a0493e6234a63a7f7d1.png