0

I'm using HTML purifier in a wysiwyg editor and inline css rule like "margin-left: calc(25%);" is being removed. If the rule is "margin-left: 25%;" it is not removed, however this rule is set automatically by the editor.

I dont know how config the HTML purifier to not remove the margin if it has a calc function.

If it matters, I'm using Yii2 and \yii\helpers\HtmlPurifier https://www.yiiframework.com/doc/api/2.0/yii-helpers-htmlpurifier that uses HTML Purifier (http://htmlpurifier.org)

I also tried to keep all inline css with following code, but nothing has changed.

    $model->msg_email = \yii\helpers\HtmlPurifier::process($model->msg_email, function ($config) {
        $config->set('CSS.Trusted', true); // allow any css
        $config->set('Filter.ExtractStyleBlocks.TidyImpl', false);
    });

Ps.: I tagged csstidy because could be some config in it.(internally used from HTML Purifier)

Johny
  • 501
  • 5
  • 16
  • 1
    This is just a nudge in the right direction: HTML Purifier has a semantic whitelist for CSS just like it has a semantic whitelist for HTML. Take a look at threads like http://htmlpurifier.org/phorum/read.php?2,6154 if you want to know how to add CSS behaviours (the short answer being that what you're asking is not easy, nor well-documented, unfortunately). – pinkgothic May 13 '19 at 14:53
  • Hi @pinkgothic Thanks for your comment. I had already seen your name in several other posts that helped me when I started using the lib :) In fact I ended up solving it in other way, however another problem came up ... The lib removing whitespaces ... I saw your suggestion about setting 'Core.LexerImpl' to 'DOMLex' but with no results ... So I'm removing this lib from the project. Do you know some alternative that I can use only to prevent xss attacks, no need to verify whitesspaces, syntax, html standards etc ... – Johny May 20 '19 at 03:10
  • 1
    HTML Standards are basically necessary to be XSS safe, due to how complex JavaScript and HTML interactions are, as long as you genuinely want to have functional HTML, which means parsing the HTML, which usually means whitespace (which has no semantic meaning) is not "remembered". So the things you're not directly concerned about do tend to come with the territory, I'm afraid! That said, there are some alternatives listed on htmlpurifier.org itself: http://htmlpurifier.org/comparison - see if that helps you? kses or htmLawed might work for you. – pinkgothic May 20 '19 at 10:57
  • @pinkgothic Yeah, I understand that there are procedures required for the proper functioning of lib, however, for example, removing witespaces turn this 'color: rgb (0, 0, 0)' into this 'color:rgb (0,0,0)', and a inline css rule like this, at least in chrome, does not work. I had seen that list but not sure which lib is 'really' secure, I was hopping you had used some other lib besides htmlpurifier. But I'll see if I can find any reliable solution, thank you. – Johny May 20 '19 at 16:49
  • 1
    Just so you know, the problem with `color:rgb (0,0,0)` is the space after `rgb`, which is already in the original (run both of those strings through a minimalist example on csslint.net to see what I mean, and compare `color:rgb(0,0,0)` (no errors) or `color: rgb(0,0,0)` (also no errors)). Either way, though, good luck! – pinkgothic May 20 '19 at 16:55
  • @pinkgothic I'm writing this only to share my test/solution with you... That space was my fault it does not exist in original string ( so it is `color: rgb(0, 0, 0)` ). I checked that the missing spaces in the rule itself is not the problem but the missing spacing after color: > (`color:rgb...` VS `color: rgb...`). The problem was not in the css rule, I mean, the color will render correctly even with no spaces. But the froala editor has this css rule: `.fr-view span[style~="color:"] a {color: inherit;}` making a link inherit the color from a possible parent span formatter. (continues below) – Johny May 20 '19 at 22:40
  • 1
    This part `style~="color:"` was requiring a space after `color:` to work. Changing to the following rule, made the color link working again `.fr-view span[style*="color:"] a {color: inherit;}` ... thanks :) – Johny May 20 '19 at 22:40
  • 1
    UPDATE, to include only the color property (not background-color, border-color,etc) `.fr-view span[style*=";color:"] a, .fr-view span[style*="; color:"] a, .fr-view span[style^="color:"] a { color: inherit !important; }` – Johny May 20 '19 at 22:56
  • 1
    Oh! That's an interesting find! Thanks for sharing the update! – pinkgothic May 21 '19 at 07:29

0 Answers0