28 October 2021, 3:45

I was adding CSS to a Skin, but it gets cleaned up somehow. Why and how do I disable this?

I was trying to add this:

h1#viewh1>span.subsection-heading {
    text-shadow: 0 0 3px #000, -1px -1px #000, 1px 1px #000;
    text-align: center;
    font-weight: 900;
    text-transform: uppercase;
    background-color: #0000005c;
    border-radius: 10px;
    padding: .3em;
}

h1#viewh1 {
    color: #fff;
    text-align: center;
}

But it's not allowed. Some CSS is allowed, but for example the text-shadow is not allowed. I would really like to disable all this as I want to use CSS to create skins.

28 October 2021, 10:03

Hi Richard,

The rules around what stays and what is stripped from the css is based on the clean_css() function in Mahara https://git.mahara.org/mahara/mahara/-/blob/main/htdocs/lib/web.php#L4007

The Skins "Custom css" section is sanitized by that function at this point https://git.mahara.org/mahara/mahara/-/blob/main/htdocs/skin/design.php#L540

If you are wanting more css to be allowed you can either adjust the rules or stop the custom css from being sanitized.

Note: both will create risks that someone can make a skin with things like opacity / css positioning that can be used to trick someone on clicking on something like a nefarious external link hidden behind something innocent.

Cheers

Robert

29 October 2021, 2:32

Thanks, great info! I now know how to disable it completely, but do you know where you can adjust the rules?

29 October 2021, 12:38

Hi Richard,

Here is a patch that was just released in the 21.10.0 release -> https://reviews.mahara.org/#/c/11547/

It shows how you can adjust some of the rules

And the list of rules can be seen at http://htmlpurifier.org/live/configdoc/plain.html

Cheers

Robert

01 November 2021, 22:19

The HTML purifier-docs are horrible, can not find where to edit the filter.

So I removed the entire filter by commenting out Line 540 on designer.php

Now this happens: the CSS is no longer being filtered. It saves fine. But... it is not being applied on the page that uses the skin.

So the filter is probably somewhere else to? 

Damn, it's hard to style these pages.

01 November 2021, 22:22

Is this also a problem?

https://git.mahara.org/mahara/mahara/-/blob/main/htdocs/skin/import.php#L172

Is CSS cleaned twice or even more times?

03 November 2021, 11:07

Hi Richard,

There are two places the code gets cleaned via clean_css - one is when a skin is imported and the other when a skin is saved on editing.

However there is also the htdocs/theme/raw/templates/skin/style.tpl

Where the custom css is meant to be added to the page

/* advanced: custom css */

{$view_custom_css|safe}

And then called into the page via an HTML markup line like

<link rel="stylesheet" type="text/css" href="[your site]/skin/style.php?skin=1&amp;skinversion=20211103110441&amp;view=10&amp;v=2067">

So you can check those as to why the css is not turning up

Cheers

Robert

06 November 2021, 1:12

This is truly driving me nuts Robert, I can't find where to enable my CSS.

So {$view_custom_css|safe} is in my htdocs/theme/raw/templates/skin/style.tpl. That's OK.

But where do I find this line? <link rel="stylesheet" type="text/css" href="[your site]/skin/style.php?skin=1&amp;skinversion=20211103110441&amp;view=10&amp;v=2067">

It's not in that file is it? Should it be?

I also found this file in /home/portfolio/public_html/lib/htmlpurifier/HTMLPurifier/ConfigSchema/schema called CSS.AllowedProperties.txt

But it looks like this:

CSS.AllowedProperties
TYPE: lookup/null
VERSION: 3.1.0
DEFAULT: NULL
--DESCRIPTION--

<p>
    If HTML Purifier's style attributes set is unsatisfactory for your needs,
    you can overload it with your own list of tags to allow.  Note that this
    method is subtractive: it does its job by taking away from HTML Purifier
    usual feature set, so you cannot add an attribute that HTML Purifier never
    supported in the first place.
</p>
<p>
    <strong>Warning:</strong> If another directive conflicts with the
    elements here, <em>that</em> directive will win and override.
</p>
--# vim: et sw=4 sts=4

How to add codes there? The documentation on HTMLPurifier is horrible, there's not one example of how this should be used.

Hope you can help me. To add some simple CSS to a Skin has cost me many hours so far. It should not be this difficult.

12 November 2021, 7:46

Hi Robert,

We are good to go with templates here, but the CSS is still not working.

Do you have any other clues? I just want to know how to add one CSS statement, then the rest I will be able to figure out.

I tried to add this to css.allowedpropoerties.txt:

CSS.AllowedProperties
TYPE: lookup/null
VERSION: 3.1.0
DEFAULT: NULL
--DESCRIPTION--

<p>
    If HTML Purifier's style attributes set is unsatisfactory for your needs,
    you can overload it with your own list of tags to allow.  Note that this
    method is subtractive: it does its job by taking away from HTML Purifier
    usual feature set, so you cannot add an attribute that HTML Purifier never
    supported in the first place.
</p>
$config->set('CSS.AllowedProperties', 'text-shadow');
<p>
    <strong>Warning:</strong> If another directive conflicts with the
    elements here, <em>that</em> directive will win and override.
</p>
--# vim: et sw=4 sts=4

This doesn't work.

I tried adding code to cssdefinition.php... but also couldn't get it to work.

How can this be so difficult to add ONE allowed CSS statement to a skin in Mahara?

12 November 2021, 10:25

Hi Richard,

One thing to note - the underlying htmlpurifier code caches the definition structure so if you add any new rules they won't be in play until you clear the cache via the 'Clear caches' button on the Admin home -> Overview screen

Cheers

Robert