cancel
Showing results for 
Search instead for 
Did you mean: 
ddumonde
Community Participant

Is there also a CSS whitelist?

Jump to solution

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?

1 Solution

Accepted Solutions
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

5 Replies
dwahl_sales
Instructure
Instructure

Hi  @ddumonde ‌,

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

ddumonde
Community Participant

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

bturek
Community Member

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

Any idea where we could find it now?

bturek_0-1603990798455.png

 

bturek
Community Member

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.