Highcharts Class: AST

Class: AST

Highcharts. AST

new AST(source)

The AST class represents an abstract syntax tree of HTML or SVG content. It can take HTML as an argument, parse it, optionally transform it to SVG, then perform sanitation before inserting it into the DOM.

Parameters:

Name	Type	Description
`source`	string \| Array.<Highcharts.ASTNode>	Either an HTML string or an ASTNode list to populate the tree.

Members

<static> allowedAttributes :Array.<string>

The list of allowed SVG or HTML attributes, used for sanitizing potentially harmful content from the chart configuration before adding to the DOM.

Type:

Array.<string>

See also:

Source code with default values

Example

// Allow a custom, trusted attribute
Highcharts.AST.allowedAttributes.push('data-value');

<static> allowedReferences :Array.<string>

The list of allowed references for referring attributes like href and src. Attribute values will only be allowed if they start with one of these strings.

Type:

Array.<string>

See also:

Source code with default values

Example

// Allow tel:
Highcharts.AST.allowedReferences.push('tel:');

<static> allowedTags :Array.<string>

The list of allowed SVG or HTML tags, used for sanitizing potentially harmful content from the chart configuration before adding to the DOM.

Type:

Array.<string>

See also:

Source code with default values

Example

// Allow a custom, trusted tag
Highcharts.AST.allowedTags.push('blink'); // ;)

<static> bypassHTMLFiltering

Allow all custom SVG and HTML attributes, references and tags (together with potentially harmful ones) to be added to the DOM from the chart configuration. In other words, disable the the allow-listing which is the primary functionality of the AST.

WARNING: Setting this property to true while allowing untrusted user data in the chart configuration will expose your application to XSS security risks!

Note that in case you want to allow a known set of tags or attributes, you should allow-list them instead of disabling the filtering totally. See allowedAttributes, allowedReferences and allowedTags. The bypassHTMLFiltering setting is intended only for those cases where allow-listing is not practical, and the chart configuration already comes from a secure source.

Example

// Allow all custom attributes, references and tags (disable DOM XSS
// filtering)
Highcharts.AST.bypassHTMLFiltering = true;

Methods

addToDOM(parent)

Add the tree defined as a hierarchical JS structure to the DOM

Parameters:

Name	Type	Description
`parent`	Highcharts.HTMLDOMElement \| Highcharts.SVGDOMElement	The node where it should be added

Returns:

Highcharts.HTMLDOMElement | Highcharts.SVGDOMElement .

The inserted node.

filterUserAttributes(attributes)

Filter an object of SVG or HTML attributes against the allow list.

Parameters:

Name	Type	Description
`attributes`	Highcharts.SVGAttributes	The attributes to filter

Returns:

Highcharts.SVGAttributes .

The filtered attributes

setElementHTML(el, html)

Utility function to set html content for an element by passing in a markup string. The markup is safely parsed by the AST class to avoid XSS vulnerabilities. This function should be used instead of setting innerHTML in all cases where the content is not fully trusted.

Parameters:

Name	Type	Description
`el`	SVGDOMElement \| HTMLDOMElement	Node to set content of.
`html`	string	Markup string