Adding HTML classes in posts doesn't appear to work

Support
1

I am trying to add an adaptive grid to our discourse site. In my custom CSS I have:

.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 1000px;
  margin-left: -5px;
  margin-right: -5px;
}

.grid-item {
  max-width: 160px;
  margin-bottom: 20px;
  margin-left: 5px;
  margin-right: 5px;
}

.grid-item img {
  width: 100%;
}

I have a post on our forum here: http://discuss.affectiva.com/t/face-metrics-in-the-emotion-sdk/51 that has the following:

<div class="grid">
  <div class="grid-item">
    <img src="/uploads/affectiva/original/1X/3532685ede3eaf46d50d77d6f545211c56192cc0.jpg" alt="" />
    <p class="thicker">Anger</p>
  </div>

However, the CSS doesn’t seem to take effect. In fact, when I look at the source to the page when I load it, I see that the class=“grid” and class=“grid-item” attributes are gone.

Is discourse stripping the class attributes? If so, can I prevent this from happening?

1 Like
2

Yes it is. Most HTML in a post is sanitized for security reasons - you wouldn’t want arbitrary scripts to be executed.

You’ll need to whitelist the classes you wish to use. I’d suggest a close reading of this topic, it should help you out:
https://meta.discourse.org/t/whitelisting-some-html-tags/24280?u=jomaxro

3 Likes
3

Thanks for the reply. This makes sense, and it appears I need to add a specific file with JavaScript indicating what to whitelist.

The only question I have left is how do I access the file system to create this file? We are not hosting our own discourse site, but are paying discourse to host it for us.

4

Only very strict whitelisted HTML is allowed in Markdown. Adding arbitrary classes would be a security disaster.

2 Likes
5

I understand. But if I am able to control the CSS, as I am in this case, it should be quite safe, no? I am still unsure how to add this whitelist file. We’re paying discourse for hosting. Surely we can get access to our underlying file system?

6

To add classes to the white-list you must use a plugin, the sanitization happens server side as well as client side. Custom plugins are an enterprise only feature for us.

If we allow arbitrary classes through all sorts of very strange things can be done by users, like creating a post with “animating and spinning” words, shifting text to a post that is not owned by the user or fixing text on the screen.

Our enterprise customers have the ability to deploy custom plugins. We do not give any customers the ability to directly SSH into running instances.

4 Likes
7

Thanks for the clarification. We decided to move that particular page to another site.