[ARCHIVED] Is there also a CSS whitelist?

[ddumonde]

I have a div creating a box around some content on a page: 

<div style="margin: 0.5em; padding: 1em; border: 1px solid lightgray;">

I'm attempting to add a shadow to the div using inline CSS:

box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

When I preview it in the editor, the shadow appears.

When I save the page, the shadow disappears, along with the inline CSS box-shadow statement.

Is there a CSS whitelist?

[tdw]

Hi  @ddumonde ‌,

is the rule being removed or does it simply have a lower specificity than the styles applied by Canvas?

[ddumonde]

Hi Danny

It is inline CSS on a div as shown above. What I want is:

   <div style="margin: 0.5em; padding: 1em; border: 1px solid lightgray; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);">

When I enter that in the HTML, the box-shadow shows in the editor preview.

When I save, the box-shadow is stripped out of the CSS.

Since it's inline, specificity shouldn't be a problem. The problem is that on save, the box-shadow is stripped out of the inline CSS completely.

[James · Accepted solution]

 @ddumonde  

There is a CSS Whitelist; it's included as part of the Canvas HTML Editor Allowlist. It includes HTML tags, MathML tags, attributes on HTML elements, and style properties that are allowed. Others are disallowed.

At the very bottom is a list of allowed style properties. Box-shadow is not allowed.

The old Rich Content Editor normally does a good job of stripping out values that are not allowed. I haven't played with the new Rich Content Editor yet.  Either way, the content is sanitized on the server end when the content is uploaded to Canvas.

If you need box shadows or CSS that is not allowed, then you will need to partner with your local Canvas Admin to create CSS classes that you can use.

[bturek]

@James, thanks for providing the link to the whitelist—unfortunately it's broken! 😭

Any idea where we could find it now?

[bturek]

Hey @James , I found it! Looks like it was unfortunately broken in a renaming effort. Now it's: https://tr-learncanvas.s3.amazonaws.com/docs/Canvas_HTML_Editor_Allowlist.pdf 

Who can we talk to to get a hardlink in place at the old address? Fixing the many broken references to that document seems like a worthy endeavor.