IBM Connections 6.0CR1 Whitelisting, CSS and Wiki TOC

· by Christoph Stoettner · Read in about 5 min · (1013 words)


So up to IBM Connections 6.0 everything was allowed until it was not excluded in one of the blacklist files. This files are stored within the Deployment Manager profile/config/cells/<cellname>/LotusConnections-config/extern.

Now with Connections 6.0CR1 everything is forbidden, until it is enabled in the white-list.

This concept is rolled out for widgets (homepage and communities) and active content. Active content means HTML content too. So everything you or your users add to Connections (blog-posts, wiki pages) gets filtered during the save procedure. This removes all HTML tags and attributes which are not explicitly enabled!

The documentation and a tech-note show how to enable Communities and Homepage widgets. Martin Leyrer wrote a blog post on enabling links to IBM Notes through a custom white-list.

After enabling the custom white-list and enabling notes:// links, I just thought about other topics which are not working as expected in IBM Connections 6.0CR1 and tried to find out if they can be solved with some add-ons to the white-list.

Wikis TOC

2013 I wrote a blog post on customizing the wiki table of contents. This is still a useful feature and the customization and enablement procedure is working in 6.0CR1 too. I think it’s a important topic, because the post is one of the most read articles in this blog. After deploying IBM Connections 6.0CR1 the automatic update of the TOC is not working anymore. First of all we checked the JavaScript which is used to add the TOC, but the initial creation of a TOC was working, just updating after editing a page not.

I created a wiki page, added some headings and a TOC. With the source/html view of the editor we see a div with name="intInfo".

<div style="border-radius: 6px; margin: 8px; padding: 4px; display: block; width: auto;background-color: #ffc;" name="intInfo" contenteditable="false" dir="ltr">
  Table of Contents:
  <ul style="list-style-type:none !important;">...</ul>

screen 20180201 092640 001

When we now save that page and check the HTML source again, we see that the name attribute and all other styles are vanished.

<div contenteditable="false" dir="ltr">
  Table of Contents:

screen 20180201 092853 001

So the idea was now to add name to the white-list.

I think name is not a tag which can be malicious, so I just added it to the global part of the white-list.

<!-- assumed safe -->
<elementAttribute name="height"></elementAttribute>
<elementAttribute name="width"></elementAttribute>
<elementAttribute name="label"></elementAttribute>
<elementAttribute name="name"></elementAttribute>

You need to restart your environment to enable the custom whitelist. I added a new TOC and after saving, the name-Attribute was still in the source.

<div name="intInfo" contenteditable="false" dir="ltr">
  Table of Contents:

So this problem is solved, but we need to get the other styles too.

Editor formatting

I tried some things more.

When you add an image with or the CK Editor, you have the option to float that image to the left or right.

Like the name attribute before, the img tag contains style=”float:right” which is not saved and the image flips to the left.

I played with and found that several markups are applied through the style attribute.

As far as I can say all these changes gets lost during save, except the font-family.

For example font-size and color were not saved.

So when users formats their posts it can happen that they loose some of their formatting work.

From a security point of view and when I look at corporate identity I like that, but I think we need an option to enable or disable special attributes in the white-list. And when they are disabled, the editors (textbox and ck editor) must hide them! Maybe it would be an idea to highlight the text parts which contains not-whitelisted markup.

I understand all users when they get angry after formatting a page or post and the expected WYSIWYG isn’t working. Or think about importing office documents which was one of the use cases of the first ephox editor, just text will be safe to import.

Allowing style tag

Within the white-list you can enable attributes for special HTML tags:

   <element name="img" />
   <element name="image" />
   <elementAttribute name="align" />
   <elementAttribute name="style" />
   <elementAttribute name="lconnwikiparamwikipage" />

With allowed style I tried the float again. Now in the editor HTML view we see <img src…​ style="float:right;margin:1 0 0 0;"…​ > Now this changes to style="margin 1 0 0 0", so there are two things to consider. The HTML tag and the attributes within style.

White-listing styles?

The white-list documentation is a little bit … short and wrong.

The documentation shows this snippet

  <param cssSchema="css_schema" />

And the part of the documentation should help to add css tags and attributes stored in style=…​

When I added this snippet to the white-list the first time, I couldn’t open the editor or create a community any more, because of validation errors. So I checked the used xsd of the white-list and validated with xmllint. I used this command command directly from the extern directory.

xmllint -schema ojhs-whitelist.xsd --noout

After some tries and reading the xsd again, I found the following snippet is valid and should work with any CSS schema, but I’m still not able to add allowed CSS styles. Maybe one of you can help out here.

Valid XML, but still not working

  <param value="float" />

Tried that too, but getting Java class errors

<allowstyling cssSchema="CSS 3.0">
  <!-- tried several strings here, but without success -->
  <param value="float" />

Without the cssSchema (tried css3, 3.0 and some more) I get no errors in the log files, but css is still not saved.

I hope we can find a way to allow CSS white-list fine tuning, but until we can do this, I will switch back to old blacklists (in environments which are not public available).