Skip to content

feat(options): add CSP support with trustedTypePolicy #1439

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
remarkablemark merged 6 commits into from
May 5, 2026
Merged

feat(options): add CSP support with trustedTypePolicy #1439

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fcb62cc
CSP Support
remdex May 4, 2026
dcb67ae
Master csp (#2)
remdex May 4, 2026
0b0ec09
Merge
remdex May 5, 2026
1689b4b
Lint fixes
remdex May 5, 2026
e508cbc
String type
remdex May 5, 2026
590ecb0
Restore imports
remdex May 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,24 @@ The server parser is a wrapper of [htmlparser2](https://github.com/fb55/htmlpars

The client parser mimics the server parser by using the [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) API to parse the HTML string.

## Options (server only)
## Options

### trustedTypePolicy (browser only)

When running in the browser, you can pass a Trusted Types policy. The parser
uses `trustedTypePolicy.createHTML` right before assigning to `innerHTML`.

```js
const trustedTypePolicy = window.trustedTypes?.createPolicy('my-policy', {
createHTML(input) {
return input;
},
});

parse('<div>Hello</div>', { trustedTypePolicy });
```

### Server parser options

Because the server parser is a wrapper of [htmlparser2](https://github.com/fb55/htmlparser2), which implements [domhandler](https://github.com/fb55/domhandler), you can alter how the server parser parses your code with the options:

Expand Down
94 changes: 61 additions & 33 deletions __tests__/client/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,61 @@
// @vitest-environment jsdom
import htmlToDOM from '../../src/client/html-to-dom';
import htmlCases from '../cases/html';
import {
isBrowser,
parseDOM,
runTests,
testCaseSensitiveTags,
throwErrors,
} from '../helpers';

describe('client parser', () => {
// @ts-expect-error argument of type is not assignable
throwErrors(htmlToDOM);
// @ts-expect-error argument of type is not assignable
runTests(htmlToDOM, parseDOM, htmlCases);
testCaseSensitiveTags(htmlToDOM);

if (isBrowser()) {
describe('performance', () => {
it('executes 1000 times in less than 50ms', () => {
let times = 1000;
const start = performance.now();
while (--times) {
htmlToDOM('<div>test</div>');
}
const end = performance.now();
const elapsed = end - start;
expect(elapsed).below(50);
});
});
}
});
// @vitest-environment jsdom

Check failure on line 1 in __tests__/client/index.test.ts

View workflow job for this annotation

GitHub Actions / lint 

Delete `␍`
import htmlToDOM from '../../src/client/html-to-dom';

Check failure on line 2 in __tests__/client/index.test.ts

View workflow job for this annotation

GitHub Actions / lint 

Delete `␍`
import htmlCases from '../cases/html';

Check failure on line 3 in __tests__/client/index.test.ts

View workflow job for this annotation

GitHub Actions / lint 

Delete `␍`
import {

Check failure on line 4 in __tests__/client/index.test.ts

View workflow job for this annotation

GitHub Actions / lint 

Delete `␍`
isBrowser,

Check failure on line 5 in __tests__/client/index.test.ts

View workflow job for this annotation

GitHub Actions / lint 

Delete `␍`
parseDOM,

Check failure on line 6 in __tests__/client/index.test.ts

View workflow job for this annotation

GitHub Actions / lint 

Delete `␍`
runTests,

Check failure on line 7 in __tests__/client/index.test.ts

View workflow job for this annotation

GitHub Actions / lint 

Delete `␍`
testCaseSensitiveTags,

Check failure on line 8 in __tests__/client/index.test.ts

View workflow job for this annotation

GitHub Actions / lint 

Delete `␍`
throwErrors,

Check failure on line 9 in __tests__/client/index.test.ts

View workflow job for this annotation

GitHub Actions / lint 

Delete `␍`
} from '../helpers';

Check failure on line 10 in __tests__/client/index.test.ts

View workflow job for this annotation

GitHub Actions / lint 

Delete `␍`

describe('client parser', () => {
// @ts-expect-error argument of type is not assignable
throwErrors(htmlToDOM);
// @ts-expect-error argument of type is not assignable
runTests(htmlToDOM, parseDOM, htmlCases);
testCaseSensitiveTags(htmlToDOM);

if (isBrowser()) {
describe('trustedTypePolicy', () => {
it('uses policy before setting template innerHTML', () => {
const trustedTypePolicy = {
createHTML: vi.fn((input: string) => input),
};

htmlToDOM('<div>test</div>', { trustedTypePolicy });

expect(trustedTypePolicy.createHTML).toHaveBeenCalledOnce();
expect(trustedTypePolicy.createHTML).toHaveBeenCalledWith(
'<div>test</div>',
);
});

it('uses policy before setting document innerHTML', () => {
const trustedTypePolicy = {
createHTML: vi.fn((input: string) => input),
};

htmlToDOM('<body><div>test</div></body>', { trustedTypePolicy });

expect(trustedTypePolicy.createHTML).toHaveBeenCalledOnce();
expect(trustedTypePolicy.createHTML).toHaveBeenCalledWith(
'<body><div>test</div></body>',
);
});
});

describe('performance', () => {
it('executes 1000 times in less than 50ms', () => {
let times = 1000;
const start = performance.now();
while (--times) {
htmlToDOM('<div>test</div>');
}
const end = performance.now();
const elapsed = end - start;
expect(elapsed).below(50);
});
});
}
});
9 changes: 9 additions & 0 deletions __tests__/types/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,14 @@ parse('<div>text</div>', { decodeEntities: false });
// $ExpectType (Element | Text | Comment | ProcessingInstruction)[]
parse('<div>text</div>', { lowerCaseTags: true });

// $ExpectType (Element | Text | Comment | ProcessingInstruction)[]
parse('<div>text</div>', {
trustedTypePolicy: {
createHTML(input: string) {
return input;
},
},
});

// $ExpectType (Element | Text | Comment | ProcessingInstruction)[]
parse('');
Loading
Loading