How to whitelist tag attributes in xss validator? (Error in docs)

[MickL]

How can I whitelist tag attributes in the xss validator? The docs say:

{ 'tagName': 'attr-1', 'attr-2' }

But this would be invalid TypeScript. I guess you meant to use an array?

{ 'tagName': ['attr-1', 'attr-2'] }

If yes then it doesnt work for me: whiteList: { a: ['href', 'target', 'rel'] }. I can whitelist tags like strong but I cant whitelist a tag with attributes. Maybe it is a bug also.

[Baroshem]

Hey Buddy,

Thanks for reporting this issue. The XSS validator uses the xss js package so it could be the upstream issue. As you suggest, I think there is also an issue in the documentation that dhoukd be fixed.

[MickL]

Can you reproduce? Maybe it is an upstream issue, it doesnt work like this: whiteList: { strong, a: ['href', 'target', 'rel'] } -> Usage of <strong> is ok, <a href="#">abc</a> not.

Maybe because the json arrives like this? <a href=\"#\">abc</a>

Also this xss validation things are very very hard to debug because there is no console log output why a request has been blocked.

[Baroshem]

Yes, I can reproduce and I think it is related with #206

When I passed this string with yours whitelist xss validation configuration I got:

{ text: '<a href="' }

I think the issue is not related with whitelisting not working but rather with the fact that underlying package escapes the > character which results in an error for you.

Would you be interested in contributing to the project with a PoC of something that could fix this problem? :)

[MickL]

Unfortunately I dont have the time and probably also the insights :(

[Baroshem]

Ok, I will take a look at it in the upcoming days to see if I can fix it somehow

[JamieCurnow]

This happened to me also. It was because I was sending up the HTML in an object which was being JSON.stringified to send up to the server endpoint. That meant that the tag attributes in the html content with double quotes were being escaped:

So for example, this was being parsed by the xss parser:

{"note":"<p><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"text-blue underline\" href=\"http://www.google.com/\">www.google.com</a></p>"}

And the processed output ended up being:

{"note":"<p><a target="\&quot;_blank\&quot;" rel="\&quot;noopener" noreferrer class="\&quot;text-blue" href>www.google.com</a></p>"}

(notice the extra \" in all of the attr values once processed.) That's something to do with how the underlying xss library functions.

I'm not sure how you'd fix this.... But to get around it, we have:

1. Changed all of the attr properties that we send up to server to have single quotes so it becomes for example:

{"note":"<p><a target='_blank' rel='noopener noreferrer nofollow' class='text-blue underline' href='http://www.google.com/'>www.google.com</a></p>"}

2. Added the nuxt config option in security.xssValidator.singleQuotedAttributeValue to be true. This is not in the types of this package, so you have to ts ignore it. But it does seem to get passed through to the underlying xss package.

  xssValidator: {
      whiteList: {
        p: [],
        a: ['href', 'target', 'rel', 'class']
      },
      // @ts-ignore - this is a valid option in xss. See here: https://www.npmjs.com/package/xss#customize-output-attribute-value-syntax-for-html
      singleQuotedAttributeValue: true
    }
  }

Kudos to @Logannford for helping with this 🙌