Error codes

Estimated reading time: 3 minutes

TS88601 Error

Content may introduce an XSS vulnerability and must be marked with the safe attribute.

An expression with type string or any is used as a child of a native element without the safe attribute.

const const html: JSX.Elementhtml = <JSX.IntrinsicElements.div: JSX.HtmlTagdiv>{username}</JSX.IntrinsicElements.div: JSX.HtmlTagdiv>Content may introduce an XSS vulnerability and must be marked with the `safe` attribute.
See https://html.kitajs.org/TS88601

<div>Arthur</div>

Variables prefixed with safe are exempt from this rule, as are expressions with safe types (numbers, booleans, string literals...).

Fix

Add the safe attribute to escape the content:

const const html: JSX.Elementhtml = <JSX.IntrinsicElements.div: JSX.HtmlTagdiv JSX.HtmlTag.safe?: boolean | undefinedWhen set to true, all inner content (html or not) of this tag will be escaped
when evaluated.
Warning: This will escape even inner jsx tags. You should only use this in the
most inner tag of the html tree.
@example<div>{'<script />'}</div>
'<div><script /></div>'
<div safe>{'<script />'}</div>
'<div><script /></div>'
<div><div>{'<script />'}</div></div>
'<div><div><script /></div></div>'

// Escapes even inner jsx tags
<div safe><div>{'<script />'}</div></div>
'<div><div><script /></div></div>'
@defaultfalse@seehttps ://html.kitajs.org/guide/xss/safe-attributesafe>{let username: stringusername}</JSX.IntrinsicElements.div: JSX.HtmlTagdiv>

<div>Arthur</div>

TS88602 Error

The safe attribute causes this content to be escaped more than once.

The safe attribute is applied to an element whose children include JSX elements. This would escape the HTML output of those child components, corrupting their markup.

const const html: JSX.Elementhtml = (
  <JSX.IntrinsicElements.div: JSX.HtmlTagdiv safe>The `safe` attribute causes this content to be escaped more than once.
See https://html.kitajs.org/TS88602
    {const user: {
    name: string;
    badgeUrl: string;
}
user.name: stringname}
    <function UserBadge(props: {
    url: string;
}): JSX.Element
UserBadge url: stringurl={const user: {
    name: string;
    badgeUrl: string;
}
user.badgeUrl: stringbadgeUrl} />
  </JSX.IntrinsicElements.div: JSX.HtmlTagdiv>
)

<div>
  Arthur&lt;div class=&#34;badge&#34;>&lt;img
  src=&#34;https://example.com/badge.png&#34; alt=&#34;User
  badge&#34;/>&lt;/div>
</div>

Fix

Remove safe from the parent and wrap only the untrusted text in <Fragment safe>, which escapes it without adding a wrapper element:

import { function Fragment(props: PropsWithChildren<Pick<JSX.HtmlTag, "safe">>): JSX.ElementA JSX Fragment is used to return multiple elements from a component.
@example// renders <div>1</div> and <div>2</div> without needing a wrapper element
const html = <><div>1</div><div>2</div></>

// Html.Fragment is the same as <>...</>
const html = <Html.Fragment><div>1</div><div>2</div></Html.Fragment>
Fragment } from '@kitajs/html'

const const html: JSX.Elementhtml = (
  <JSX.IntrinsicElements.div: JSX.HtmlTagdiv>
    <function Fragment(props: PropsWithChildren<Pick<JSX.HtmlTag, "safe">>): JSX.ElementA JSX Fragment is used to return multiple elements from a component.
@example// renders <div>1</div> and <div>2</div> without needing a wrapper element
const html = <><div>1</div><div>2</div></>

// Html.Fragment is the same as <>...</>
const html = <Html.Fragment><div>1</div><div>2</div></Html.Fragment>
Fragment safe?: boolean | undefinedWhen set to true, all inner content (html or not) of this tag will be escaped
when evaluated.
Warning: This will escape even inner jsx tags. You should only use this in the
most inner tag of the html tree.
@example<div>{'<script />'}</div>
'<div><script /></div>'
<div safe>{'<script />'}</div>
'<div><script /></div>'
<div><div>{'<script />'}</div></div>
'<div><div><script /></div></div>'

// Escapes even inner jsx tags
<div safe><div>{'<script />'}</div></div>
'<div><div><script /></div></div>'
@defaultfalse@seehttps ://html.kitajs.org/guide/xss/safe-attributesafe>{const user: {
    name: string;
    badgeUrl: string;
}
user.name: stringname}</function Fragment(props: PropsWithChildren<Pick<JSX.HtmlTag, "safe">>): JSX.ElementA JSX Fragment is used to return multiple elements from a component.
@example// renders <div>1</div> and <div>2</div> without needing a wrapper element
const html = <><div>1</div><div>2</div></>

// Html.Fragment is the same as <>...</>
const html = <Html.Fragment><div>1</div><div>2</div></Html.Fragment>
Fragment>
    <function UserBadge(props: {
    url: string;
}): JSX.Element
UserBadge url: stringurl={const user: {
    name: string;
    badgeUrl: string;
}
user.badgeUrl: stringbadgeUrl} />
  </JSX.IntrinsicElements.div: JSX.HtmlTagdiv>
)

<div>
  Arthur
  <div class="badge">
    <img src="https://example.com/badge.png" alt="User badge" />
  </div>
</div>

TS88603 Error

Content inside a Component must be escaped using escapeHtml().

An expression with type string or any is passed as a child to a component (uppercase tag name). Unlike native elements, components cannot use the safe attribute directly on children.

const const html: JSX.Elementhtml = <function Card({ children }: {
    children: JSX.Element;
}): JSX.Element
Card>{userName}</function Card({ children }: {
    children: JSX.Element;
}): JSX.Element
Card>Content inside a Component must be escaped using escapeHtml().
See https://html.kitajs.org/TS88603

<div>Arthur</div>

Fix

Escape manually using escapeHtml():

const const html: JSX.Elementhtml = <function Card({ children }: {
    children: JSX.Element;
}): JSX.Element
Card>{function escapeHtml(this: void, value: any): stringEscapes a string for safe use as HTML text content. If the value is not a string, it is
coerced to one with its own toString() method.
If the
{@linkcode
Bun
}
runtime is available, this function will be swapped out to
{@linkcode
Bun.escapeHTML
}
.
@paramvalue  The value to escape.@returnsThe  escaped string.escapeHtml(let userName: stringuserName)}</function Card({ children }: {
    children: JSX.Element;
}): JSX.Element
Card>

<div>Arthur</div>

Or wrap the content in a Fragment with safe:

const const html: JSX.Elementhtml = (
  <function Card({ children }: {
    children: JSX.Element;
}): JSX.Element
Card>
    <function Fragment(props: PropsWithChildren<Pick<JSX.HtmlTag, "safe">>): JSX.ElementA JSX Fragment is used to return multiple elements from a component.
@example// renders <div>1</div> and <div>2</div> without needing a wrapper element
const html = <><div>1</div><div>2</div></>

// Html.Fragment is the same as <>...</>
const html = <Html.Fragment><div>1</div><div>2</div></Html.Fragment>
Fragment safe?: boolean | undefinedWhen set to true, all inner content (html or not) of this tag will be escaped
when evaluated.
Warning: This will escape even inner jsx tags. You should only use this in the
most inner tag of the html tree.
@example<div>{'<script />'}</div>
'<div><script /></div>'
<div safe>{'<script />'}</div>
'<div><script /></div>'
<div><div>{'<script />'}</div></div>
'<div><div><script /></div></div>'

// Escapes even inner jsx tags
<div safe><div>{'<script />'}</div></div>
'<div><div><script /></div></div>'
@defaultfalse@seehttps ://html.kitajs.org/guide/xss/safe-attributesafe>{let userName: stringuserName}</function Fragment(props: PropsWithChildren<Pick<JSX.HtmlTag, "safe">>): JSX.ElementA JSX Fragment is used to return multiple elements from a component.
@example// renders <div>1</div> and <div>2</div> without needing a wrapper element
const html = <><div>1</div><div>2</div></>

// Html.Fragment is the same as <>...</>
const html = <Html.Fragment><div>1</div><div>2</div></Html.Fragment>
Fragment>
  </function Card({ children }: {
    children: JSX.Element;
}): JSX.Element
Card>
)

<div>Arthur</div>

TS88604 Warning

The safe attribute is unused in this context.

The safe attribute is applied to an element whose children are all already safe types (numbers, booleans, bigints, string literals, or JSX.Element). These types cannot introduce XSS, so the escaping is redundant. When at least one child needs escaping, as in <p safe>{name}{count}</p>, the attribute is in use and kita-html check reports nothing.

const const html: JSX.Elementhtml = <JSX.IntrinsicElements.span: JSX.HtmlTagspan safe>{const count: 42count}</JSX.IntrinsicElements.span: JSX.HtmlTagspan>The `safe` attribute is unused in this context.
See https://html.kitajs.org/TS88604

<span>42</span>

Fix

Remove the safe attribute, since numbers are already safe:

const const html: JSX.Elementhtml = <JSX.IntrinsicElements.span: JSX.HtmlTagspan>{const count: 42count}</JSX.IntrinsicElements.span: JSX.HtmlTagspan>

<span>42</span>

#Error codes

#TS88601 Error

#TS88602 Error

#TS88603 Error

#TS88604 Warning

Error codes

TS88601 Error

TS88602 Error

TS88603 Error

TS88604 Warning