Page MenuHomePhabricator

CSS code causes messes generated HTML markup
Closed, DuplicatePublic

Description

In trying to style some template, I used some wiki+HTML+CSS code that implements the CSS3 "border-image" property. The wikicode snippet follows:

<div style="width: 400px; border: 20px solid green; border-image: url(https://openclipart.org/download/290504/Cedar_tiles.svg) 33% round;">
<span style="vertical-align: middle">
[[file:Crystal Clear action bookmark Silver doubt.svg|100px|left]]
</span>
Some text
</div>

This code causes the output HTML to have escapes that effectively disable the code. The output HTML from the previous code is (note the 3rd line):

<h2><span id="Good_CSS.2C_bad_output_HTML"></span><span class="mw-headline" id="Good_CSS,_bad_output_HTML">Good CSS, bad output HTML</span><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=User:%D8%A3%D8%AD%D9%85%D8%AF/testing_css3_image-property&amp;action=edit&amp;section=1" title="Edit section: Good CSS, bad output HTML">edit source</a><span class="mw-editsection-bracket">]</span></span></h2>
<div style="/* insecure input */">
<div class="floatleft"><span style="vertical-align: middle"><a href="/wiki/File:Crystal_Clear_action_bookmark_Silver_doubt.svg" class="image"><img alt="Crystal Clear action bookmark Silver doubt.svg" src="//upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Crystal_Clear_action_bookmark_Silver_doubt.svg/100px-Crystal_Clear_action_bookmark_Silver_doubt.svg.png" width="100" height="100" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Crystal_Clear_action_bookmark_Silver_doubt.svg/150px-Crystal_Clear_action_bookmark_Silver_doubt.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Crystal_Clear_action_bookmark_Silver_doubt.svg/200px-Crystal_Clear_action_bookmark_Silver_doubt.svg.png 2x" data-file-width="128" data-file-height="128" /></a></span></div>
<p>Some text within the frame.</p>
</div>

Obviously sanitisation of CSS takes place.

In test2.wikipedia.org the CSS code is replaced with "/* insecure input */", but in my wiki v.1.26.3, the HTML is silently escaped, making it ineffective. This happens even when the URL of the border-image is a path relative to the local wiki, which is contrary to my understanding of how sanitisation currently works.

Besides, One wouldn't expect this to be the case, since this is a normal wiki page, thus not of the sanitized-css model. Or is it?

I expect the case to be the same if I resort to using Extension:TemplateStyles since it affirmatively sanitises CSS.

Event Timeline

ahmad created this task.Nov 16 2017, 7:48 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 16 2017, 7:48 PM
Anomie edited projects, added MediaWiki-Parser; removed css-sanitizer.
Anomie added a subscriber: Anomie.

This has nothing to do with the css-sanitizer library, nor with TemplateStyles.

You're getting <div style="/* insecure input */"> because MediaWiki's built-in Sanitizer class, specifically Sanitizer::checkCss(), rejects any inline style rule that uses url(). It doesn't check the supplied URL at all, anything using the url() CSS function is disallowed. It doesn't try to preserve any of the rest of the inline style rule in such a situation, it just removes the whole thing.

I have no idea about your 1.26.3 installation. Note MediaWiki 1.26.3 has not been supported for two years, you really should upgrade.