
Research
/Security News
Toptal’s GitHub Organization Hijacked: 10 Malicious Packages Published
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
@leafac/html
Advanced tools
$ npm install @leafac/html
We recommend using @leafac/html along with the following tools:
Formatting: Prettier and the Visual Studio Code extension Prettier - Code formatter.
Syntax Highlighting: The Visual Studio Code extension es6-string-html.
Use tagged templates as an HTML template engine. For example:
import html from "@leafac/html";
console.log(html`<p>${"Leandro Facchinetti"}</p>`); // => <p>Leandro Facchinetti</p>
Safe by default. For example:
console.log(html`<p>${`<script>alert(1);</script>`}</p>`); // => <p><script>alert(1);</script></p>
Unsafely interpolate trusted HTML with $${...}
. For example:
console.log(html`<p>$${`<span>Leandro Facchinetti</span>`}</p>`); // => <p><span>Leandro Facchinetti</span></p>
Join interpolated arrays. For example:
console.log(html`<p>${["Leandro", " ", "Facchinetti"]}</p>`); // => <p>Leandro Facchinetti</p>
Array interpolation is safe by default; if you wish to unsafely interpolate an array of trusted HTML use $${[...]}
.
@leafac/html doesn’t encode HTML itself. It relies on entities, which is a mature solution and covers all the edge cases.
@leafac/html doesn’t format the output. If you need pretty HTML, you may pass the output of @leafac/html to Prettier.
@leafac/html generates strings. No virtual DOM in sight. For readability, the HTML
type is exported in TypeScript. For example:
import html, { HTML } from "@leafac/html";
const name: HTML = html`<p>Leandro Facchinetti</p>`;
console.log(name);
@leafac/html sanitizes (removes) invalid XML characters. It uses sanitize-xml-string. For example:
console.log(html`<p>A backspace is invalid in XML: ${`|\b|`}</p>`); // => <p>A backspace is invalid in XML: ||</p>
@leafac/html is fast. Rendering HTML tends to be one of the most expensive computations in a web server, so it must be fast. @leafac/html is more than one order of magnitude faster than ReactDOMServer.renderToStaticMarkup()
.
$${...}
to mark unsafe interpolation of trusted HTML.safeHtml
tag, which isn’t recognized by Prettier or the Visual Studio Code extension es6-string-html extension.escapeHtml.safe()
and escapeHtml.join()
instead of the $${}
trick.Breaking Changes
Use default import instead of named import for html
.
Before:
import { html, HTML } from "@leafac/html";
After:
import html, { HTML } from "@leafac/html";
We no longer sanitize XML characters in the literal template or in unsafe substitutions (those using $${...}
). This was one of the reasons for the performance improvement, particularly because it prevents the same string from being sanitized over and over in a big template with deep nesting.
In most situations this change shouldn’t affect your code, but you must be aware of the following:
Templates must not contain invalid XML characters, for example, html`<p>A backspace: |\b|</p>`
.
Unsafe substitutions (those using $${...}
) must not contain invalid XML characters. If the unsafe substitution is the result of html`...`
itself, then it’s already sanitized; but if you’re generating HTML in some other way, then you may need to introduce sanitize-xml-string’s sanitizeXMLCharacters.sanitize()
.
Note: Safe substitutions (the default substitutions; those using
${...}
) continued to be sanitized against invalid XML characters.
FAQs
Radically Straightforward HTML
We found that @leafac/html demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
Research
/Security News
Socket researchers investigate 4 malicious npm and PyPI packages with 56,000+ downloads that install surveillance malware.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.