uni-app 通过 overrideUrlLoading 实现拦截 webview 窗口的 URL 跳转请求

举报
SHQ5785 发表于 2023/06/11 10:15:26 2023/06/11
【摘要】 一、前言项目需求:通过uni-app的webview嵌入H5页面,且webview的src为互联网页面访问地址,页面中涉及很多可点击链接,若不加限制,则可以在webview中随意跳转至其它外链地址,存在安全合规隐患。可通过overrideUrlLoading实现拦截Webview窗口的URL请求。 二、overrideUrlLoading语法如下:void wobj.overrideUrl...

一、前言

项目需求:通过uni-appwebview嵌入H5页面,且webviewsrc为互联网页面访问地址,页面中涉及很多可点击链接,若不加限制,则可以在webview中随意跳转至其它外链地址,存在安全合规隐患。

可通过overrideUrlLoading实现拦截Webview窗口的URL请求。

二、overrideUrlLoading

语法如下:

void wobj.overrideUrlLoading(options, callback);

说明:

  • 拦截URL请求后,Webview窗口将不会跳转到新的URL地址,此时将通过callback回调方法返回拦截的URL地址(可新开Webview窗口加载URL页面等)。
  • 此方法只能拦截窗口的网络超链接跳转(包括调用loadURL方法触发的跳转),不可拦截页面请求资源请求(如加载css/js/png等资源的请求)。
  • 多次调用overrideUrlLoading时仅以最后一次调用设置的参数值生效。

参数

  • options: ( WebviewOverrideUrlOptions ) 可选 拦截URL请求的参数。

  • effect:(String 类型 ) 拦截URL请求生效时机。
    可取值:

  • instant” -表示立即生效,即调用overrideUrlLoading方法后立即生效;

  • touchstart” -表示用户操作Webview窗口(触发touchstart事件)后生效,如果用户没有操作Webview窗口则不对URL请求操作进行拦截处理。

默认值为"instant"。

  • mode: (String 类型 ) 拦截模式。可取值: “allow”、"reject”,默认值为"reject”。

    • allow”表示满足match属性定义的条件时不拦截url继续加载,不满足match属性定义的条件时拦截url跳转并触发callback回调;
    • reject"表示满足match属性定义的提交时拦截url跳转并触发callback回调,不满足match属性定义的条件时不拦截url继续加载。
  • match: (String 类型 ) 区配是否需要处理的URL请求。支持正则表达式,默认值为对所有URL地址生效(相当于正则表达式“.*”)。如果mode值为"allow“则允许区配的URL请求跳转,mode值为”reject"则拦截区配的URL请求。

  • exclude: (String 类型 ) 排除拦截处理请求类型。不拦截处理指定类型的URL请求,直接使用系统默认处理逻辑。 可取值:

    • "none"表示不排除任何URL请求(即拦截处理所有URL请求);
    • redirect“表示排除拦截处理301/302跳转的请求(谨慎使用,非a标签的href触发的URL请求可能会误判断为302跳转)。 默认值为”none”。
  • callback: ( OverrideUrlLoadingCallback ) 可选 拦截URL请求的回调函数。

参数:
event: ( Event ) 必选 Webview窗口拦截URL跳转事件数据;
可通过eventurl属性获取拦截的URL地址。

返回值
void : 无

平台支持

  • Android - ALL (支持) :
  • 5+APP需要选择“解压资源后运行”模式后才能截获应用资源的URL请求。
  • iOS - ALL (支持)

二、码上解决

onReady() {
	var that = this;
	// #ifdef APP-PLUS
	var pages = getCurrentPages();
	var page = pages[pages.length - 1];
	var currentWebview = page.$getAppWebview();
	// 或者通过以下方式获得:const currentWebview = this.$mp.page.$getAppWebview(); 
	var url = currentWebview.children()[0].getURL();
	// 延时是为了正确获取到 child 也就是打开外链地址的web-view对象,overrideUrlLoading阻止外层对象没有用
	setTimeout(()=>{
		var wv = currentWebview.children()[0];
		// 拦截所有页面的跳转,可使用参数拦截  .jd.com
		wv.overrideUrlLoading({
        // “reject"  表示满足match属性定义的提交时拦截url跳转并触发callback回调,不满足match属性定义的条件时不拦截url继续加载。
        // “allow”  表示满足match属性定义的条件时不拦截url继续加载,不满足match属性定义的条件时拦截url跳转并触发callback回调;
			mode: 'allow',
			match: '.*jd\.com/.*'
		}, function(e) {
			try {
				// 根据自己的业务需求,处理链接上的参数,进行跳转
				var navURL =`/pages/index/order/order?id=${xxx}`;
				uni.navigateTo({
					url: navURL,
					animationType: 'pop-in'
				})
			} catch (e) {
				console.log(e)
				//TODO handle the exception
			}
			console.log('reject Url', url);
		})
	}, 500);
	// #endif
},

以上根据自身业务需求进行,可以完成H5页内webview请求拦截。

三、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。