Develop Reference

Force 'update password' popup using javascript

Problem:
I am trying to build a webapp with a password change feature that doesn't use a form submit.
The flow is a bit like this:
Bootstrap modal popup
user enteres text
On Modal 'Ok' a fetch is triggered that updates the database.
On API confirm [somehow trigger the 'update your password' dialouge in firefox/chrome/etc.]
Due to previous confusion: The 'update your password' dialouge refers to the browser password manager popup that gets
shown when a login form is send.
picture of the popup i am talking about
(source: https://linuxhint.com/force_firefox_never_save_passwords/)
Tech stack:
In case it is relevant here is my tech-stack:
Vue.js ( No plugins or modules except VueX )
Bootstrap (with all the included js)
Code
<h1>Submit form: (Works)</h1>
<form action="/login" method="post">
<input type="text" name="username" id="">
<input type="password" name="password" id="">
<button type="submit">Submit</button>
</form>
<h1>My version (simplified):</h1>
<p>Enter your new password</p>
<input type="text" v-model="password">
<!-- modal -->
<div class="modal">
<p>Please enter your old password</p>
<input type="text" v-model="old">
<button #click="updatePassword">Update</button>
</div>
//vue stuff
function updatePassword(){
// a fetch wrapper
callAPI( '/api/update_password', { old:this.old, password:this.password } )
}
What i tried:
I am aware of the fact that i could use a hidden form pointed to a 'dead' endpoint that is submitted by Javascript.
Why i don't like that solution:
It feels like a hack
I don't want to create unecessary requests
creating and destroying DOM-Elements for Javascript-only use is not 'the clean way' (as far as i know)
This has to be a common thing, am i missing an API?
Thanks in advance!
- Stevetec

The browser does not want to allow you to force that. For one, users can disable the feature locally. On top of that, it could allow for some very nasty attacks if the website could force security-related popups.

Is it possible to make a XSS in this scenario?

I am learning how to find vulnerabilities in web-apps. I am trying to find an XSS vul. in an app.
There is a reactjs webapp. Exist two possibilities, two inputs that change information of a user, one is the bio and other changes the webpage of the user.
<div class="sc-hMqMXs gwiZKI">
<div class="sc-hSdWYo jeEjXR" aria-disabled="false">
<textarea data-gr="textarea" maxlength="160" placeholder="Describe yourself briefly in one or two sentences…" rows="4" height="84" aria-invalid="true" class="sc-eHgmQL liNjVN">" /> <script>alert();</script>
</textarea>
</div>
</div>
When i try to set an input with script tag, there has to be some kind of stringify that dont let me go foward to it.
This is the output of the first input:
<p class="Builder__BiographyStyle-v13eqd-0 gOpKPy sc-cBdUnI dWHKbJ" style="color: rgb(116, 116, 116);"><script>alert(1);</script></p>
The payload was: <script>alert(1)</script>
The second one is the webpage:
the code of the input es almost the same as the first:
<input data-gr="input" maxlength="160" placeholder="myhomepage.eu" aria-invalid="true" class="sc-jWBwVP bCXLCE" value="{{javascript:alert(1)}}">
And the output of the input on HTML is:
<a rel="noreferrer noopener" target="_blank" display="primary" href="https://{{javascript:alert(1)}}" class="Link__TextLinkStyle-sc-18o82bi-0-a bAMZxp">https://{{javascript:alert(1)}}</a>
This means that the input is stringified and the https:// is added. How could be the syntax to make an XSS vul execute code in there, is it possible?

Using a Form to Dynamically Change the URL in the Address Bar Part 2

Okay, so I asked a variant of this question before, but I think the thread has died at this point, and I have a followup question:
Using a Form to Dynamically Change the URL in the Address Bar
So, I was looking to find a way to use a form to quickly add a product to a Volusion cart by entering it's product code. Turns out, if you're on the cart page, the solution is this snippet:
<form action="ShoppingCart.asp" name="form" method="get">
<input type="text" value="" name="ProductCode">
<input type="submit" value="Add To Cart">
</form>
Well, this doesn't work at all on other pages...knowing very little about how GET forms work, I'd love to better understand why this is, and what I can do to make this work on, say, the homepage.
The site (currently) is: http://ezndb.cwjea.servertrust.com/
As you can see, I have the red area sporting the code that I used on the check out page, but it doesn't work...any suggestions? I know other threads have suggested javascript/jquery or php methods of getting this to happen...

any form with the method ="get" will append data to the url in name value pairs ( the name being the input name
<form action="#" name="form" method="get">
<input name="q" />
<input name="q2" />
<input type="submit" value ="click and look at the address bar, Probably won't work on stack though" />
</form>

It doesn't work because your store is a members only site so the customers cannot add items to the cart until they are confirmed members.

How do I post values obtained from an html form to an URL using javascript?

I'm new to html and JS and I have a form with a few fields that I need posted to a URL.
<form>
<div>
<label style="font-size:16px" for="title">Title:</label>
<input type="text" id="title" maxlength="128"/>
</div>
<div>
<label style="font-size:16px" for="description">Description:</label>
<textarea id="description" maxlength="1999"></textarea>
</div>
<div>
<label style="font-size:16px" for="idnumber">IDNumber:</label>
<input type="number" id="idnumber"/>
</div>
</form>
I need the values entered into this form to be posted to a URL that already knows how to process the input. I'm sure this is easy to do but I'm new and I'm having trouble finding a solution. Apologies for any incorrect terminology. Thanks!

You can use the action attribute:
<form action="some/url" method="post">
<!-- ... -->
<input type="submit" value="Submit" /> <!-- Submit button -->
</form>

You have to add an action to your form tag that points to a server side script.
<form action="myscript.php" method="post">
Alternatively, you can use JavaScript to post it as an AJAX request which submits the request without a page refresh.

I'd say you're on the right track. This would be perfectly easy using basic HTML: Add an action="mySubmitPage.php" to the form element. It sounds like you want to do it without refreshing/changing the page, though (at least, that's how it sounds by "with Javascript")
That will involve an "asynchronous" submit. The fancy term is "AJAX". That part can be a lot easier using some form of Javascript framework, especially if you want to support all browser quirks. Here's an example of doing it using JQuery, for instance:
jQuery - Send a form asynchronously

Is it possible to use JavaScript to submit an unnamed form from outside an iFrame?

I know that may sound silly, but I'm trying to submit a form on a page inside an iFrame, from the parent site.
Here's an example of the form:
<form action="/add_email" method="post">
<div class="field">
<label for="newEmailAddress" style="width: auto">Add new email address</label>
<input type="text" id="newEmailAddress" name="email" value="null" class="text-field" />
<input type="hidden" name="__app_key" value="null"/>
<input type="submit" value="Add address and send activation email">
</div>
</form>
As you can see, the Submit button, and the form itself both lack a proper name or id, this is not something I have control over. (It's on an external website.)
Any suggestions?

When no name is given to the form then form has the default form name in a form of array
ie form[]
hence one can create as many forms in script, the default name's index will increase.
Hence one can use it accordingly.

Since it is an external website — no. The Same Origin Policy prevents it.
If it was the same website then you could communicate across frames and then access the form via its numerical index in the forms object (but you would also likely be able to give it an id and use that instead).