Hi, I was reading <a href="https://www.npmjs.com/package/xss" rel="n

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

I did it like this: <div class="snippet-clipboard-content notranslate position-rel

Problem whitelisting CSS about js-xss HOT 6 CLOSED

leizongmin commented on July 17, 2024

Problem whitelisting CSS

from js-xss.

Comments (6)

leizongmin commented on July 17, 2024 1

This is because the style attribute is not allow in the default whiteList. So you need to add the style attributes to your custom whitelist first.

const xss = require('xss');

// get a copy of default whiteList
const whiteList = xss.getDefaultWhiteList();

// allow style attribute for td tag
whiteList.td.push('style');

// specified you custom whiteList
const myxss = new xss.FilterXSS({
  whiteList,
  css: false,
});

// do what you want
html = myxss.process(innerText);
console.log(html);

from js-xss.

lwr commented on July 17, 2024 1

@leizongmin I don't think it is the common case, I believe mosts people only want keep inline styles but not leave all of them not filtered

from js-xss.

Gabxi commented on July 17, 2024

Thanks that did the trick!,

sorry to add, but is there a way to specify attr with valid values like class can only be set to certain values?

from js-xss.

lwr commented on July 17, 2024

why you suggest using {css:false} ? It means just leave nearly all risk passthrough.

myxss = new xss.FilterXSS({css:false,whiteList})
myxss.process('<div style="color:red;background:url(java/**/script:alert(1)">TEST</div>')

// unexpected
// output: '<div style="color:red;background:url(java/**/script:alert(1)">TEST</div>'

myxss = new xss.FilterXSS({whiteList})
myxss.process('<div style="color:red;background:url(java/**/script:alert(1)">TEST</div>')

// expected
// output: '<div style="color:red;">TEST</div>'

from js-xss.

leizongmin commented on July 17, 2024

@lwr This is because some people didn't want to filter the style attribute for some reasons.

from js-xss.

lemoustachiste commented on July 17, 2024

I did it like this:

function handleTagAttr (tag, name, value, isWhiteAttr) {
  if (name === 'style') {
    return `${name}="${cssfilter(value)}"`;
  }
}

const options = {
  whiteList: modifyWhiteList(),
  css: false,
  stripIgnoreTagBody: true,
  onTagAttr: handleTagAttr
};
const sanitizer = new xss.FilterXSS(options);

from js-xss.

Recommend Projects