https://github.com/BansheeTech/AgnosticHTML
AgnosticHTML: A utility function that safely parses HTML strings into DOM nodes, avoiding the use of innerHTML for security reasons.
https://github.com/BansheeTech/AgnosticHTML
agnostichtml createelement cross-site-scripting document dom html html-to-dom innerhtml javascript node parser safe-dom sanitization sanitizer secure-html security vanilla-javascript vanilla-js xss
Last synced: about 2 months ago
JSON representation
AgnosticHTML: A utility function that safely parses HTML strings into DOM nodes, avoiding the use of innerHTML for security reasons.
- Host: GitHub
- URL: https://github.com/BansheeTech/AgnosticHTML
- Owner: BansheeTech
- License: mit
- Created: 2024-10-06T08:24:12.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-10-09T23:51:00.000Z (7 months ago)
- Last Synced: 2025-02-28T07:34:44.945Z (2 months ago)
- Topics: agnostichtml, createelement, cross-site-scripting, document, dom, html, html-to-dom, innerhtml, javascript, node, parser, safe-dom, sanitization, sanitizer, secure-html, security, vanilla-javascript, vanilla-js, xss
- Language: JavaScript
- Homepage: https://github.com/BansheeDevelopment/AgnosticHTML
- Size: 4.88 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# AgnosticHTML
AgnosticHTML is a lightweight utility for safely parsing HTML strings into DOM nodes, avoiding the use of `innerHTML` for security reasons. It provides a safe alternative for embedding dynamic HTML content into the DOM while offering configurable debugging capabilities for `console.log` and `console.warn`.
## Installation
To install AgnosticHTML using npm, run the following command:
```bash
npm install agnostic-html
```
## Usage
To use AgnosticHTML, import the `agnosticHTML` function and configure it to enable or disable debug messages. After configuration, you can safely insert HTML content into the DOM without using `innerHTML`.
### Example:
```javascript
import { agnosticHTML } from 'agnostic-html';
// Configure AgnosticHTML with debug options
window.agnosticHTML = agnosticHTML({ debugLog: true, debugWarn: true });
// Insert HTML content into a specific DOM element
window.agnosticHTML(
\`
AgnosticHTML Button
\`,
"#html-selector"
);
```
In this example, **AgnosticHTML** inserts a button into the element with the ID `#html-selector`. If the element does not exist, a warning will be shown in the console, depending on the debug settings.
### Default Target (without specifying a container):
If you don't specify a custom container (e.g., `#html-selector`), the content will be inserted into the `` element by default:
```javascript
// Insert HTML content into the element by default
window.agnosticHTML(
\`
AgnosticHTML Button
\`
);
```
## Disable Warns and/or Logs
AgnosticHTML allows you to control the appearance of `console.log` and `console.warn` messages through optional flags. You can enable or disable these messages as needed using the following options:
- `debugLog`: Controls the appearance of informational messages (`console.log`). It can be set to `true` or `false`.
- `debugWarn`: Controls the appearance of warning messages (`console.warn`). It can be set to `true` or `false`.
By default, both flags are disabled.
### Example usage:
Show only warns on console:
```javascript
window.agnosticHTML = agnosticHTML({ debugLog: false, debugWarn: true });
```
Show only debug messages on console:
```javascript
window.agnosticHTML = agnosticHTML({ debugLog: true, debugWarn: false });
```
Doesn't show any message:
```javascript
window.agnosticHTML = agnosticHTML({ debugLog: false, debugWarn: false });
```
## License
AgnosticHTML is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## Issues
If you encounter any issues, feel free to report them [here](https://github.com/BansheeDevelopment/AgnosticHTML/issues).