Rich Content Editor HTML Whitelist

This introduction article will help to TeamDynamix Administrators, Service Catalog managers, and Knowledge Base managers to build HTML content using the TDClient interface. The user must have permission to edit Services and/or Knowledge articles. In order to create HTML desktop modules for Client Portal pages, you will need administrative permissions within TDAdmin.

Overview

There are several places in TeamDynamix which allow the entry of rich HTML content, usually via a WYSIWYG text editor called the CKEditor. This article includes details for adding in-page links, and styling tips to remove the underline from links. 

This HTML content is supported in the Client Portal headers and footers, TDNext and TDClient login prompts, knowledge base articles, service catalog entries, Questions and answers, and HTML desktop modules.

As this article will explain, not all HTML tags and syntax are supported by TeamDynamix.

Where to Find This

This feature appears in the TDAdmin and TDClient interfaces.

TDAdmin is where TeamDynamix Administrators will create HTML desktop modules, edit notification templates, and edit response templates. TDClient is where Service Catalog and Knowledge managers will create Services and Knowledge articles.

Navigate to HTML content following these paths:

  • TDAdmin > Applications > [Client Portal Application] > Settings > Site Settings
  • TDAdmin > Organization Settings > Site Settings
  • TDAdmin > Desktop Templates > HTML Modules
  • TDClient > Services > New Service or Edit Service
  • TDClient > Knowledge Base> New Article or Edit Article

Using HTML in TeamDynamix

Understanding HTML Sanitization

Rich HTML content is sanitized when it is viewed in a page. Sanitizing means any HTML tags or syntax that are not supported by TeamDynamix are stripped out.

Sanitization happens on the pages where the rich content is displayed, not in the content editor. You may see unsupported HTML content appear in the editor, but it doesn’t appear in the published view of the page.

Only HTML desktop modules have a framework, via the TDAdmin administrator Create/Modify Unsanitized HTML Modules permission, to bypass this sanitization during HTML module creation and editing. To be granted this permission, enter a support request or implementation project issue. TeamDynamix must grant this permission on an admin-by-admin basis.

Supported HTML Tags

The following is a list of allowed HTML tags (i.e., between < and >) allowed in rich content. Anything outside of these lists will not display in saved content.

  • a
  • abbr
  • acronym
  • address
  • area
  • article
  • aside
  • b
  • big
  • blockquote
  • br
  • button
  • caption
  • center
  • cite
  • code
  • col
  • colgroup
  • dd
  • del
  • dfn
  • dir
  • div
  • dl
  • dt
  • em
  • fieldset
  • figcaption
  • figure
  • font
  • footer
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • header
  • hr
  • i
  • img
  • input
  • ins
  • kbd
  • label
  • legend
  • li
  • map
  • mark
  • nav
  • ol
  • optgroup
  • option
  • p
  • pre
  • q
  • s
  • samp
  • section
  • select
  • small
  • span
  • strike
  • strong
  • sub
  • sup
  • table
  • tbody
  • td
  • textarea
  • tfoot
  • th
  • thead
  • tr
  • tt
  • u
  • ul
  • var
  • wbr

Image Size Restrictions and Resizing

Any images uploaded through the editor will be scaled down (with width as the constraint) if they exceed 900px in width. If you do not want your images to be scaled down, ensure that they are already 900px wide or smaller before uploading. After the image is uploaded, you may attempt to scale up the image for display using HTML width and height attributes and/or inline CSS styles for width and height.

Please note that the content viewing window in the client portal is restricted to 750px. While images at 900px and smaller will not be resized, they will appear to be squished into a 750px window. For best results, ensure that your images are no more than 750px wide with proper aspect ratios for a 750px width. In addition, the CKEditor tool will only allow a maximum image size of ~4MB to be uploaded to the server.

Size restrictions are especially impactful for animated GIFs of any sort. If an animated GIF is automatically resized during upload, the resize process must resave the image, which in turn removes all animations. Ensure that any animated GIFs you intend to use are 900px wide or smaller, and ideally 750px wide or smaller. This will prevent automatic image resizing and removal of animations.

Iframe Exception URIs

HTML iframes are selectively allowed if the source (src) attribute value starts with one of the following domains (www prefixes in the domain are allowed):

  • http(s)://youtube.com/embed/
  • http(s)://youtube-nocookie.com/embed/
  • http(s)://player.vimeo.com/video/
  • http(s)://dailymotion.com/embed/video/
  • http(s)://google.com/maps/embed?
  • http(s)://bing.com/maps/embed/
  • http(s)://mapquest.com/embed?
  • http(s)://archive.org/embed/
  • http(s)://web.microsoftstream.com/embed/video/ (available in v11.1)

Allowed HTML Attributes

The following is a list of HTML tag attributes that are allowed in rich content:

  • abbr
  • accept
  • accept-charset
  • accesskey
  • align
  • alt
  • axis
  • bgcolor
  • border
  • cellpadding
  • cellspacing
  • char
  • charoff
  • charset
  • checked
  • cite
  • class
  • clear
  • cols
  • colspan
  • color
  • compact
  • coords
  • datetime
  • dir
  • disabled
  • enctype
  • for
  • frame
  • headers
  • height
  • href
  • hreflang
  • hspace
  • ismap
  • label
  • lang
  • longdesc
  • maxlength
  • media
  • multiple
  • name
  • nohref
  • noshade
  • nowrap
  • prompt
  • placeholder
  • readonly
  • rel
  • rev
  • rows
  • rowspan
  • rules
  • scope
  • selected
  • shape
  • size
  • span
  • src
  • start
  • style
  • summary
  • tabindex
  • target
  • title
  • type
  • usemap
  • valign
  • value
  • vspace
  • width
  • scrolling
  • frameborder
  • marginheight
  • marginwidth
  • sandbox
  • seamless
  • allowfullscreen
  • mozallowfullscreen
  • webkitallowfullscreen
  • data-slide-to
  • data-ride
  • data-slide
  • data-target
  • data-interval
  • data-toggle
  • data-target

Allowed CSS Properties

The following is a list of CSS properties allowed in style attributes in rich content:

  • background
  • background-attachment
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-style
  • border-top
  • border-top-color
  • border-top-style
  • border-top-width
  • border-width
  • box-shadow
  • caption-side
  • clear
  • clip
  • color
  • content
  • counter-increment
  • counter-reset
  • cursor
  • direction
  • display
  • empty-cells
  • float
  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • height
  • letter-spacing
  • line-break
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • orphans
  • outline
  • outline-color
  • outline-style
  • outline-width
  • overflow
  • overflow-wrap
  • overflow-x
  • overflow-y
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • page-break-after
  • page-break-before
  • page-break-inside
  • quotes
  • table-layout
  • text-align
  • text-align-last
  • text-decoration
  • text-indent
  • text-overflow
  • text-shadow
  • text-transform
  • unicode-bidi
  • vertical-align
  • visibility
  • white-space
  • widows
  • width
  • word-break
  • word-spacing
  • word-wrap
  • columns
    • webkit-columns
    • moz-columns

Allowed Data URI MIME Types

The list of allowed MIME types that can be used in HTML elements with source (src) attributes, like images. See the following code sample for reference. The red and bolded portion is the MIME type being checked.

<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />
  • image/jpeg
  • image/pjpeg
  • image/gif
  • image/png
  • image/tiff
  • image/bmp
  • image/svg+xml 

Allowed URI Schemes

The following is a list of allowed URI schemes that can be used for HTML attribute values, typically for things like src or href attributes:

  • http
  • https
  • ftp
  • sftp
  • ftps
  • news
  • mailto
  • tel

Allowed URI Attributes

The following is a list of allowed HTML attributes which can contain URIs. This should not be confused with plain text inside of HTML tags, like the body of a p or div tag. Those can contain any sort of plain text value desired. This is specifically for HTML attributes of an HTML element itself:

  • src
  • href
  • background

Removing the Underline from Hyperlinks in Custom Content

As per WCAG 2.0 Guideline 1.4.1, hyperlinks in the client portal are now underlined to make it clear to people who suffer from colorblindness that a hyperlink is present. If there were a compelling reason to remove this underline, this can be done using a CSS class.

However, note that because hyperlinks are underlined for accessibility purposes, TeamDynamix strongly encourages you to leave the underline styling in your content. If you still want to remove the styling, please be sure to include additional markup beyond color to indicate that the hyperlink is clickable.

How the Underline is Applied

The underline is applied to all anchor elements () in the client portal that are outside of the header or footer. This includes knowledge base articles, services, questions, and custom HTML desktop modules. This also means that any anchor elements you include in any of the above-mentioned items will automatically receive the underline. See the example below for a snippet of code representing an anchor that will be automatically underlined:

<a href="https://solutions.teamdynamix.com/TDClient/KB/ArticleDet?ID=12718">Client portal overview</a>

Removing the Underline from Hyperlinks

TeamDynamix has included a unique CSS class that can be applied to hyperlinks to remove this underline – just add the no-underline class to the anchor element. This must be done individually to each link in the content.

To apply the no-underline class:

  1. Open the editing page for the desired content.
  2. Click on the Source button in the upper left corner of the editor. Note that not every user has access to see the Source button.
  3. Locate the anchor element for the link and add the no-underline class.
    <a class="no-underline" href="https://www.teamdynamix.com/">Sample Link</a>
    
  4. Click Save

Linking to Other Sections of the Same Page

It is possible to make links which navigate to other sections further down on the same page. This is an especially useful technique for building an article which has a table of contents at the beginning.

These in-page links can be used in knowledge base articles, services, and Questions.

Example HTML Markup for In-Page Links

The following shows how to put a link at the top of a knowledge base article to jump to a Contact Us section in the middle of the article.

The anchor is the clickable starting point link. The markup is:

<a href="#ContactUs">Go to the Contact Us section</a>

The href attribute for the anchor should be in the format #ID-of-DestinationLink. In this case, since the destination link below will have an id and name value of ContactUs, the starting point link should have an href value of #ContactUs.

The destination link is hidden when viewing the page.

You should place markup like the following at the beginning of the Contact Us section in the article or in the area you’d like to end up after clicking the Contact Us link at the top of the page:

<a id="ContactUs" name="ContactUs" style="display: inline-block;"></a>
100% helpful - 2 reviews

Details

Article ID: 48230
Created
Fri 2/9/18 5:35 PM
Modified
Mon 6/7/21 2:18 PM

Related Articles (1)