Allow custom styling for consent banner

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

[whalehub]

@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.

[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.