JavaScript Autofill Issues - javascript

I am attempting to create a simple chrome extension autofill for Stripe Checkout pages. Chromes default autofill functions like expected however when trying to use my extensions autofill code to input values into the forms like so
document.getElementById("ID").value = "value"
the value is input initially but will be automatically removed for any number of reasons, like clicking outside of the input or anywhere else on the page will have the value of the input removed. I have tried a few different things like firing all of the necessary events for keyboard input like keyup,keydown,input, change ect and I can not get the value to stick.
I believe that stripe is using some JS to check whether or not the events sent to the input were trusted and if not it is removing the values. for this reason I have attempted to use Chromes Debugger API to send commands directly to the browser. I have found a command that seems like it will work for what I need. The "Input.dispatchKeyEvent" command appears to be what I need but I do not see a way to specify what element the keys are being sent to.
chrome.debugger.sendCommand({tabId:TAB_ID}, "Input.dispatchKeyEvent",{type:"char"})
How Can I Prevent The Values From Being Removed?
Is There A Way To Send trusted key Events To A Specific Element On The Page Using The Debugger?
An Example Of A Stripe Checkout Page Can Be Found Here Click Pay Now To Be Brought To A Testing Page
https://demo.wpsimplepay.com/stripe-checkout/
Command Docs
https://chromedevtools.github.io/devtools-protocol/1-3/Input/#method-dispatchKeyEvent

I don't think is something you'll be able to do, as I'd expect Stripe would want to avoid auto-filling of card details from anything other than the browser or a trusted application.

Related

HTML form filled out by javaScript from chrome console disappears

I want to fill out html forms on a third party website by auto generating javascript code which manipulates DOM from Chrome console:
document.getElementById("g_address").value = "abcdefg"
First step works, javascript applies changes to input field.
However, if I press submit from console or manually, all the filled out data in the input fields disappears. The same happens if I start typing manually in any input field.
My question - is it the website which prevents me from doing it like this or is it in general not possible to this way.
It's impossible to say what's happening without any information about the site in question. I doubt the site is deliberately detecting and/or circumventing your effort, but it wouldn't be uncommon for a web site or app to have its own internal representation of the form values in memory, independent of the html inputs, such that the app state, not the DOM, is the source of truth for the values.
Keystrokes on the inputs might be updating the app state, which in turn triggers a re-render of the DOM to display the new value for that input.
Because you're bypassing those interactions the app doesn't know about your changes and they don't get recorded. Then, when you subsequently type in an input the app updates the DOM, setting the input to its last known value, which doesn't include your changes.

Why is autocomplete=off being supposedly added by my LastPass browser extension for this one page at least, and how can I prevent it from doing so?

Problem Background & Steps
I am using Chrome 58 on a Mac OS version 10.12.3.
Something like this is happening: StackOverflow - What is _lpchecked=“1” for in a form?
This attribute is added to the parent form element when I click inside of a child input element.
My problem is that when this happens, the attribute "autocomplete=off" is added to the input element.
When switching between child input elements, this attribute is added to the currently focused element.
The element names are "to_email" and "comments".
This is not a login form, but a sharing form.
This seems to happen based on me having the LastPass extension, the name of the variable, and a bit of online searching.
I have tried going into the LastPass Account Settings area, "Never URLs" section/tab, and adding the URL to the "Never Do Anything" category.
The URL is of the form sub.domain.tld/path/resource.php?queryParam=value. LastPass would only allow me to add the URL without the query portion to the list, even when I tried a wildcard asterisk (*) for the value.
Even after accessing the LastPass Extension Menu > More Options > Advanced > Refresh Sites, Clear Local Cache, and refreshing the page, this problem still occurs.
I did not see any information in the Hacker News article about a similar signon.overrideAutocomplete property in Chrome like Firefox has, and may not want such a broad solution anyway.
I don't want to have to install another extension like autocomplete-on
(seems to not exist) and have functions 'battle' each other, which may not even produce desirable results, like working at all, or flipping constantly.
I have even searched for what else might be doing this with words such as "adding attribute" and "dynamic", but Google biases the results to less complex scenarios about specific pages, something I could try to solve with TamperMonkey if I wanted to.
If there was any such problem like 'sniffing' for more autocomplete information, as somewhat mentioned by these links:
yoast - Why you should not use autocomplete
Alex Maccaw - Chrome’s requestAutocomplete()
Then hopefully it should be fine if I only fix this problem on a limited basis, especially only for forms with insensitive data.
Questions
How can I prevent LastPass from adding this attribute?
Is it just LastPass doing this?
Have I entered the URL correctly to "Never Do Anything"?
Funny Link
Hacker News - The war against autocomplete=off (2013)
For now it seems to work if I add a TamperMonkey script to overwrite the value.
This is not as large a solution as the jonmetz fellow mentioned making his own plugin (his is in Firefox), and can be duplicated as needed. If this is needed a lot, then maybe an extension would be more convenient.
Because of the dynamic and repeated nature of the issue on the page, a simple assignment did not work, and was overwritten.
My preference for the attribute remains as the end result if I add an onFocus Event Listener thusly:
var emailInput = document.querySelector('input[name="to_email"]');
emailInput.addEventListener('focus', function(){
this.autocomplete = "on";
});
I also do this in case it helps at all:
var parentForm = emailInput.parentNode;
parentForm.setAttribute('_lpchecked', '1');

How to get text boxes to except text added through JavaScript (Twitch TV chat)

So, I am trying to write a simple command chat bot for Twitch.tv chat, but I cannot seem to be able to get it to actually submit the text I add. Although I can add text and "click" the send button with JavaScript, it will not actually submit it.
For example, I can use http://www.twitch.tv/example to test it. Apparently it is not good practice on Stack Overflow to link to sites, but I do not know what else to do. I cannot recreate the problem in JS Fiddle because I do not know exactly what the problem is.
I can get these elements to seemingly work by using the Chrome console:
//finding the textbox
var textbox = document.getElementsByClassName("chat_text_input mousetrap ember-view ember-text-area")[0];
//then assign some text to it.
textbox.value = "Hello, World.";
This works fine and the text appears.
//to send it I should merely find a way to click the "send" button
var send = document.getElementsByClassName("button primary float-right send-chat-button")[0];
send.click();
Well, this does not really work. It only actually submits the text if I physically either type or use a character (like shift) inside the textbox, or physically click the button myself. So, from what I understand there is some sort of event that is triggered when I physically type and click. Unfortunately, I do not understand how to find/trigger this event through the console. This is what I want to do.
Preferably I would like to do this in pure JavaScript, but I believe it may be simpler in jQuery. If it absolutely has to be jQuery that's OK and I will just have to suck it up and learn.
As a side note, I was able to successfully use this (with the elements changed of course), for YouTube live streaming chat. However, several other websites' chat react similarly to Twitch. These include web skype.
I've spent the last few hours poking around Ember and Javascript to figure this out. I too was running into an issue where I had to either click into the chat area or the send button itself.
I thought I had a lead with a script made for Twitch Plays Pokemon which would send preset messages into the chat. It used Jquery to input the value into the textarea and click on the send button, but that no longer works as Twitch now uses Emberjs 2
I am not too familiar with the Ember framework, but it seems Twitch utilizes a Textarea component(in Ember terms), which associates some framework specific API to the Textarea HTML element.
Since the Twitch webapp is written with Ember, it would seem that using vanilla javascript to set the value of the textbox would not notify the property change to whatever observers are registered internally to Ember
The workaround would then be to change the value property via Ember internal methods. Luckily poking around the views associated on the Textarea DOM element gives access to the set method.
http://www.ember-doc.com/classes/Ember.TextArea.html#method_set
Ember.view.views worked pre-Ember 2 but was deprecated and now requires lookup
App.__container__.lookup('-view-registry:main')[document.querySelector(".chat_text_input").id].set("value","test");
document.querySelector(".chat-interface__submit").click();

using javascript to get selected text from an iframe pointing to a different domain

I have an iframe set up that allows the user to browse to a different website with a simple form set up next to it so the user is able to enter information into the form.
This is set up in order to allow the user to quickly refer to the iframe and enter information into the form without having to open the site in a separate window and having to resize the two windows in order to view both at the same time (this was a specific user request).
Now the user has requested that this process of entering information from the form is streamlined a bit more by eliminating the need to 'highlight text > ctrl+c > select correct field in form (eg phone no.) > ctrl + v', so I am looking into seeing if it is possible to just highlight the text to be copied and then automatically update a field in the form using a button or a simple key down event.
I have tried using :
window.frames["myframe"].getSelection().toString();
but this results in an error telling me I don't have permission to access the "getSelection" property, which I believe is because I am trying to access the information of a page on a different domain to mine.
Is there any other way of capturing just the selected text to paste into my form element or will the user have to just deal with the constant copy and pasting manually?
You can't perform any JS action on any iframe that has another origin. That's a basic security policy of any web browser. It would be an enormous security flaw.

Read only textfield editable via inserted javascript?

I have a form with a read only field for display/submit to the next page purposes.
However, I noticed using developer tools in Chrome, I was able to add an id to an element, use the javascript console to select that element, and change its value. I submitted the form and what do you know - the next page acted on it as if it was the original value.
Now, there shouldn't be any problem with the people using the site I'm building, but it seems like a huge security flaw to me. Isn't the point of read-only to remain constant? If a savvy user to change it around, doesn't that pose a big problem? In fact, I didn't even think you could add and change attributes in chrome.
Please post your thoughts below, and let me know if there's a solution ("disabled" textfield, but setting the disabled property doesn't send the data to the next page).
NEVER trust input from a web form.
The user could, just as easily, remove the readonly attribute and edit the value. The readonly attribute is only something to help the user when filling out the form, so they don't edit a value expecting it to change, when your server actually won't let it be changed. So, always remember to code the behavior on your server first, and have the HTML form be a helpful guide for users to make the form easier to fill out (without having to submit the form several times to get relevant error messages).
To overcome this, if something is readonly and you do not want it edited, you could store the value in your database. Also, values provided by users should always be checked (and sanitized) as no amount of JavaScript, HTML, or CSS is going to prevent someone who knows what they're doing from adding new or changing/removing existing values.

Categories

Resources