iOS UIWebView、WKWebView注入Cookie

作者: QiShare | 来源:发表于2019-04-25 17:46 被阅读10次

    级别: ★☆☆☆☆
    标签:「iOS 」「UIWebView注入Cookie」「WKWebView注入Cookie」
    作者: WYW
    审校: QiShare团队


    前言 上一篇文章中,笔者分享了Cookie简介,在这篇文章中,笔者将在分享原生App中,嵌入UIWebView、WKWebView时,注入Cookie、及获取服务端返回的响应头中的Cookie。

    为什么要在UIWebView、WKWebView中注入Cookie

    笔者设想了如下场景:

    有时App中不仅仅会有原生的界面,还会有嵌入的UIWebView,或者是WKWebView。
    比如说有一个App QiShare,嵌入了简书的网页。那么,对于一个使用繁体的用户,我们可以在加载简书WebView的时候,在Cookie中设置local为zh-TW,这样用户可以从原生QiShare App,切换到浏览简书WebView的时候,仍然看到的是繁体的内容。

    另外,仍然以简书为例,笔者在使用WebView访问QiShare的网址的时候发现,是“已关注”状态,这一点是通过在Cookie中设置remeber_user_token做到的。

    具体点描述这个例子

    以访问简书QiShare Cookie简介为例:笔者使用UIWebView在加载Cookie简介页面的时候,在Cookie中设置了local为zh-TW。不过首次加载的时候,不会直接显示为繁体,笔者以为原因是首次简书WebView,简书服务端还没有返回相应繁体信息。不过笔者第二次打开简书的其他WebView的时候,仍然没有显示为繁体,这一点还有点纳闷。

    笔者试了一下,当我们打开QiShare的链接,可以发现显示内容已经为繁体了。

    因为上边的繁体显示不稳定,我们还通过启动WebView前,注入Cookie,通过查看打开WebView后对QiShare关注状态来说明Cookie中remember_user_token的作用,打开WebView后,QiShare的关注状态,显示已关注。这需要我们在简书的WebView上登录过帐号(在模拟器上如果想登录简书的UIWebView,可以打开任意一篇文章,然后点赞,便可以到WebView的登录界面),然后,在Cookie里边会有个remember_user_token来告诉我们是已关注的状态。

    UIWebView 注入Cookie:

    笔者先以UIWebView加载QiShare简书,设置Cookie中的locale为zh-TW,为例说明UIWebView注入Cookie,如下代码可以做到设置Cookie中代表本地的语言的参数locale为'繁体'(zh-TW)。

        NSDictionary *keyPropertiesLocal = @{
                                        NSHTTPCookieName: @"locale",
                                        NSHTTPCookieValue: @"zh-TW",
                                        NSHTTPCookiePath: @"/",
                                        NSHTTPCookieDomain: @".jianshu.com"
                                        };
                                        
        NSHTTPCookie *cookie = [NSHTTPCookie cookieWithProperties:keyPropertiesLocal];
        
        [[NSHTTPCookieStorage sharedHTTPCookieStorage] setCookie:cookie];
        
        NSURL *url = [NSURL URLWithString:@"https://www.jianshu.com/p/1174d1dbe650"];
        NSURLRequest *request = [[NSURLRequest alloc] initWithURL:url];
        [_webView loadRequest:request];
        
    

    使用[NSHTTPCookieStorage sharedHTTPCookieStorage] setCookie:设置Cookie的方式可以做到,每次加载UIWebView的时候,都会自动携带已注入的Cookie,有点全局性的效果。

    笔者写了个使用NSHTTPCookieStorage 注入Cookie的方法:

    代码如下:

    //! 生成指定cookieName cookieValue cookiePath cookieDomain 的NSHTTPCookie 实例
    - (NSHTTPCookie *)cookieWithName:(NSString *)name cookieValue:(NSString *)value  cookiePath:(NSString *)path cookieDomain:(NSString *)domain {
        
        NSDictionary *keyProperties = @{
                                             NSHTTPCookieName: name,
                                             NSHTTPCookieValue: value,
                                             NSHTTPCookiePath: path,
                                             NSHTTPCookieDomain: domain
                                             };
        
        NSHTTPCookie *cookie = [NSHTTPCookie cookieWithProperties:keyProperties];
        [[NSHTTPCookieStorage sharedHTTPCookieStorage] setCookie:cookie];
        return cookie;
    }
    
    //! 设置 (生成指定cookieName cookieValue cookiePath cookieDomain 的NSHTTPCookie 实例) 到NSHTTPCookieStorage
    - (NSHTTPCookie *)setCookieWithName:(NSString *)name cookieValue:(NSString *)value  cookiePath:(NSString *)path cookieDomain:(NSString *)domain {
        
        if (!name || !value || !path || !domain) {
            return nil;
        }
        NSHTTPCookie *cookie = [self cookieWithName:name cookieValue:value cookiePath:path cookieDomain:domain];
        [[NSHTTPCookieStorage sharedHTTPCookieStorage] setCookie:cookie];
        
        return cookie;
    }
    
    

    使用方式如:

        NSURL * url = [NSURL URLWithString:@"https://www.jianshu.com/p/1174d1dbe650"];
        [self setCookieWithName:@"local" cookieValue:@"zh-TW" cookiePath:@"/" cookieDomain:kJianshuDomain];
        [self setCookieWithName:@"QiShareToken" cookieValue:@"QiShareTokenValue" cookiePath:@"/" cookieDomain:kJianshuDomain];
        [self setCookieWithName:@"QiShareKey" cookieValue:@"QiShareValue" cookiePath:@"/" cookieDomain:kJianshuDomain];
        NSURLRequest *request = [[NSURLRequest alloc] initWithURL:url];
        [_webView loadRequest:request];
    

    在Cookie中设置过local后的Demo效果如下图,可以看到在“已关注”,“最新评论”,“热门”等部分已经显示为了繁体。

    UIWebView_zh-TW.gif

    使用Charles查看Cookie注入效果如下图:

    UIWebViewCookie.png

    WKWebView注入Cookie:

    笔者以WKWebView加载掘金url,且加载过程中WKWebView注入Cookie,WKWebView设置如下Cookie(设置一个名为QiShareAuth1 值也为QiShareAuth1的Cookie;另外设置一个名为QiShareAuth2 值也为QiShareAuth2的Cookie)。
    可以使用如下代码:

    在创建WKWebView的时候就已经注入了要设置的Cookie

        WKUserContentController *userContentController = [WKUserContentController new];
        NSString *cookieSource = [NSString stringWithFormat:@"document.cookie = 'QiShareAuth1=QiShareAuth1';document.cookie = 'QiShareAuth2=QiShareAuth2';"];
        WKUserScript *cookieScript = [[WKUserScript alloc] initWithSource:cookieSource injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:NO];
        [userContentController addUserScript:cookieScript];
        WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
        config.userContentController = userContentController;
        
        NSURL *juejinUrl = [NSURL URLWithString:@"https://juejin.im"];
        NSMutableURLRequest *mJuejinRequest = [[NSMutableURLRequest alloc] initWithURL:juejinUrl];
        // [mJuejinRequest addValue:@"QiShareAuth1=QiShareAuth1;QiShareAuth2=QiShareAuth2" forHTTPHeaderField:@"Cookie"];
        WKWebView *wkWebV  = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
        _wkWebView = wkWebV;
       [self.view addSubview:wkWebV];
    
    

    仍有问题?

    笔者用Demo QiNetwork查看使用如上代码效果的时候,以为已经搞定了问题,结果发现,WKWebView在首次加载请求的时候,并没有携带我们注入的Cookie。查看了相关资料后有博客提及可以在加载请求前,使用给_wkWebView.configuration.websiteDataStore.httpCookieStore设置Cookie的方式,解决问题,不过笔者试过了,并没有达到预期效果。

    笔者最终采用的是在首次加载请求的时候,在使用上述代码的情况下,同样给mJuejinRequest添加了一次请求所需的cookie,相关代码如下:

    [mJuejinRequest addValue:@"QiShareAuth1=QiShareAuth1;QiShareAuth2=QiShareAuth2" forHTTPHeaderField:@"Cookie"];
    

    上述代码也是可用于想设置某个单个的请求的Cookie。
    使用Charles查看Cookie注入效果如下图:

    WKWebViewCookie1.png WKWebViewCookie2.png

    Demo:

    更多相关内容,可查看 QiNetwork

    参考学习网址


    小编微信:可加并拉入《QiShare技术交流群》。

    关注我们的途径有:
    QiShare(简书)
    QiShare(掘金)
    QiShare(知乎)
    QiShare(GitHub)
    QiShare(CocoaChina)
    QiShare(StackOverflow)
    QiShare(微信公众号)

    推荐文章:
    Cookie简介
    iOS 图标&启动图生成器(一)
    算法小专栏:“D&C思想”与“快速排序”
    iOS 避免常见崩溃(二)
    算法小专栏:选择排序
    iOS Runloop(一)
    iOS 常用调试方法:LLDB命令
    iOS 常用调试方法:断点
    奇舞周刊

    相关文章

      网友评论

        本文标题:iOS UIWebView、WKWebView注入Cookie

        本文链接:https://www.haomeiwen.com/subject/imcngqtx.html