Skip to content

Commit 730ae35

Browse files
committed
[DOCS BETA] Document the SafeString type
Also use `unknown` instead of `any` in one spot.
1 parent 73c0039 commit 730ae35

File tree

2 files changed

+49
-3
lines changed

2 files changed

+49
-3
lines changed

packages/@ember/-internals/glimmer/lib/utils/string.ts

Lines changed: 48 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,63 @@
44

55
import type { SafeString as GlimmerSafeString } from '@glimmer/runtime';
66

7+
/**
8+
A wrapper around a string that has been marked as safe ("trusted"). **When
9+
rendered in HTML, Ember will not perform any escaping.**
10+
11+
Note:
12+
13+
1. This does not *make* the string safe; it means that some code in your
14+
application has *marked* it as safe using the `htmlSafe()` function.
15+
16+
2. The only public API for getting a `SafeString` is calling `htmlSafe()`. It
17+
is *not* user-constructible.
18+
19+
If a string contains user inputs or other untrusted data, you must sanitize
20+
the string before using the `htmlSafe` method. Otherwise your code is
21+
vulnerable to [Cross-Site Scripting][xss]. There are many open source
22+
sanitization libraries to choose from, both for front end and server-side
23+
sanitization.
24+
25+
[xss]: https://owasp.org/www-community/attacks/DOM_Based_XSS
26+
27+
```javascript
28+
import { htmlSafe } from '@ember/template';
29+
30+
let someTrustedOrSanitizedString = "<div>Hello!</div>"
31+
32+
htmlSafe(someTrustedorSanitizedString);
33+
```
34+
35+
@public
36+
@since 4.12.0
37+
@class SafeString
38+
*/
739
export class SafeString implements GlimmerSafeString {
840
private __string: string;
941

1042
constructor(string: string) {
1143
this.__string = string;
1244
}
1345

46+
/**
47+
Get the string back to use as a string.
48+
49+
@public
50+
@method toString
51+
@returns The string marked as trusted
52+
*/
1453
toString(): string {
1554
return `${this.__string}`;
1655
}
1756

57+
/**
58+
Get the wrapped string as HTML to use without escaping.
59+
60+
@public
61+
@method toHTML
62+
@returns string
63+
*/
1864
toHTML(): string {
1965
return this.toString();
2066
}
@@ -115,8 +161,8 @@ export function htmlSafe(str: string): SafeString {
115161
```javascript
116162
import { htmlSafe, isHTMLSafe } from '@ember/template';
117163
118-
var plainString = 'plain string',
119-
safeString = htmlSafe('<div>someValue</div>');
164+
let plainString = 'plain string';
165+
let safeString = htmlSafe('<div>someValue</div>');
120166
121167
isHTMLSafe(plainString); // false
122168
isHTMLSafe(safeString); // true

packages/@ember/string/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -290,7 +290,7 @@ export function htmlSafe(str: string): SafeString {
290290
return internalHtmlSafe(str);
291291
}
292292

293-
export function isHTMLSafe(str: any | null | undefined): str is SafeString {
293+
export function isHTMLSafe(str: unknown): str is SafeString {
294294
deprecateImportFromString('isHTMLSafe');
295295

296296
return internalIsHtmlSafe(str);

0 commit comments

Comments
 (0)