Search vulnerability

:  ~ 1 min read

I recently wrote that I added a visual representation for when a search is performed, by autocompleting the search field with the search query. Everything appeared to work as expected.

Some time ago I added Tinfoil Heroku addon and never saw any security problems. I even thought I will never see one. But I started seeing a couple about Cross-Site Scripting in HTML tag. I went to their dashboard, clicked on reproduce the attack, it took me to my website, with a search performed, the search query was autocompleted, as expected, but a tag was also injected in the search field:

<input type=​"text" 
  class=​"search banner-search" 
  name=​"query" size=​"17" maxlength=​"30" 
  placeholder=​"Search..." 
  value=​"tinfoil_yGU31" 
  tinfoil_xss_in_tag=​"fa1a65120bd41529ad60271db0cef24aab4a57c3">​

At first, I tried to find a solution for the ruby approach. It seemed the bug and the solution were pretty simple:

<input type="text" class="search banner-search" 
  name="query" size="20" maxlength="30" 
  placeholder="Search..." 
  value='<%= query_params %>'/>
  // Replace the ' with "?.
  // Try ERB::Utils.html_escape.
  // Try other helpers...

But that didn't work out well, either, for obvious reasons. So I resorted to the jQuery approach I wrote. I also changed the split to be done by query= instead of =, and I'm pretty sure other edge cases are still possible, but I can't find a better approach for now.