Allow custom styling for consent banner

[m90]

Right now the consent banner is styled one-size-fits-all. While we try to keep it low-impact for most designs, this surely hurts adoption in cases where a unified UX is important for operators.

While it's technically trivial to allow operators to inject custom CSS into the iframe element that displays the banner, this also comes with some pitfalls and requirements:

• Operators should not be able to alter the content in the banner (i.e. change wording to be misleading or hide certain elements)
• The default a11y and privacy standards must be preserved in any case

Approach: allowing operators to define custom CSS per account

Semantic classes are applied to the markup that displays the consent banner. Operators can now add custom CSS for each account which the server will add (in addition to the predefined styles) to each vault response. In order to prevent operators from creating a misleading consent banner the following sanitzation rules are applied to the CSS before saving:

• no pseudo content
• no hiding of elements
• no opacity rules

Pros

• Allows operators to apply fine grained styling that matches virtually any site design
• Technically simple to implement

Cons

• Sanitizing CSS will help, but it will not close all loopholes for malicious use ever (then again, forking Offen is a lot easier and gives you all options)
• Does not offer a middle ground for non-technically savvy users that don't want to / cannot write CSS but still want to customize their banner's appearace

[m90]

@TommasoAmici @DavidBernal you are 👀 ing this issue so I am getting in touch. We are currently building this feature over in #590 and plan to ship it in the next release.

If interested I'd like to solicit your feedback on the following question: as outlined in the issue above we will need to somehow limit the CSS that users of this feature are able to write (i.e. setting display: none on the opt-out button would need to be avoided) or other forms of accidental or willful self-XSS through such a setup (even when allowing users to customiz we'd like to make sure some guarantees about fair consent are still kept intact). While it's technically trivial to add some CSS sanitization we are unsure about how tight we need to make the rules to find a good trade off between safety and flexibility.

If any of you would use this feature and could share your requirements here, we'd be happy to a. have an idea of what you need to do and b. give you a tailor made piece of software ;)

Thank you!

[m90]

As discussed with @hendr-ik in person we would like to start off with the guidelines for sanitizing CSS: we trust the operator who deploys and customizes Offen to keep the consent guarantees intact but aim to prevent attackers (who might hijack a system or similar) from injecting malicious content through CSS.

This means we'll start with the following rules:

1. no loading of external resources (as this would introduce an external tracking vector)
2. No use of content. We want to prevent unwanted messages from showing up or attackers changing content.
3. No use of transparency as this would allow attackers to create an invisible banner and do "clickjacking".

[TommasoAmici]

Hi, I don't have the time to give this much thought from a development point of view in this moment.

From a user point of view I really need simple customizations to make Offen fit in with my designs: border, colors and maybe font family are all I need to touch

[m90]

I don't have the time to give this much thought from a development point of view in this moment.

Your requirements as a user are super helpful and all we need. Thank you.

[ghost]

@m90 I concur with @TommasoAmici. The consent banner currently sticks out like a sore thumb because its yellow color clashes with the dark design theme on my website. All it would take to fix that is the ability to change the color of the different banner elements.

[m90]

@TommasoAmici @whalehub We just merged the PR containing the feature and plan to include it in the next release.

In case you are interested and would like to help us ship a feature that is actually helpful, we'd appreciate any feedback on a test run. To check it out, you can run the development version in demo mode sth like this:

docker pull offen/offen:development
docker run --rm -p 9876:9876  offen/offen:development demo -port 9876

After logging in head to Customize appearance, the documentation link is currently broken because this is not properly released yet, but it would point here https://docs.offen.dev/v/development/running-offen/customizing-consent-banner/

Our primary questions for feedback would be:

• can you achieve what you would like to do visually without too much hair pulling?
• would you need more/less/different documentation to get up and running?

Any other feedback is welcome too of course. Thank you!

[ghost]

@m90 I love how you implemented this feature, what with the preview function and everything - well done! The documentation was more than sufficient for me personally.

Before

After

Edit: The subtle yellow tint is from LightBulb running while I was taking the screenshots.

[TommasoAmici]

Beautiful! The documentation is very good too

[m90]

This now released in v0.4.2. Thanks for all of your feedback 🎩