(封面图片来自自己拍摄)


将微信公众号文章保存到自己的笔记软件或阅读器后,往往容易出现这样的情况:本来好好的图片,全部变成了“此图片来自微信公众平台,未经允许不可引用”。

这种问题,通常出现在笔记软件或阅读器的网页版中(而非客户端),给我们的使用带来了诸多不便。今天提供一个小技巧,教大家解决这类问题。

为什么会出现这个问题?

知其然还要知其所以然。为了避免直接给出解决方案而让不太了解技术的同学们产生困惑,我先简要地讲讲为什么会出现这个问题。

在我们浏览网页时,服务器会以 HTML 文本的形式向我们返回网页的文本内容。而对于网页中的图片,则需要浏览器拿到 HTML 后,根据其中的图片链接去请求图片所在的服务器,以获得图片的内容。

现实生活中,购买服务或加入会员的时候,往往会被要求提供信息:“你从哪里知道了我们?”。这叫做引荐人(referrer),谁引荐了你?对于公司来说,这是很有用的信息。互联网也是一样,你不会无缘无故访问一个网址,总是有人告诉你,可以去那里看看。服务器也想知道,你的”引荐人”是谁?

HTTP 协议在请求头中,设计了一个 Referer 字段,给出“引荐网页”的 URL。这个字段是可选的。客户端发送请求的时候,可以自主决定是否加上该字段。而对于浏览器来说,一般都会加上这个字段。对于上面访问网页中包含的图片的场景来说,浏览器会自动在请求头中带上包含这个图片 URL 的网页地址。

有意思的一点是,这个字段名称的拼写是错的。Referer 的正确拼写是 Referrer,但是写入标准的时候,不知为何没人发现少了一个字母 r。标准定案以后,只能将错就错,将该字段都一律错误拼写成 Referer

对于来自微信公众号的图片,其网址通常以 https://mmbiz.qpic.cn 开头。当我们在网页版的笔记软件或阅读器中直接加入了来自微信公众号的图片时,浏览器在向 https://mmbiz.qpic.cn 请求图片内容时,会自动在请求头 Referer 字段中带上使用了这张图片的网页地址,即你的笔记软件或阅读器的网站地址。举例来说,当我在使用 Readwise Reader 阅读包含微信公众号的图片的文章时,我们可以在浏览器控制台看到这样的请求:

对于微信图片服务器来说,当他发现请求中携带的 Referer 不是来自微信的域名时,就会直接返回一张“此图片来自微信公众平台,未经允许不可引用”的图片。这样做可以防止其他网站使用自家的图片从而浪费自家的带宽,从而降低自身资源的消耗。在 Web 开发领域,这被称为“防盗链”。

如何解决?

在明白了上述原理之后,如何解决就显而易见了。既然 Referer 字段是可选的,那么我们让浏览器不要传这个字段给微信图片服务器,是不是就行了?

是的。在这里,我们使用到的插件是 Referer Control,你可以在 Google Chrome 官方商店下载到这一插件。通过这一插件,你可以在每个域名的维度,控制浏览器是否传 Referer 的行为。

下载完成后,我们点击它的图标,进入配置页面。

Referer Control 插件的配置页面

在这里新增一条配置。在第一个输入框中输入下述代码:

https:\/\/mmbiz.qpic.cn\/.*

它是一个正则表达式,表示匹配所有 https://mmbiz.qpic.cn 下的 URL。记得将这一行的 RegEx 点为蓝色,表示启用正则表达式。然后点击最后的 Block ,即为不向其发送 Referer 信息。

现在我们刷新网页,可以看到,图片终于加载出来啦!

通过上述方式,我们将所有来自微信公众号的图片都“解封”了。下次遇到类似的“防盗链”引起的问题,就知道怎么解决了吧!

另外提一句,如果你希望学习正则表达式,或希望调试正则表达式,推荐一个非常好的网站:regex101。它会以文字的形式清晰地描述你的正则表达式所产生的效果,并且可以判断一串文本是否能与你的正则表达式匹配上。



玩物生智”是本博客的一个频道。我会在此分享一系列普通人在使用计算机等电子产品时会遇到的问题,以及对应的清晰易懂的解决方案。力求让技术为我们服务,提升个人使用电子产品的使用体验。如果你对此感兴趣,不妨在下方订阅本站的邮件简报,或在 RSS 阅读器中添加本站点以获得及时更新。

5 4 投票数
喜欢这篇文章吗?
订阅评论
提醒
guest
3 评论
内联反馈
查看所有评论
EREK

谢谢, 解决了不显示封面的情况。
还有一个问题也咨询一下,readwise保存微信公众号文章,不显示内部图片有没有比较好的解决方式呢?

read

似乎这个是readwise reader的问题,同样的微信公众号,我用inoreader就能显示全文(包括图片),但是readwise只有文字,不能显示文中图片

你也许会喜欢