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 2 commits
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
41 changes: 41 additions & 0 deletions __tests__/client/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,48 @@ describe('client parser', () => {
runTests(htmlToDOM, parseDOM, htmlCases);
testCaseSensitiveTags(htmlToDOM);

it('uses policy before setting 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>',
);
});

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;
Expand Down
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('');
7 changes: 7 additions & 0 deletions eslint.config.mts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,4 +62,11 @@ export default defineConfig([
'@typescript-eslint/no-require-imports': 'off',
},
},
{
files: ['__tests__/types/**'],

rules: {
'@typescript-eslint/no-unsafe-call': 'off',
},
},
]);
Loading
Loading