閱讀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-阿裏雲