How I escape > (great than) in internal css of the UI page html field

sam861 · ‎10-15-2018

My HTML cod in XML format is as following in UI page:

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<!-- <!DOCTYPE html> Error at line (3) A DOCTYPE is not allowed in content. -->
<html xmlns="http://www.w3.org/1999/html" xml:lang="en">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Test</title>
    <style type="text/css">
        ul.foo > li {
            /* etc */
        }
    </style>
</head>

But, the character '>' output in the client browser is >

I have read the two ServiceNow documents Extensions to Jelly syntax # Less than and Jelly escaping types, and other references:

Prevent PHP Tidy from converting style tag data to CDATA
Do Angle Brackets Need to be HTML-Escaped in Nested Style Elements?
It's valid HTML, but not valid CSS, because the embedded stylesheet isn't parsed as HTML at all; it's parsed as CSS, meaning that the > is seen literally. > is not a valid selector, and therefore it's not valid CSS.
This is only true of HTML; in XHTML, it is valid and browsers will decode the > into > before parsing the stylesheet as CSS. The following data URI demonstrates this:
```
data:application/xhtml+xml,<html xmlns="http://www.w3.org/1999/xhtml"><head><style>ul.foo&gt;li{color:red}</style></head><body><ul class="foo"><li>Foo</li></ul></body></html>
```
Just like in HTML, though, it's not necessary in this specific context, for the reason given in the question you link to, but it's still considered well-formed XHTML. But generally, putting embedded scripts and stylesheets into CDATA sections is preferred over encoding every single <, > and &:
```
<style>
/* <![CDATA[ */
  ul.foo > li {
    /* etc */
  }
/* ]]> */
</style>
```
How can I use character escapes in markup and CSS, and when should I use or not use them?
CSS ESCAPES
CSS represents escaped characters in a different way. Escapes start with a backslash followed by the hexadecimal number that represents the character's hexadecimal Unicode code point value. e.g. \E9motion \E9 dition

Following those guides, I have test those cases below:

<style type="text/css"> /* >, &gt;, &#x3e; \3e, ${AMP}lt;, ${AND}, ${AMP}gt; ${AMP}#62; $[AMP] */ </style>

However, their output result in Client Browser is as following:

<style type="text/css"> /* &gt;, &gt;, &gt; \3e, &lt;, &amp;&amp;, &gt; &gt; & */ </style>

which is unexpected. 😞

Can I only use an external CSS file ?

Document

Extensions to Jelly syntax # Less than

Similar to ampersands, less than ("<") signs can also cause problems due to Jelly being XML. This can be resolved by reversing your test such that it is not necessary or by using${AMP}lt; in place of the less than sign.

<g2:evaluate var="jvar_text">
     var days = "";
     var selectedDays = '$[${ref}]';
     for (var i = 1; i ${AMP}lt;= 7; i++) {
        if (selectedDays.indexOf(i.toString()) >= 0) {
           days += gs.getMessage("dow" + i);
           days += " ";
        }
     }
     days;
 </g2:evaluate>

Many times you can avoid the "less than" operator all together by just using "not equals" which doesn't have escaping issues. For example:

for (var i=0; i != ta.length; i++) {
}

Jelly escaping types

You use different methods when escaping characters in JavaScript and HTML. JavaScript uses the backslash character, and HTML uses the ampersand character.

Note: This functionality requires a knowledge of JavaScript, HTML, and Apache Jelly (a Java and XML based scripting and processing engine for turning XML into executable code).

There are two different types of escaping that is required when generating output from Jelly:

JavaScript
HTML

The escaping for each of these consists of:

Type	From	To
JavaScript	' (single quote)	\'
	" (double quote)	\"
	CR (carriage return)	(blank)
	NL (newline)	\n ('\' followed by 'n')
HTML	& (ampersand)	&
	< (less than)	<
	> (greater than)	>

You can also escape HTML using the getHTMLValue() function which will enforce all line breaks and escape the characters mentioned above. It can be used as follows:

${test.getHTMLValue()}

Add escaping to a Jelly replacement

You can handle character escaping in Jelly files. XML escaping behavior can be modified only by users with the security_admin role.

About this task

Note: This functionality requires a knowledge of JavaScript, HTML, and Apache Jelly (a Java and XML based scripting and processing engine for turning XML into executable code).

Procedure

Add a prefix to the ${expression} or $[expression] indicating the escaping to be performed.

${JS:expression}
${HTML:expression}

The prefix tells the system to take the result of the expression and escape it before outputting. The escaping may be combined by specifying a comma-separated list of prefixes:

${JS,HTML:expression}

Last Updated: June 15, 2017

Tags: Jakarta, Now Platform Custom Business Applications, Scripting

Styling HTML with CSS

CSS stands for Cascading Style Sheets.

CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

CSS can be added to HTML elements in 3 ways:

Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file

The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.

Sign	Name	Decimal Code	Hexadecimal Code	CSS syntax	Comment
	&ensp;
	&emsp;

<	<	<
>	>	>	>	\3e	'>'.charCodeAt(0).toString(16)
&	&	&
"	"	"
©	©	©
®	®	®
™	™	™
×	×	×
÷	÷	÷

Jace Benson · ‎10-23-2018

I have two suggestions, however it seems you may have already tried one and it failed.

Easiest;
Try using `${AMP}gt;` instead of `<`

More work;
Create a full blow css entry on the `content_css` and then load that via this trick (https://www.servicenowguru.com/content-management/custom-stylesheets-noncms-pages/)
e.g. `<link href="SYSIDOFCONTENTCSSRECORD.cssdbx?" rel="stylesheet" type="text/css" />`