Wappler sanitation to prevent XSS

[rapsac2010]

Dear all,

I am developing a website with wappler and had my cybersecurity friend have a look and doing a small pen test.
He was concerned regarding the possibility of cross-site scripting attacks. He was able to insert the tag <img src=x onerror="alert('XSS')"> in a form which then gets executed as the database field resulting from the form is rendered back to the user on the page.

I have been trying a lot with node.js html sanitation but I do not seem to have success when considering server connect forms.

sanitizeInput.js:

// middleware/sanitizeInput.js
const sanitizeHtml = require('sanitize-html');

const sanitizeInput = (req, res, next) => {
  const sanitize = (obj) => {
    for (const key in obj) {
      if (typeof obj[key] === 'object') {
        sanitize(obj[key]);
      } else if (typeof obj[key] === 'string') {
        const original = obj[key];
        obj[key] = sanitizeHtml(obj[key], {
          allowedTags: [], // Remove all tags
          allowedAttributes: {} // Remove all attributes
        });
        console.log(`Original: ${original}`);
        console.log(`Sanitized: ${obj[key]}`);
      }
    }
  };

  console.log('Sanitizing body:', req.body);
  sanitize(req.body);
  console.log('Sanitizing query:', req.query);
  sanitize(req.query);
  console.log('Sanitizing params:', req.params);
  sanitize(req.params);

  next();
};

module.exports = sanitizeInput;

And in server.js:

app.use(sanitizeInput);

This seems to work for general queries to the app, but not on form submissions.
This causes the code to be executed after putting this tag in a form, writing the input to the database (postgres) and displaying the field to the user after a query:

Has anyone dealt with this already? I could only find:

How secure is Wappler?

I have a client I want to pitch tomorrow. I know they will ask to compare to other CMS like Craft CMS. How secure is the CMS and data against cross scripting, sql injection and other attack’s? I have been looking but found nothing on it. Thanks in advance.

In which George is very confident but it seems that this might be incorrect as per my findings. Curious about what you guys think!

[ben]

Have a look at

Using CSRF Tokens

Intro Cross-Site Request Forgery (CSRF) is a security vulnerability where an attacker tricks a user into performing unwanted actions on a web application. CSRF tokens help prevent this by adding a unique, unpredictable value to web forms, which the server validates upon form submission. In this tutorial, you'll learn how to implement CSRF protection in your web applications using Wappler. NOTE: CSRF tokens are currently only available for NodeJS Server Side The first thing we need to do is …

[Cheese]

Rule of thumb for any form inputs. Validate the inputs of ALL form inputs on the server side and ALWAYS implement a strict Content Security Policy. This should be rule 101 for ALL web application developers.

[Apple]

@rapsac2010

which then gets executed as the database field resulting from the form is rendered back to the user on the page

Please show the HTML code of your database field rendering, I'm not aware this is possible unless you use dmx-html attribute. Regular text injection should be secure against XSS, you can use dmx-text attribute or {{ field }} expression directly in HTML

@Cheese

ALWAYS implement a strict Content Security Policy

You can teach me this one!

[franse]

@Apple

I'm not aware this is possible unless you use dmx-html attribute

Was thinking the same...

Also:

Sanitize HTML Server Connect Module - 1.0.2

This is the first of a few extensions I plan on publishing over the next few months as I work on a rather large project. This extension is rather simple, and implements the Sanitize-HTML package into Wappler. sanitize-html is tolerant. It is well suited for cleaning up HTML fragments such as those created by CKEditor and other rich text editors. It is especially handy for removing unwanted CSS when copying and pasting from Word. sanitize-html allows you to specify the tags you want to permit,…

[Cheese]

@Apple

You can teach me this one!

We use this CSP Generator @Apple

A lot of back and fourth (testing everything still works) but it does explain each value reasonably well. I point out the importance of Content Security Policy strictness above as it is very often overlooked, much the same as server side validation of inputs (even for the most mundane of purposes).

[sid]

@rapsac2010

form which then gets executed as the database field resulting from the form is rendered back to the user on the page

I didn't quite understand the problem here to be honest. What is executed and what is rendered?

[sid]

I had the same question as Apple - what is CSP!
Thanks for the link.

Reading up a bit on it here - Content Security Policy (CSP) - HTTP | MDN - I see that it either needs to be set in the RESPONSE HEADER from server, or as META tag on client side.

How have you configured this on Wappler, if you don't mind sharing?

[rapsac2010]

This was the main culprit for the error as described! Thank you, such an oversight from my side. I am going to look into the other issues everybody raised today. Thanks for all the fast replies, this is my first forum post and I am impressed by the quality and speed of all your replies guys

[Cheese]

@sid

How have you configured this on Wappler, if you don't mind sharing?

We use Cloudflare for all our response header configuration. We have also used straight forward META tags within our Layout pages previously, and within the pages themselves way back in PHP. It is not difficult. Can be a little frustrating for about half hour as you build your policy as do need check all is still working correctly. Depending on how complex you select to go will take a little longer obviously. I'd stick to scripts and images to start and get the basics working. I'd also highly recommend Cloudflare to anybody as @TMR can testify. Rare to get something for free these days and what they offer even at the entry tier we would happily pay for if we had to do so.

I'd also like to praise the team for the recent Rate Limiting abilities! Superb addition!!

[sid]

@Cheese

We use Cloudflare for all our response header configuration.

We have recently started using Cloudflare for our dev servers.. for reduced latency and reliability. Is there a CSP configuration option on Cloudflare we have to configure, or is it already enabled by default?

@Cheese

Rare to get something for free these days and what they offer even at the entry tier we would happily pay for if we had to do so.

[Cheese]

@sid

Is there a CSP configuration option on Cloudflare we have to configure, or is it already enabled by default?

Not as such on the free plan but you can set all request/response headers. Select Rules from the menu on the left, then Transform Rules:

Here you can set your headers (up to ten rules on the free plan):

Cloudflares CSP documentation is here (pay attention to Product Requirements at the bottom of the page if you make use of those services):

Content Security Policies (CSPs) and Cloudflare · Cloudflare Fundamentals docs

Response documentation is here:

HTTP response header modification rules · Cloudflare Rules docs

Really is worth updating to the Business Plan! Far more control and more advanced WAF protection for XSS based attacks.

Business Plan Overview