Finding and auto-filling HTML login forms in a UIWebView using JavaScript

Question

i have a UIWebView which acts like an internet browser and loads the HTML of the webpages that it is at.

in the webViewController, the method webViewDidFinishLoad, would have loaded the HTML from the webpage when the webpage finish loading on the UIWebView.

From the HTML i would like to sieve out textfields to facilitate the auto population of that textfield with values stored in my database.

Any methods to do that? The method should be able to work on all websites.

Set text for a textfield in UIWebView has almost what might help me, but i have tried it and the text field never got filled.

In a login page there will be two text fields so i tried using

document.getElementsByTagName('INPUT')[0].value
document.getElementsByTagName('INPUT')[1].value

to input in the values but no magic.

Edit: i have tried other position in the array. the username and password for Facebook is [3] and[4] whereas for amazon it is [11] and [14]. so the position of where the fields are using the above method is kinda random. Any other suggestion that will work for all website?

Edit2: i could try

document.getElementsById('id_name').value

but the ID method is not going to work for me as i need a universal method that will identify textfields on any websites(all websites uses different ID names)

Also it seems to me that some of the websites have consistently set this tabindex="1" for username and tabindex="2" for password.

for instance in the webpage like Facebook:

<input type="text" class="inputtext" name="email" id="email" value="" tabindex="1" />
<input type="password" class="inputtext" name="pass" id="pass" tabindex="2" />

amazon:

<input id="ap_email" name="email" value="" type="email" size="30" maxlength="128" tabindex="1" autocorrect="off" autocapitalize="off" />
<input id="ap_password" name="password" type="password" maxlength="1024" size="20"  tabindex="2" onkeypress="displayCapsWarning(event,'ap_caps_warning', this);" class="password"/>

dbs bank:

<input type="text" tabindex="1" maxlength="20" size="32" name="UID" id="UID">
<input type="password" onkeyup="keyUp(event)" onkeydown="return onlyNumerics(event)" tabindex="2" maxlength="9" size="32" name="PIN" id="PIN" autocomplete="off">

but i didn't see this tabindex in google:

<input type="text" spellcheck="false" name="Email" id="Email" value="">
<input type="password" name="Passwd" id="Passwd">

any suggestion?

The Ultimate goal is to be able to sieve out Username and Password Text field for all/any websites. =)

So you want to find _all_ textfields or just the username and password textfields? — Johannes Fahrenkrug, Mar 15 '12 at 13:46

Johannes Fahrenkrug · Accepted Answer · 2012-03-15T16:40:31.113

17

OK, so there's no one-size-fits-all for this. You can get pretty close, but it will never work on every website, since a website could possibly have multiple login forms, or multiple fields that make up the username (some banks have that).

But this will get you in the right direction. To get all the password fields (mostly just one), use this:

document.querySelectorAll("input[type='password']")

To get all the text input fields, use this:

document.querySelectorAll("input[type='text']")

For the text input fields, you'll most likely get multiple results (maybe search fields and stuff). So you'll have to iterate over them and look for common IDs or names, like "username", "user", "user_name", "UID" and so on.

This is how you could use it in Objective-C:

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    NSString *savedUsername = @"peter";
    NSString *savedPassword = @"Pan123";

    if (savedUsername.length != 0 && savedPassword.length != 0) { 
        //create js strings
        NSString *loadUsernameJS = [NSString stringWithFormat:@"var inputFields = document.querySelectorAll(\"input[type='text']\"); \
        for (var i = inputFields.length >>> 0; i--;) { inputFields[i].value = '%@';}", savedUsername];
        NSString *loadPasswordJS = [NSString stringWithFormat:@"document.querySelectorAll(\"input[type='password']\").value ='%@'", savedPassword];

        //autofill the form
        [self.webView stringByEvaluatingJavaScriptFromString: loadUsernameJS];
        [self.webView stringByEvaluatingJavaScriptFromString: loadPasswordJS];
    }
}

Please note: It fills every textfield with the username and only the first password field with the password.

Enjoy.

edited Mar 15 '12 at 16:40

answered Mar 15 '12 at 15:22

Johannes Fahrenkrug

38,500
17
113
155

How should i apply this code? NSString *idontknow = [NSString stringWithFormat:@"document.querySelectorAll("input [type='password']")"]; NSLog(@"idontknow %@", idontknow); Error: expected ":" -> input":"[type.... – at0m87 Mar 15 '12 at 16:06
@at0m87 Please don't forget to up-vote and accept answers if they are helpful to you. Thanks! – Johannes Fahrenkrug Mar 15 '12 at 18:41
1

Thanks Johannes! your answer was very helpful and pointed me in the right direction. I would like to point out that the password fields are not autofilled unless you change the code as so: NSString *loadPassPassword = [NSString stringWithFormat:@"var passFields = document.querySelectorAll(\"input[type='password']\"); \ for (var i = passFields.length>>> 0; i--;) { passFields[i].value ='%@';}", savedPassword]; – at0m87 Mar 16 '12 at 06:13
you were saying about using common IDs or names to iterate for more accurate result. Is there any way i can search using like a wildcard value? say if the string contains mail and such? – at0m87 Mar 16 '12 at 06:17
i tried something like this, but it doesn't seem to be able to catch anything. am i doing it wrongly? for (var i = inputFields.length >>> 0; i--;) { \ if ( inputFields[i].getAttribute('name') == 'email'){ \ inputFields[i].value = '%@';}}", savedUsername]; – at0m87 Mar 16 '12 at 06:23
i found out for the above code, it is case sensitive, 'email' != 'Email' – at0m87 Mar 16 '12 at 06:32
For that you'll have to learn regular expressions. You can start here: http://stackoverflow.com/questions/4736/learning-regular-expressions and I really like http://www.rubular.com – Johannes Fahrenkrug Mar 16 '12 at 13:13
Interesting! i tried this on Rubular: (?\w(e|m|a|i|l|u|s|e|r|n|a|m|e||I|D)) and it can match most of the names used for the username field. So the question again is how to apply this to objectiveC? – at0m87 Mar 16 '12 at 16:59
NSString *loadUsernameJS = [NSString stringWithFormat:@"var inputFields = document.getElementsByTagName('input'); \ for (var i = inputFields.length >>> 0; i--;) { if(inputFields[i].name == 'username') inputFields[i].value = '%@';}", savedUsername]; NSString *loadPasswordJS = [NSString stringWithFormat:@" \ for (var i = inputFields.length >>> 0; i--;) { if(inputFields[i].name == 'password') inputFields[i].value = '%@';}", savedPassword]; worked for me! – Martijn Mellens Mar 05 '14 at 09:40

score 5 · Answer 2 · answered Apr 21 '14 at 11:47

Based on a previous answer I created this 3 methods.

This method will fill the username/email fields it should work on a lot of cases :

- (void)completeUserFieldsForWebView:(UIWebView *)webView withUsername:(NSString *)username {

    NSString *loadUsernameJS =
    [NSString stringWithFormat:@"var inputFields = document.querySelectorAll(\"input[type='email']\"); \
     for (var i = inputFields.length >>> 0; i--;) { inputFields[i].value = '%@';}", username];
    NSString *loadText =
    [NSString stringWithFormat:@"var inputFields = document.querySelectorAll(\"input[type='text']\"); \
     for (var i = inputFields.length >>> 0; i--;) { inputFields[i].value = '%@';}", username];
    [webView stringByEvaluatingJavaScriptFromString: loadUsernameJS];
    [webView stringByEvaluatingJavaScriptFromString: loadText];

}

This one will fill the password fields:

- (void)completePasswordFieldsForWebView:(UIWebView *)webView withPassword:(NSString *)password {

    NSString *loadPasswordJS =
    [NSString stringWithFormat:@"var passFields = document.querySelectorAll(\"input[type='password']\"); \
     for (var i = passFields.length>>> 0; i--;) { passFields[i].value ='%@';}", password];
    [webView stringByEvaluatingJavaScriptFromString: loadPasswordJS];

}

And to perfom the sign-in :

- (void)clickOnSubmitButtonForWebView:(UIWebView *)webView {

    NSString *performSubmitJS = @"var passFields = document.querySelectorAll(\"input[type='submit']\"); \
    passFields[0].click()";
    [webView stringByEvaluatingJavaScriptFromString:performSubmitJS];

}

why is there >>> ? kinda hard to search for it :) but i tried. — colin lamarre, May 18 '14 at 05:20
Is it possible to just read a certain piece of text from the page? I want a database of countries and their dial codes and I know you can probably download that somewhere, but what do you learn by doing that? Is it possible to write a script that loads countrycodes.org, searches a new country every 2 seconds and saves that country name and dial code? Thx — Yoko, Jun 27 '15 at 12:46
can you please help me in how to Put icon inside input element . . . — Naman Vaishnav, Feb 20 '17 at 13:28

score 0 · Answer 3 · answered Mar 05 '14 at 09:44

I had some problems with finding the fields, so I adapted the code to target the fields more specific:

   - (void)webViewDidFinishLoad:(UIWebView*)theWebView
    {

    NSString *savedUsername = @"username";
    NSString *savedPassword = @"pass";

      if (savedUsername.length != 0 && savedPassword.length != 0) {

          NSString *loadUsernameJS = [NSString stringWithFormat:@"var inputFields = document.getElementsByTagName('input'); \
                                for (var i = inputFields.length >>> 0; i--;) { if(inputFields[i].name == 'username') inputFields[i].value = '%@';}", savedUsername];

          NSString *loadPasswordJS = [NSString stringWithFormat:@" \
                                for (var i = inputFields.length >>> 0; i--;) { if(inputFields[i].name == 'password') inputFields[i].value = '%@';}", savedPassword];

    //autofill the form
       [theWebView stringByEvaluatingJavaScriptFromString: loadUsernameJS];
       [theWebView stringByEvaluatingJavaScriptFromString: loadPasswordJS];
      }


    return [super webViewDidFinishLoad:theWebView];
  }

score 0 · Answer 4 · answered Mar 15 '12 at 15:34

I don't think finding a reference to the input elements will be difficult using javascript, but it's amending them that is not straightforward with the UIWebView.

A hacky way to achieve what you want in the way you describe could be done by getting the HTML from the UIWebView, amending it, then loading it back in. E.g.:

// Get the HTML from the UIWebView
NSMutableString *html = [[[self.webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.outerHTML;"] mutableCopy] autorelease];

// Find the range of the first input element.
NSRange firstInputRange = [html rangeOfString:@"<input" options:NSCaseInsensitiveSearch];
// Check if it was found...
if (firstInputRange.location != NSNotFound) {
    // Add replace with the populated value attribute appended.
    [html replaceCharactersInRange:firstInputRange withString:@"<input value='username'"];

    // Now do the same for the second input range, checking the html after the first input.
    NSRange secondInputRange = [html rangeOfString:@"<input" options:NSCaseInsensitiveSearch range:NSMakeRange(firstInputRange.location+firstInputRange.length, html.length - firstInputRange.location - firstInputRange.length)];
    // And if found, append the populated value attribute.
    if (secondInputRange.location != NSNotFound) {
        [html replaceCharactersInRange:secondInputRange withString:@"<input value='password'"];
    }

}

// Finally, load the amended HTML back into the UIWebView/
[self.webView loadHTMLString:html baseURL:nil];

i have placed this code in the method webViewDidFinishLoad, but the last part where you said load the amended HTML back into the UIWebView, it is calling the web view to load again and its stuck in a cycle. Should i not place this code in webViewDidFinishLoad and somewhere else instead? — at0m87, Mar 15 '12 at 16:14
May i also ask, in firstInputRange, are you finding the very first " — at0m87, Mar 15 '12 at 16:24
I don't think that't the most effective way if all you want to do is auto-fill some form elements. — Johannes Fahrenkrug, Mar 15 '12 at 16:26
@Johannes - you're right. I was unaware that you could inject the javascript back into the page using this method. By setting the element's value attribute, it does indeed update the HTML. Well, you live and learn :) — Ian L, Mar 15 '12 at 16:46
@IanL no problem :) Your code might come in handy in certain situations too :) — Johannes Fahrenkrug, Mar 15 '12 at 16:52

Finding and auto-filling HTML login forms in a UIWebView using JavaScript

4 Answers4

Linked