Category: JS Objects
Resource links
Updated

How to Sanitize Input for Safe Use Across Pages

Issue

We are developing an app that needs to collect and parse data across pages like this:

  1. We take the input on page 1 in a large text input box and save it to a database.
  2. This is loaded on a different page by a different user and used to generate an HTML report.
  3. The report is saved elsewhere and that is opened in a new user tab.

While we assume all of our input will be secure, there exists the potential for a user to put a <script> in it, which could be evaluated in a new tab in step 3. Is there a good way to sanitize this input for safe use across pages, especially with integration with other systems?

Resolution

No problem! The best way to deal with this is to use a custom library to sanitize the data both when saving to the database and when generating reports with them. There are a few options out there, but we would suggest using filterXSS in the XSS module. This will let you safely clean the input both before and after retrieval to be safe.

So, just add XSS as a custom library, and them you can use it in your app!

  1. Include the filterXSS library as a custom library, using the library URL:

    https://cdn.jsdelivr.net/npm/xss@1.0.14/dist/xss.min.js

    Have you never used a custom library in Appsmith? No problem, here is how to do this.

  2. Before saving user input text, or before doing anything with user input, call the filterXSS function on it. This will escape all the special characters in the text and prevent potential XSS.

    // Instead of this
{{ Input1.text }}

// Do this
{{ filterXSS(Input1.text) }}
  3. Additionally, when we fetch the data for report generation, we pass the results from the query through filterXSS before generating the HTML report.

Without knowing the specifics, I'd recommend doing both #2 and #3. This is because if for any reason there’s another source inserting data into your database, that may or may not have been properly sanitized. So, sanitizing the text before we use it in the HTML report is ideal coverage for any unknown vectors..