uniapp微信公众号使用iframe组件时报错{“result”：“csrf error”}

Joe556

于 2024-02-20 09:48:23 发布

阅读量1.7k

点赞数 6

CC 4.0 BY-SA版权

文章标签： uni-app csrf 前端

本文链接：https://blog.csdn.net/weixin_73610394/article/details/136029264

作者在开发uniapp微信公众号项目时，尝试集成WPS在线预览功能，遇到了Web-View组件的CSRF错误。文章解释了CSRF的概念，指出攻击原理并描述了解决方案——后端设置白名单以允许测试地址访问。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本人在做uniapp微信公众号项目时，需求是做wps在线预览功能，需要访问一个线上地址，我使用iframe组件，web-view组件报'result':'csrf error' 出现如下报错：{“result”：“csrf error”}

<!-- 建立pdf预览窗口 -->
<view class="content-pdf" v-if="noticeData" v-for="(item, index) in noticeData" :key="item.fileId" >
	<view v-if="item.type == 'pdf'" >
	  <web-view style="margin-top: 10rpx;width: 100%;height: 1050rpx;" 
	  :src="item.fileDownloadUrl" :fullscreen='false'></web-view>
	</view> 
    </view>

1.什么是CSRF

CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。

CSRF可以做什么：攻击者盗用了你的身份，以你的名义发送恶意请求。CSRF能够做的事情包括：以你名义发消息，转账，盗取你的账号。

2.要完成一次CSRF攻击，受害者必须依次完成两个步骤：

1.登录受信任网站A，并在本地生成Cookie。

2.在不登出A的情况下，访问危险网站B。

3.解决我遇到的问题

wps在线预览功能有安全策略限制，阻止了我的访问

所以我在本地测试时报错{“result”：“csrf error”}

解决方法为：后端给我的测试地址设置白名单，可以成功访问