Xcode 8 / iOS 10 Filling in WKWebView + FitBit OAuth

[vsanthanam]

Here's my code to try and fill in an instance of WKWebView. The page is already loaded. (For interested parties, it's FitBit's mobile OAuth Prompt)

`- (IBAction)onePassword:(id)sender {

[[OnePasswordExtension sharedExtension] fillItemIntoWebView:self.webView
                                          forViewController:self
                                                     sender:sender
                                             showOnlyLogins:NO
                                                 completion:^(BOOL success, NSError *error) {

                                                     if (error)
                                                         sh_log_with_type(sh_log_t_with_category("OnePasswordExtension"), OS_LOG_TYPE_ERROR, @"%@", error.localizedDescription);

                                                 }];

} `

[vsanthanam]

Here's what I'm seeing in the console

2016-12-01 13:12:15.655937 Sherbit[9819:2007387] 1Password Extension failed to collect web page fields: Error Domain=WKErrorDomain Code=4 "A JavaScript exception occurred" UserInfo={WKJavaScriptExceptionLineNumber=1, WKJavaScriptExceptionMessage=TypeError: null is not an object (evaluating 'g.previousElementSibling.tagName'), WKJavaScriptExceptionSourceURL={COMPANY_FITBIT_URL}, NSLocalizedDescription=A JavaScript exception occurred, WKJavaScriptExceptionColumnNumber=2059} 2016-12-01 13:12:15.657764 Sherbit[9819:2007387] [OnePasswordExtension] (Error) Failed to execute script that collects web page information

(I've obscured the company fitbit url because it contains our client ID)

[gks]

Hi @vsanthanam

I'm not able to duplicate any issues here. Do you by chance have sample code that I can run locally that reproduces the problem? If the sample code has any sensitive information in it you can email it to me at support+appex@agilebits.com (just mention my name, Kyle, in the message).

I'd love to help figure out what is going wrong for you.

[vsanthanam]

absolutely. I'll create a sample app and send it over.

[gks]

@vsanthanam I've been trying to keep an eye on things here but have not seen any incoming emails from you. Were you able to send in an email or just ran out of time?

[wtimme]

Hi guys, my issue is not FitBit-related, but I have problems with filling in the PayPal web checkout page.

Here's an example of an URL that doesn't work: _https://www.paypal.com/cgi-bin/webscr?cmd=_express-checkout&token=TOKEN#/checkout/login_

The completion of fillItemIntoWebView:forViewController:sender:showOnlyLogins:completion: reports success, but the form is not being filled with the PayPal credentials. I don't see anything in the logs. One of my suspicions was that maybe Content Blocker are interferring, so I disabled all of them - but the problem persists.

The extensions seems properly integrated, though. Trying to use Wirecard's sandbox for checking out using a credit card, the form is filled like a charm.

Here's an example of a working URL: https://checkout.wirecard.com/page/D200411_DESKTOP/3dscardinfo.php?SID=SESSION_ID

@gks, are there more details that would help you looking into that? I'd be glad to help. The extension is awesome!

[gks]

Hi @wtimme

I'm not sure if you can open this URL up in Safari and inspect the page. I can't seem to test this since I don't have a token, so it just report an error for me. But if you can inspect the page, is the login form or fields inside of an iframe?

If so, 1Password is not able to fill inside of iframes and that would explain why it's appearing to succeed but is actually failing.

[wtimme]

Thanks for the quick response, @gks!

As far as I can see, PayPal's login page is an Angular app. Does the extension work with those apps in general?

Further observerations: The credential inputs are named "login_email" and "login_password". There's no iFrame involved. The page seems very JavaScript-heavy. When using the page in Firefox on macOS, the 1Password Extension fills the form as expected.

Is there any additional information that I can provide?

[gks]

@wtimme I assume you can open this page in Safari on iOS as well, yes?

If so, does invoking the extension to fill on that page work? If not, that would either indicate that we are dealing with iframes or for some reason we're not properly filling and we'd need to investigate further.

Also, if that fails, can you confirm that the page you're viewing is the same as the normal PayPal login page? That would allow us to test here as well and potentially dive into it a bit more for you.

[wtimme]

@gks, that's a good idea. I just tested your approach and, even though I was able to invoke the extension, it did not fill the page in Safari either, unfortunately. I'm using an iPhone 6S, running iOS 10.2 (14C92) and 1Password 6.5.3.

Edit: I can confirm that the page that I am viewing is not the normal PayPal login page. I've attached screenshots of both pages for reference.

[gks]

@wtimme Can you please email in at support+appex@agilebits.com and mention my name.

If you could do that I'll see if there's any way we can gather some more information privately and have one of our extension filling team members take a look.

[wtimme]

So, @gks and I exchanged some emails. Turns out, filling that PayPal login page won't work because of the iFrame issue that @gks mentioned. (Maybe Kyle can expand on this, if that is of use to other developers.)

For future reference, here's how to reproduce the PayPal behaviour with 1Password:

1. Open the https://demo.paypal.com/ in Safari
2. Tap "PayPal Demo"
3. Important: Make sure that "Sandbox" is selected in the upper part of the screen
4. Select one of the products (e. g. "Black Camera")
5. Select one of the models (doesn't matter which, it's just a demo)
6. Tap "Add to cart"
7. In your cart, tap "Check out with PayPal"
8. Try to fill the form using the 1Password App Extension

Thanks again to Kyle and the team at 1Password for supporting their product and developers who build upon it!

[gks]

I'm reasonably confident that the issues encountered here all stem around the iframe scenario in the last bit of conversation. If anyone has issues otherwise please let me know though.