[ARCHIVED] Is there also a CSS whitelist?

Jump to solution
ddumonde
Community Explorer

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.

div with drop shadow

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

div without drop shadow

Is there a CSS whitelist?

Labels (2)
1 Solution
James
Community Champion

 @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.

View solution in original post