Closed Ste35 closed 7 months ago
Hey there, thanks for filing this. The demo hook is quite old and not actively maintained. But I had a look and indeed, now the style names do no longer match because if the reasons you described.
I suppose we can convert kebab-case to camelCase and than convert it back, do you have any suggestion?
This appears to be the right way to do, yes.
This should, while likely this can be done more elegantly, kind of already do the trick, no? :sweat_smile:
if(styles[prop] && typeof styles[prop] === 'string'){
var normalizedProp = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
if(allowed_properties.indexOf(normalizedProp) > -1) {
if(allow_css_functions || !/\w+\(/.test(styles[prop])) {
output.push(normalizedProp + ':' + styles[prop] +';');
}
}
}
Or this, which uses JavaScript which is a bit less dusty :slightly_smiling_face:
function validateStyles(output, styles) {
Object.keys(styles).forEach(prop => {
const value = styles[prop];
if (value && typeof value === 'string') {
const normalizedProp = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
if (allowed_properties.includes(normalizedProp) &&
(allow_css_functions || !/\w+\(/.test(value))) {
output.push(`${normalizedProp}:${value};`);
}
}
});
}
Yes, now it seems to work, thank you!
Nice, closing this one then via https://github.com/cure53/DOMPurify/commit/84980c3504b7571e2fcbbbdd8f4f644b532d3992 :slightly_smiling_face:
Hi! I'd like to ask a question abound the Sanitize Css Hook for sanitizing elements' inline css, such as:
I tested on Chrome 120, Windows 10.
Background & Context
I've downloaded the html page and tried to sanitize the above string, without changing the
allowed_properties
(so with thefont-family
property in list). I was expecting thecolor
andfont-family
properties to be kept, while thebackground-color
property to be stripped, but onlycolor
was kept. I also tried addingbackground-color
to theallowed_properties
list, but it was stripped again (same asfont-family
). I suppose the issue is that in this functionwhen a property contains a
-
,prop
is camelCase and not kebab-case (so we havefontFamily
andbackgroundColor
). If I addfontFamily
to theallowed_properties
, thanfont-family
will be kept, but the result is:that is not accepted by the browser.
Bug
Input
Given output
Expected output
Feature
I suppose we can convert kebab-case to camelCase and than convert it back, do you have any suggestion?
Thank you!