阅读577 返回首页    go 阿里云 go 技术社区[云栖]

Webview/H5场景下如何使用HTTPDNS进行域名解析__最佳实践_HTTPDNS-阿里云

1. 背景说明

阿里云移动服务团队提供的HTTPDNS服务解决了传统的域名劫持、节点调度精确性以及DNS解析开销巨大等问题，为良好的移动端用户体验提供了非常精简的网络优化方案。

移动场景下基于HTML的网页呈现模型是移动应用中非常重要的技术手段，越来越多的Hybrid APP地涌现对终端的用户体验也提出了新的挑战。本文将介绍针对Webview/H5业务场景下的HTTPDNS最佳实践。

2. 实践方案

在Android以及iOS平台下，原生系统均提供了系统API以实现Webview中的网络请求拦截与自定义逻辑注入，因此我们可以通过上述拦截API拦截H5场景下的各类网络请求，在拦截函数中进行HTTPDNS解析、Header头注入以及Native网络库的调用。

2.1 Android示例

我们在HTTPDNS Android Demo github中提供了Android SDK以及HTTPDNS API接口的使用例程，这里我们通过展示Android SDK的例程演示如何在Webview/H5业务场景下使用HTTPDNS服务。注：API < 21时只能拦截到请求的url参数，其他应用层定制的参数都没法正常获取（包括method、header、body等），所以只能拦截GET请求。

  1. // 初始化httpdns
  2. httpdns = HttpDns.getService(getApplicationContext(), MainActivity.accountID);
  3. // 预解析热点域名
  4. httpdns.setPreResolveHosts(new ArrayList<>(Arrays.asList("www.apple.com")));
  6. webView = (WebView) this.findViewById(R.id.wv_container);
  7. webView.setWebViewClient(new WebViewClient() {
  8.     @SuppressLint("NewApi")
  9.     @Override
  10.     public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
  11.         // 新的API可以拦截POST请求
  12.         if (request != null && request.getUrl() != null && request.getMethod().equalsIgnoreCase("get")) {
  13.             String scheme = request.getUrl().getScheme().trim();
  14.             Map<String, String> headerFields = request.getRequestHeaders();
  15.             String url = request.getUrl().toString();
  16.             Log.d(TAG, "request.getUrl().toString(): " + url);
  17.             // 假设我们对所有css文件的网络请求进行httpdns解析
  18.             if ((scheme.equalsIgnoreCase("http") || scheme.equalsIgnoreCase("https")) && request.getUrl().toString().contains(".css")) {
  19.                 try {
  20.                     URL oldUrl = new URL(url);
  21.                     URLConnection connection = oldUrl.openConnection();
  22.                     // 异步获取域名解析结果
  23.                     String ip = httpdns.getIpByHostAsync(oldUrl.getHost());
  24.                     if (ip != null) {
  25.                         // 通过HTTPDNS获取IP成功，进行URL替换和HOST头设置
  26.                         Log.d(TAG, "Get IP: " + ip + " for host: " + oldUrl.getHost() + " from HTTPDNS successfully!");
  27.                         String newUrl = url.replaceFirst(oldUrl.getHost(), ip);
  28.                         connection = (HttpURLConnection) new URL(newUrl).openConnection();
  30.                         // 设置HTTP请求头Host域
  31.                         connection.setRequestProperty("Host", oldUrl.getHost());
  32.                     }
  33.                     // copy请求header参数
  34.                     for (String header : headerFields.keySet()) {
  35.                         connection.setRequestProperty(header, headerFields.get(header));
  36.                     }
  37.                     // 注*：对于POST请求的Body数据，WebResourceRequest接口中并没有提供，这里无法处理
  38.                     Log.d(TAG, "ContentType: " + connection.getContentType());
  39.                     return new WebResourceResponse(connection.getContentType(), "UTF-8", connection.getInputStream());
  40.                 } catch (MalformedURLException e) {
  41.                     e.printStackTrace();
  42.                 } catch (IOException e) {
  43.                     e.printStackTrace();
  44.                 }
  45.             }
  46.         }
  47.         return null;
  48.     }
  50.     @Override
  51.     public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
  52.         // API < 21 只能拦截URL参数
  53.         if (!TextUtils.isEmpty(url) && Uri.parse(url).getScheme() != null) {
  54.             String scheme = Uri.parse(url).getScheme().trim();
  55.             Log.d(TAG, "url: " + url);
  56.             // 假设我们对所有css文件的网络请求进行httpdns解析
  57.             if ((scheme.equalsIgnoreCase("http") || scheme.equalsIgnoreCase("https")) && url.contains(".css")) {
  58.                 try {
  59.                     URL oldUrl = new URL(url);
  60.                     URLConnection connection = oldUrl.openConnection();
  61.                     // 异步获取域名解析结果
  62.                     String ip = httpdns.getIpByHostAsync(oldUrl.getHost());
  63.                     if (ip != null) {
  64.                         // 通过HTTPDNS获取IP成功，进行URL替换和HOST头设置
  65.                         Log.d(TAG, "Get IP: " + ip + " for host: " + oldUrl.getHost() + " from HTTPDNS successfully!");
  66.                         String newUrl = url.replaceFirst(oldUrl.getHost(), ip);
  67.                         connection = (HttpURLConnection) new URL(newUrl).openConnection();
  68.                         // 设置HTTP请求头Host域
  69.                         connection.setRequestProperty("Host", oldUrl.getHost());
  70.                     }
  71.                     Log.d(TAG, "ContentType: " + connection.getContentType());
  72.                     return new WebResourceResponse(connection.getContentType(), "UTF-8", connection.getInputStream());
  73.                 } catch (MalformedURLException e) {
  74.                     e.printStackTrace();
  75.                 } catch (IOException e) {
  76.                     e.printStackTrace();
  77.                 }
  78.             }
  79.         }
  80.         return null;
  81.     }
  82. });
  83. webView.loadUrl(targetUrl);

2.2 iOS示例

HTTPDNS iOS Demo github中提供了iOS SDK以及HTTPDNS API接口的使用例程，下面是在Webview/H5业务场景下使用HTTPDNS服务的示例。

解决方案针对UIWebView，其步骤为：注册NSURLProtocol子类 -> 使用NSURLProtocol子类拦截Webview请求 -> 使用NSURLSession重新发起请求 -> 将NSURLSession请求的响应内容返回给Webview。

在Webview发起请求前注册NSURLProtocol子类，在示例的WebViewController.m中。

  1. // 注册拦截请求的NSURLProtocol
  2. [NSURLProtocol registerClass:[WebViewURLProtocol class]];
  4. self.webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
  5. [self.view addSubview:self.webView];
  6. NSMutableURLRequest *req = [[NSMutableURLRequest alloc] initWithURL:[NSURL URLWithString:@"https://www.apple.com"]];
  7. [self.webView loadRequest:req];

在WebViewURLProtocol中拦截Webview请求，示例中假设只拦截css请求。

  1. + (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request {
  2.     NSMutableURLRequest *mutableReq = [request mutableCopy];
  3.     NSString *originalUrl = mutableReq.URL.absoluteString;
  4.     NSURL *url = [NSURL URLWithString:originalUrl];
  5.     // 异步接口获取IP地址
  6.     NSString *ip = [[HttpDnsService sharedInstance] getIpByHostAsync:url.host];
  7.     if (ip) {
  8.         // 通过HTTPDNS获取IP成功，进行URL替换和HOST头设置
  9.         NSLog(@"Get IP(%@) for host(%@) from HTTPDNS Successfully!", ip, url.host);
  10.         NSRange hostFirstRange = [originalUrl rangeOfString:url.host];
  11.         if (NSNotFound != hostFirstRange.location) {
  12.             NSString *newUrl = [originalUrl stringByReplacingCharactersInRange:hostFirstRange withString:ip];
  13.             NSLog(@"New URL: %@", newUrl);
  14.             mutableReq.URL = [NSURL URLWithString:newUrl];
  15.             [mutableReq setValue:url.host forHTTPHeaderField:@"host"];
  16.             // 添加originalUrl保存原始URL
  17.             [mutableReq addValue:originalUrl forHTTPHeaderField:@"originalUrl"];
  18.         }
  19.     }
  20.     return [mutableReq copy];
  21. }

使用HTTPDNS SDK替换原请求中的HOST。

  1. + (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request {
  2.     NSMutableURLRequest *mutableReq = [request mutableCopy];
  3.     NSString *originalUrl = mutableReq.URL.absoluteString;
  4.     NSURL *url = [NSURL URLWithString:originalUrl];
  5.     // 异步接口获取IP地址
  6.     NSString *ip = [[HttpDnsService sharedInstance] getIpByHostAsync:url.host];
  7.     if (ip) {
  8.         // 通过HTTPDNS获取IP成功，进行URL替换和HOST头设置
  9.         NSLog(@"Get IP(%@) for host(%@) from HTTPDNS Successfully!", ip, url.host);
  10.         NSRange hostFirstRange = [originalUrl rangeOfString:url.host];
  11.         if (NSNotFound != hostFirstRange.location) {
  12.             NSString *newUrl = [originalUrl stringByReplacingCharactersInRange:hostFirstRange withString:ip];
  13.             NSLog(@"New URL: %@", newUrl);
  14.             mutableReq = [[NSMutableURLRequest alloc] initWithURL:[NSURL URLWithString:newUrl]];
  15.             [mutableReq setValue:url.host forHTTPHeaderField:@"host"];
  16.             // 添加originalUrl保存原始URL
  17.             [mutableReq addValue:originalUrl forHTTPHeaderField:@"originalUrl"];
  18.         }
  19.     }
  20.     return [mutableReq copy];
  21. }

使用NSURLSession重新发起请求。

  1. - (void)startLoading {
  2.     NSMutableURLRequest *request = [self.request mutableCopy];
  3.     // 表示该请求已经被处理，防止无限循环
  4.     [NSURLProtocol setProperty:@(YES) forKey:protocolKey inRequest:request];
  5.     [self startRequest];
  6. }

将NSURLSession请求返回的响应信息传递给Webview。

  1. - (void)URLSession:(NSURLSession *)session dataTask:(NSURLSessionDataTask *)dataTask didReceiveResponse:(NSURLResponse *)response completionHandler:(void (^)(NSURLSessionResponseDisposition))completionHandler {
  2.     NSLog(@"receive response: %@", response);
  3.     // 获取原始URL
  4.     NSString* originalUrl = [dataTask.currentRequest valueForHTTPHeaderField:@"originalUrl"];
  5.     if (!originalUrl) {
  6.         originalUrl = response.URL.absoluteString;
  7.     }
  8.     if ([response isKindOfClass:[NSHTTPURLResponse class]]) {
  9.         NSHTTPURLResponse *httpResponse = (NSHTTPURLResponse *) response;
  10.         NSURLResponse *retResponse = [[NSHTTPURLResponse alloc] initWithURL:[NSURL URLWithString:originalUrl] statusCode:httpResponse.statusCode HTTPVersion:(__bridge NSString *)kCFHTTPVersion1_1 headerFields:httpResponse.allHeaderFields];
  11.         [self.client URLProtocol:self didReceiveResponse:retResponse cacheStoragePolicy:NSURLCacheStorageNotAllowed];
  12.     } else {
  13.         NSURLResponse *retResponse = [[NSURLResponse alloc] initWithURL:[NSURL URLWithString:originalUrl] MIMEType:response.MIMEType expectedContentLength:response.expectedContentLength textEncodingName:response.textEncodingName];
  14.         [self.client URLProtocol:self didReceiveResponse:retResponse cacheStoragePolicy:NSURLCacheStorageNotAllowed];
  15.     }
  16.     completionHandler(NSURLSessionResponseAllow);
  17. }
  19. - (void)URLSession:(NSURLSession *)session dataTask:(NSURLSessionDataTask *)dataTask didReceiveData:(NSData *)data {
  20.     [self.client URLProtocol:self didLoadData:data];
  21. }
  23. - (void)URLSession:(NSURLSession *)session task:(NSURLSessionTask *)task didCompleteWithError:(NSError *)error {
  24.     if (error) {
  25.         [self.client URLProtocol:self didFailWithError:error];
  26.     } else {
  27.         [self.client URLProtocolDidFinishLoading:self];
  28.     }
  29. }

立即试用HTTPDNS服务，点击此处。

最后更新：2016-11-23 16:04:07

  上一篇：go 如何利用HTTPDNS降低DNS解析开销__最佳实践_HTTPDNS-阿里云
  下一篇：go HTTPDNS域名解析场景下如何使用Cookie？__最佳实践_HTTPDNS-阿里云