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

ゞ浴缸里的玫瑰 2022-06-13 03:44 382阅读 0赞

## 原文地址：http://blog.csdn.net/qq\_16559905/article/details/54317034 ##

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

### 例如： ###

<body>
        <img src="http://upload.techweb.com.cn/2017/0106/1483690985396.jpg" />
    </body>
     
      
       1
       2
       3
      
     
      
       1
       2
       3

![这里写图片描述][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/20220613/3a3094d6ddab47e8b60452f9e4b9bc00.png
[JavaScript]: http://lib.csdn.net/base/javascript