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 bluesky, 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

Storing times for human events

I've worked on various event websites in the past, and one of the unintuitively difficult problems that inevitably comes up is the best way to store the time that an event is happening. Based on that past experience, here's my current recommendati…

via Simon Willison's Weblog: Entries November 27, 2024

Nothing is Something

There’s a post on htmx.org about why htmx wasn’t the right fit for a particular project (which is dope, we need more websites that admit their thing might not be the right thing all the time). The bit on AI being unfamiliar with their tool choice piqued my…

via Jim Nielsen’s Blog November 27, 2024

Ella’s First Website

ULTRA PROUD DAD MOMENT: Ella made her first website! Melissa and I woke up on Saturday morning to our goofy 6-year-old daughter entering our bedroom making this obnoxious sound. It was impressively annoying, especially considering she hasn’t seen Dumb and…

via Blog – Brad Frost November 27, 2024

Generated by openring