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.
Related
When filling out a form on google chrome/edge(doesn't happen on firefox), then pressing the back page button, then forward page button you get a weird situation where the browser maintains the information in the form. The issue comes when on submitting the form none of the values are saved to the $scope values associated to them.
How can I either disable google/edge from doing this or make it so when they do it the $scope is updated?
I agree with what Dean Van Greunen has said. Configuring autocomplete inside <input> will only disable the autocomplete feature of the attribute-applied <input> element. You will not worry about the browser's autocomplete feature.
What's more, "Forwarding" the "backwarded" page will preserve your data according to this doc:
For example, if the user makes changes, clicks Back and then Next, those changes should be preserved. Users don't expect to have to re-enter changes unless they explicitly chose to clear them.
So if you don't want the browser to preserve your data, you can either clear the data before "backwarding" the page or simply disable the input autocomplete feature. Also, simply moving the page back and forth will not trigger the $scope to update.
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.
On our webapp the page contains a filter form with some field, a SEARCH button, which calls a jQuery AJAX, loads the items according to the filter form data. From javascript we pushes the form filter values to the url to maintain the browser history.
When we press the BACK button, the page "reloads", but we see that the form values do not refresh to the current values. Examining the page source, we see that the html contains the textbox element with the proper value attribute (from the url values), but the textbox still displays the last value of the form. Sometimes. Sometimes it works.
We added the autocomplete="off" to the form values, which helps a little, "sometimes" went to "usually", the displayed values usually matches the html sources. But not always. We think that the browser cache is the bad guy - when we press the back or forward button sometimes the page does not refresh, but comes from "somewhere".
We added a web config cache setting:
<caching>
<outputCacheSettings>
<outputCacheProfiles>
<add name="CacheProfileNone" noStore="true" varyByParam="*" duration="0" />
</outputCacheProfiles>
</outputCacheSettings>
</caching>
and added the attribute to the controller action
[OutputCache(CacheProfile = "CacheProfileNone")]
public ActionResult Index(QueryViewModel model)
{...}
but it didn't help. :( Sometimes when we press the back button wrong form values are displayed, not matching with the html values. The form values are not manipulated with custom javascript functions. We added onchange event with console.log output, and sees no log messages, so we think the form element display value does not depend on our decisions or code, but (we think) it depends on the browser things.
We are open new suggestions what to do next, to get the browser to always load the page and displays the current value as it is defined in the html source.
Any suggestions are welcome! Thanks!
I'm guessing (because you provided no code), but this doesn't work the way you think:
From javascript we pushes the form filter values to the url to
maintain the browser history.
You need to investigate the History API replaceState() method.
Reference here:
https://developer.mozilla.org/en-US/docs/Web/API/History_API
I'm building a Safari extension that will auto complete a bunch of fields found on an online form.
That online form is using angularJS to tie in the value in the fields with the value in a model. I don't know much about angularJS, but I could deduce that from the ng-model=user.firstname.value etc. directives found in the input tags.
My Safari extension will get the first name input field, and set firstNameField.val("A first name") in order to add a value in that field.
However, this doesn't seem to update the angularJS model, since if I am to exit that field manually, it'll color itself red, saying there is no data, even though there clearly is some text.
From my extension, I don't seem to be able to access the angular object unfortunately, so I cannot call the methods that I read need to be called (angular.$apply).
Seems like what I am trying to do is doable, since the LastPass extension correctly adds values to the input fields and causes the model to be correctly updated – the fields don't color themselves red.
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.