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

来源：互联网发布：淘宝钻石等级可以买吗编辑：程序博客网时间：2024/05/01 07:28

原文地址：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

这里写图片描述

解决方案

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

<meta name="referrer" content="never">1
1

即可实现！

如果想详细点，看下面介绍：____

接下来，你就应该知道 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:

当网站使用refresh字段进行跳转的时候，大多数浏览器不发送referer;

从用户从一个HTTPS的网站点击链接到另一个HTTP的网站时，不发送referer;

html5中，a标签的rel = “noreferrer”, 可以让浏览器不发送referer;

使用Data URI scheme链接的，浏览器也不发送referer;

使用Content Security Policy, 也可以让浏览器不发送referer;

在html头部中使用meta标签来控制不让浏览器发送referer;

用户手输入网址或是从收藏夹、书签中访问。

技术细节

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

never

always

origin

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：

<meta name="referrer" content="never">1
1

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

<meta name="referrer" content="origin">1
1

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

阅读全文

0 0