R1D19 Moonshots Day 2; Clickjacking for the greater good.

| programming | javascript |

On day two of my moonshot, I glue together all of the missing pieces to get the data to flow from pardot to inka.

Pardot allows you to inject arbitrary javascript into any form that you create. I used this to my advantage and basically stole the submit button event, temporarily sending data back to my own server for further processing (and eventual order input into inka.io) and then resubmitting the form as usual.

The code to get this to work on the JS side looks something like this:

(function() {
    var form = document.forms[0]

    function sendOrder(order, event) {
        xhr = new XMLHttpRequest();
        xhr.open("POST", "https://$MY_SERVICE", true);
        xhr.setRequestHeader("Content-type": "application/json");

        xhr.onreadystatechange = function() {
            if(xhr.readyState = XMLHttpRequest.DONE && xhr.status == 200) {
                event.target.submit();
            }
        }

        xhr.send(order);
    }

    form.addEventListener("submit", function(event) {
        event.preventDefault();

        // Code to Process Form 

        sendOrder(order, event);
    }
})();

The key thing to keep in mind is that if you do event.target.submit() before the XMLHTTPRequest finishes, then it may never process the full request. This is why we pass it into the function, and perform the resubmission of the form after the response has gone through.

This was a fun little hack, but the solution is far from perfect.

Problems

The biggest risk here is that anyone can submit this form now 10,000 times without any real checks in place. As much as we love our customers, we don't really want to send 10,000 T-shirts to spam bots.

It’s also overly complex and the form parser is very jenky because it’s making some very poor assumptions about what this from will always look like. Since the form is ultimately generated by pardot, it is subject to change without notice at any time.

Further Improvements

Solving the first problem would be required before I felt comfortable having this live in production. Some ideas would be to do some rate limiting, or intelligent checking to verify that the form submission came form a real human being (perhaps counting the time that it took for them to fill out a form?)

However any sort of javascript validation is error prone as we have seen in this lovely $170 Million mistake.

Another improvement would be to send an email to someone in the event that we were not able to process an order so that a human being could attempt to do it manually.

Despite some of theses setbacks, I was able to have pardot send from data to my laptop via ngrok, process the data, and automatically place a T-Shirt order on inka.io.

Thank you for reading! Share your thoughts with me on mastodon or via email.

Check out some more stuff to read down below.

Most popular posts this month

Recent Favorite Blog Posts

This is a collection of the last 8 posts that I bookmarked.

Articles from blogs I follow around the net

Today in heavy-handed metaphors

Sam Altman is the owner of a massive, invasive, parasitical toxic sludge that respects no boundaries and ruins everything it touches, and that he thinks someone else should clean up. Also his new house has mold. OpenAI CEO's $27 million San Francisco ma…

via jwz July 19, 2024

Weeknotes: GPT-4o mini, LLM 0.15, sqlite-utils 3.37 and building a staging environment

Upgrades to LLM to support the latest models, and a whole bunch of invisible work building out a staging environment for Datasette Cloud. GPT-4o mini and LLM 0.15 Today's big news was the release of GPT-4o mini, which I wrote about here. If you build ap…

via Simon Willison's Weblog: Entries July 19, 2024

ESM3: A simplified primer to the model's architecture

A short primer explaining the architecture of the ESM3 model

via Emmanuel Blogs July 18, 2024

Generated by openring