Watch out for form fields when doing a javascript-based find and replace in your DOM!

So let’s say you’re having a bomb night in, and get a sudden urge to build a Google Chrome extension. Let’s say that your extension involves finding and replacing text in the dom. So, you can cycle through all of the nodes in the dom, and grab anything with a nodeType of 3, which means it’s text. You get that bad boy working, get all of your buddies to install it. And then someone has to edit some content.

And, oops. The swapped copy is now live for all to see, regardless of having any extension installed, or even being on Chrome.

Soo, you can check┬ánode.parentNode.nodeName, and if it’s INPUT or TEXTAREA or a similarly potentially sneaky form element, I suggest skipping those when doing your find and replace!

Leave a Reply