Feature User-Defined Stylesheet

[beldur]

Right now Mafia has a stylesheet it uses in the relay browser, it's relay/basics.1.css. If a user overwrites the basics.1.css with their own stylesheet, they can apply their own styles to the relay browser.

I'm requesting that users can designate their own stylesheet stored in the relay folder to use in place of basics.1.css with a preference like customStylesheet. Also maybe placing a file selector (a la the selectors in the Automation section of Mafia preferences) in Look & Feel > Relay Browser.

My intended use case is a stylesheet for a KoL "dark mode", I attached a little example whipped up by replacing basics.1.css.

 

[ckb]

The beauty of css is that is is cascading! No need to replace basics.1.css, we just need to write in an addition (like custom.1.css or something). That way a user can add whatever they want and it will supersede any css in basics.
(FWIW we did this for ChIT long ago so we could allow users to add a custom css without needing to change the default)

 

[MCroft]

so, a per-user property that holds a filename for a CSS file (must be file Extension CSS, must be in relay) and if that property is set, then add a line to include that CSS. With some checks to make sure that it's not a filename that will cause problems and would we check the CSS for css code injection or other concerns?

I mean we're letting them put in scripts; CSS injection seems like too much work, but it's still a thing we should avoid.

 

[beldur]

If CSS injection is a thing Mafia would want to protect against, it might already be worth pursuing. A bad actor could just include a basics.1.css in their github repo and it would overwrite the mafia default when checked out.

 

[ckb]

Would this need to be a per-user property?
If you just add a feature that includes a customMafiaRelay.css, then a user can add whatever they want to that, or not. No property needed, no need for a filename lookup.

 

[Ryo_Sangnoir]

Is there a reason this benefits from being a Mafia feature instead of, say, inviting potential users to install something like Stylus and a custom stylesheet?

If we are making it a Mafia feature, I'd probably rather do something like designating `relay/css` to be a special folder for scripts, and anything inside that folder gets applied to every page. I expect people may want to run multiple stylesheets, and there's no point locking that out of our design.

I don't think CSS injection is a concern, as we already (and will continue to) allow script writers to replace a relay page wholesale, which allows them to do much worse things.

 

[MCroft]

If CSS injection is a thing Mafia would want to protect against, it might already be worth pursuing. A bad actor could just include a basics.1.css in their github repo and it would overwrite the mafia default when checked out.

recent OWASP training at work tells me it is, but I agree with @Ryo_Sangnoir (and myself above) that scripting already allows this.

WSTG - v4.1 | OWASP Foundation

WSTG - v4.1 on the main website for The OWASP Foundation. OWASP is a nonprofit foundation that works to improve the security of software.

owasp.org

 

[infopowerbroker]

I've been thinking about this as well the past few weeks, and how scripts could use dark mode using

@media (prefers-color-scheme: dark) {

but that would likely need a 'base layer' of dark mode available in basic.1.css, (to which scripts could add on to).

I have no idea what the big picture problems would be with implementing this, but it is a "nice to have", if possible.