Allow CSS variables in inline styles

[apottere]

It doesn't look like there's any way to configure the HTML sanitizer to allow css variables in inline styles.

Given the following policy:

    HtmlSanitizer.Policy policy = new HtmlPolicyBuilder()
        .allowStyling()
        .allowElements("div")
        .build(renderer);

And the following markup:

<div style="color: var(--text-inactive); padding-left: 10px;"></div>

The result is:

<div style="padding-left:10px"></div>

Looking at CssSchema, it doesn't seem like there's even a way to create a policy that allows variables - I tried adding the following snippets:

    ImmutableMap<String, String> mozOutlineFunctions = ImmutableMap.of("rgb(", "rgb()", "rgba(", "rgba()", "var(", "var()");

    ...

    builder.put("var()", new Property(BIT_UNRESERVED_WORD | BIT_STRING, ImmutableSet.<String>of(), zeroFns));

    ...

    "unicode-bidi",
    "var()",
    "vertical-align",

But the variable ended up quoted:

<div style="color:var( &#39;--text-inactive&#39; );padding-left:10px"></div>

[mikesamuel]

Why do you have BIT_STRING in there?

[apottere]

@mikesamuel because I have no idea what I'm doing. I tried a bunch of different things that didn't seem to work, though. Is there a way to do it with the existing code?

[mikesamuel]

No. CssSchema is not really extensible as written.

[apottere]

Ok, that's what it seemed like.

[mikesamuel]

Yeah. @apottere The problem is organizational more than technical.

I try to avoid implementing footguns, and have not found a way to allow a highly tuneable definition of "safe CSS" that people outside the CSSWG could reliably use.

HTML is complex but has a reasonably manageable set of tags and attributes, so cautious web designers or developers can probably avoid crafting weak policies by sticking to what they know. CSS is a much larger, more complicated language, and even seasoned security people get surprised at what you can do with it.