Allow a certain style attribute in HTMLPurifier (for Canva iframe and others)

[Nathan Nguyen]

We have embed code generated by Canva
However, Htmlpurifier removes 'style' attribute on iframe and hence the embed content is not displayed properly.

I am looking to add 'style' as allowed attribute for iframe, but it may have some security implication, refer https://bugs.launchpad.net/mahara/+bug/1843154

There is another option, that is using 'class', but it will require user to change the embed code.

Example embed code
<div style="position: relative; width: 100%; height: 0; padding-top: 56.2500%;
 padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;
 border-radius: 8px; will-change: transform;">
  <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;"
    src="https://sourceurl" allowfullscreen="allowfullscreen" allow="fullscreen">
  </iframe>
</div>

[Kristina Hoeppner (kris-hoeppner)]

Using the class option wouldn't be great because we can't expect that learners add a class in HTML. Therefore, using 'style' would be better. Maybe we'd need to restrict what the style element could be so as not to allow others that are not secure. The related report bug 1843154 may give some idea of how other attributes were limited.

[Nathan Nguyen (nathannguyen-catalyst)]

Hi Kristina,

I have created a patch:

https://github.com/tuanngocnguyen/mahara/compare/main...tuanngocnguyen:mahara:bug_1992702-main

I have tried "git clone git://reviews.mahara.org/git/mahara", but got time out issue. Since I am not familiar with the review process, I attach the patch here for review. It would also great if you (or someone else) can help me with the review.

[Nathan Nguyen (nathannguyen-catalyst)]

The patch includes 2 commits:

1: Add 'style' as allowed attribute for iframe
2: Allow position styles: position, left, right

[Mahara Bot (dev-mahara)]

Patch for "main" branch: https://reviews.mahara.org/c/mahara/+/13229

[Mahara Bot (dev-mahara)]

Patch for "main" branch: https://reviews.mahara.org/c/mahara/+/13230

[Mahara Bot (dev-mahara)]

Reviewed: https://reviews.mahara.org/c/mahara/+/13229
Committed: https://git.mahara.org/mahara/mahara/commit/3611d15a8d3704508e858059ccd347a06ba6a2ed
Submitter: "Robert Lyon <email address hidden>"
Branch: main

commit 3611d15a8d3704508e858059ccd347a06ba6a2ed
Author: Nathan Nguyen <email address hidden>
Date: Thu Oct 13 14:22:36 2022 +1100

Bug#1992702 add style as allowed attribute for iframe

HTML purifier remove style attribute from iframe.
Some embed contents (such as those generated from Canva) require 'style' so that they can be displayed properly

Change-Id: Ie66616d8a17177f342389165954e13015d1dd26b

[Mahara Bot (dev-mahara)]

Reviewed: https://reviews.mahara.org/c/mahara/+/13230
Committed: https://git.mahara.org/mahara/mahara/commit/07581d499779c0e6f03a521ddf09c9531d416d19
Submitter: "Robert Lyon <email address hidden>"
Branch: main

commit 07581d499779c0e6f03a521ddf09c9531d416d19
Author: Nathan Nguyen <email address hidden>
Date: Thu Oct 13 15:00:13 2022 +1100

Bug#1992702 enable css.trusted: position, left, right, top, bottom, z-index

Html purifier remove these in 'style' attribute.
We will need it so that embeded content can be displayed properly

Change-Id: I1bd07fb42bebbd33f9924d2f4986c1f975933483