html加载富文本_vue使用富文本粘贴图片和html访问图片资源的403问题(http referrer) - 暗恋桃埖源

2024-05-10 11:20:20

1、问题描述

在项目中使用富文本编辑器时，粘贴图片之后出现了一个问题，就是该图片通过地址可以打开，但是在富文本编辑器中却无法显示，报错GET https:///pic/d058ccbf6c81800a0ff13a1ebe3533fa828b478d?x-bce-process=image/watermark,g_7,image_d2F0ZXIvYmFpa2U4MA==,xp_5,yp_5 403

在富文本编辑框中不显示图片，地址直接查看，可以查看图片：

2、报错原因

2.1 403

出现403是因为服务器拒绝了你的地址请求，很有可能是你根本就没权限访问网站，就算你提供了身份验证也没用。讲真，很有可能是你被禁止访问了。
除非你与Web服务器管理员联系，否则一旦遇到403状态码都无法自行解决。

注意看图片地址

上面图片的地址分别来自和这两个网站，而我对于这两个网站的资源是没有访问权限的

3、解决方法

在HTML代码的head中添加一句 <meta name="referrer" content="no-referrer"/> 即可(去掉referrer字段)

原理

服务器针对http协议请求的拦截

http请求中的referrer

http请求体的header中有一个referrer字段，用来表示发起http请求的源地址信息，这个referrer信息是可以省略但是不可修改的，就是说你只能设置是否带上这个referrer信息，不能定制referrer里面的值。

服务器端在拿到这个referrer值后就可以进行相关的处理，比如图片资源，可以通过referrer值判断请求是否来自本站，若不是则返回403或者重定向返回其他信息，从而实现图片的防盗链。上面出现403就是因为，请求的是别人服务器上的资源，但把自己的referrer信息带过去了，被对方服务器拦截返回了403。

在前端可以通过meta来设置referrer policy(来源策略)，具体可以设置哪些值以及对应的结果参考这里。所以针对上面的403情况的解决方法，就是把referrer设置成no-referrer，这样发送请求不会带上referrer信息，对方服务器也就无法拦截了。

html加载富文本_vue使用富文本粘贴图片和html访问图片资源的403问题(http referrer) - 暗恋桃埖源相关推荐

Android WebView 加载富文本内容
WebView加载数据的方式有两种: 1. webView.loadUrl(data);//加载url 2. webView.loadDataWithBaseURL(null,data, " ...
富文本生成静态html,如何更加安全快速的使用富文本编辑器
众所周知,富文本编辑器是目前用途广泛的前端插件,它可以直接编辑并保存多样化的文本格式.适用于论坛留言,简单文章发布,自定义静态页面等.本文简单对一种安全使用富文本编辑器的方法进行介绍.文章实例文章使 ...
vue获取编辑器纯文字_vue中使用富文本编辑器
前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器 wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的 ...
UITextView 加载富文本（带图文）
1.前言 iOS 10.0 Xcode 13.3.1 SwiftRichString 4.0.0 本来我们UI制定的图上面只是文字,但是由于后台输入框能添加图片,我们原定只加载文本,变成了富文本,样式 ...
微信小程序-后台使用富文本编辑器返回数据，小程序编译富文本编辑器返回的数据
最近遇到一个功能,后台管理系统添加商品的时候,商品详情是使用富文本编辑器添加的.小程序获取的商品详情数据是含有<p>标签的. 后台管理系统百度了多种方法,也试用了很多方法,最终觉得wxP ...
VUE-element UI使用富文本
富文本使用的是vue-quill-editor 需求: 使用富文本编辑器,上传图文信息.因为vue-quill-editor是将图片转为base64编码,所以当图片比较大(图片数量较多),提交后台时参 ...
Django 3.2.5博客开发教程:使用富文本编辑器添加数据
在Django admin后台添加数据的时候,文章内容文本框想发布一篇图文并茂的文章需就得手写Html代码,这十分吃力,也没法上传图片和文件.这显然不是我等高大上程序猿想要的. 为提升效率,我们可以使 ...
Android使用富文本实现点赞效果(包含点赞人员的头像)
这篇文章介绍一下使用富文本实现点赞展示效果(包含点赞人员的头像),之前使用的是SpannableString写的,但是只是实现了显示默认的小心心和后边的昵称,头像没有展示展示出来.后来将Spannab ...
Django实现的博客系统中使用富文本编辑器ckeditor
操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...

最新文章

热门文章