'Is it possible to preset Form POST Body (multipart) with Plain Javascript without doing Ajax/XHR or Fetch?

I'm currently working on a Hacking Challenge in a Security Course.

It is required to do a multipart/form-data POST Request as an CSRF (trick the user to visit my HTML/JS and redirecting her with authenticated Session to do something harmful).

As the necessary Allow-Origins Header is missing it's not possible to do it with Ajax/XHR or Fetch.

That leaves me to the question: Can I append Formdata or something similar to a DOM-based Form and submit it like a browser initiated Submit that will bypass the CORS restrictions?

This is my initial idea. The POST Request runs as intended, but the file payload isn't appended to the body like it should?!

<html> 
        <body>
        <form id="myForm" method="POST" action="http://vuln-app/api/v1/process" enctype="multipart/form-data"> 
                <input type="file" id="fileinput"> 
                <input type="submit" value="Submit request" /> 
        </form> 
        <script> 
yml = ` 
vulnerable yml code
`
        var ymlBlob = new Blob([yml], { type: "application/yml" });
        
        form = document.forms[0];
        var fd = new FormData(form);

        fd.append("fileinput", ymlBlob, "description.yml");

        form.submit();
        </script>
        </body>

</html>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source