Some Special Characters Break the HTML Portlet When Using Firefox
search cancel

Some Special Characters Break the HTML Portlet When Using Firefox

book

Article ID: 131802

calendar_today

Updated On:

Products

Clarity PPM On Premise Clarity PPM SaaS

Issue/Introduction

When HTML code containing some special characters (e.g.: Black Up-Pointing Small Triangle, ▴) are added into an HTML Portlet using Firefox, the code breaks.
In some scenarios, the character gets replaced by garbage, and in some others, the code after the special character is lost.
This does not happen when using other supported browsers, such as Chrome or Edge.

Steps to Reproduce
  1. Open Firefox (any version, tested using 66.0.4).
  2. Go to Administration > Studio > Portlets, and create a new HTML Portlet using the code: 
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
        <head>
          <meta charset="utf-8" />
            <title>Special Characters Test</title>
        </head>
        <body>
            <h1>Triangle Up &#9652;</h1>
            <h1>Triangle Down &#9662;</h1>
        </body>
    </html>
  3. Click on Preview
  4. Click on Return
Expected Results: HTML code is not modified
Actual Results: HTML code is modified (when using the example, everything after the triangle up is missing).

Environment

Clarity PPM and Mozilla Firefox.

Cause

The combination of ampersand and hash character [&#] is causing an issue in Firefox where two API calls are triggered, the first API call is treated as a redirect by Firefox (subdomain) request, and the second call's URL has changed by Firefox, where any content after the hash [#] gets truncated including the hash symbol. This issue is limited to the Firefox browser and does not happen in Chrome.

Resolution

For the HTML portlet, we basically scan the code for vulnerabilities and "bad-acting" code and display in the browser. Customers using Firefox should not use Numeric Character References. If special characters are desired in the HTML portlets, the equivalent Named Character Reference should be used, which does not use the hash symbol within the reference.


Workaround

Use another supported browser, such as Chrome or Edge.

or

Use the Named Character References instead of using the special character references starting with '&#' (i.e.: '&blacktriangle;' instead of '&#9652;').

For example:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>Special Characters Test</title>
    </head>
    <body>
        <h1>Triangle Up &blacktriangle;</h1>
        <h1>Triangle Down &blacktriangledown;</h1>
    </body>
</html>

Additional Information

Useful links to find out the Named Character References:

HTML Entities
Named character references
Character Entity Reference Chart
Powered by Wolken Software