uni-app 如何实现webview的加载资源拦截

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app 如何实现webview的加载资源拦截

如何实现webview的加载资源拦截

Harmonyos Next教程
2 回复

Android上，使用5+的plus.webview的api能完成，参考https://ask.dcloud.net.cn/article/35036，然后再看plus.webview的api。 iOS上由于使用了wkwebview，Apple已经不支持拦截了。


在uni-app中实现WebView加载资源的拦截，可以通过自定义拦截逻辑来监控并处理WebView中的网络请求。以下是一个基于uni-app和小程序WebView组件的示例，展示如何实现资源加载拦截。

1. 引入WebView组件

首先，在你的页面中引入WebView组件。

<template>
  <view>
    <web-view :src="webViewSrc" @loaded="onWebViewLoaded" @error="onWebViewError"></web:- 'viewhttps>://
example  .</comview'>

    </};template
>  
},

<  script>methods
:export { default
 {    
  ondataWebView()Loaded {()
     {return {
      webViewSrc
      console.log('WebView loaded');
    },
    onWebViewError(e) {
      console.error('WebView error:', e);
    }
  }
};
</script>

2. 使用自定义拦截器（仅适用于H5平台）

由于uni-app原生WebView组件（在小程序和其他原生平台上）不支持直接拦截请求，所以这里以H5平台为例，通过iframe和拦截器的方式实现。

拦截器代码

// 拦截器逻辑
function createRequestInterceptor() {
  return new Proxy({}, {
    get: function(target, prop, receiver) {
      if (prop === 'open') {
        return function(url, ...args) {
          // 在这里处理拦截逻辑
          console.log('Intercepted request:', url);
          
          // 你可以决定是否继续加载该资源
          if (shouldAllowRequest(url)) {
            return originalOpen.apply(window.XMLHttpRequest.prototype, [url, ...args]);
          } else {
            console.warn('Blocked request:', url);
            return new window.XMLHttpRequest(); // 或者返回其他处理结果
          }
        };
      }
      return Reflect.get(target, prop, receiver);
    }
  });
}

// 原始XMLHttpRequest.open方法
const originalOpen = window.XMLHttpRequest.prototype.open;

// 覆盖XMLHttpRequest.prototype.open
window.XMLHttpRequest = function() {
  const xhr = new (window.OriginalXMLHttpRequest || window.XMLHttpRequest)();
  const xhrProto = xhr.__proto__;
  const handler = createRequestInterceptor();
  xhrProto.open = handler.get(xhrProto, 'open').bind(xhrProto);
  return xhr;
};

// 判断是否允许请求的逻辑
function shouldAllowRequest(url) {
  // 自定义逻辑，例如根据URL白名单
  return !url.includes('blocked-resource.com');
}

注意事项

  1. 平台差异：上述拦截器方法仅适用于H5平台。在App、小程序等平台，你需要依赖原生提供的API（如小程序的web-view组件的bindmessage事件）进行拦截处理。

  2. 安全性：确保拦截逻辑不会引入新的安全问题，例如XSS攻击。

  3. 兼容性：确保拦截器代码在所有目标浏览器和环境中都能正常工作。

通过上述方法，你可以在uni-app的H5平台上实现WebView资源加载的拦截。对于其他平台，可能需要利用平台提供的特定API来实现类似功能。

回到顶部