Rehype Minify JavaScript URL

5.0.1 · active · verified Sun Apr 19

rehype-minify-javascript-url is a rehype plugin designed to optimize HTML documents by minifying `javascript:` URL attributes found within various HTML tags. It's an integral part of the unified collective's rehype ecosystem, which focuses on transforming HTML with a plugin-based architecture. The current stable version is 5.0.1. This package specifically targets and reduces the size of JavaScript code embedded within URL attributes by applying minification techniques (e.g., transforming `alert(true)` to `alert(!0)`). Following the unified ecosystem's release cadence, it ensures compatibility with maintained Node.js versions, currently requiring Node.js 16 or newer. Its primary differentiator is its specialized focus on JavaScript URL minification, contributing to overall HTML document size reduction within the robust rehype processing pipeline.

Common errors

```
Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/rehype-minify-javascript-url/index.js from ... not supported.
```
cause Attempting to import an ESM-only package using CommonJS `require()` syntax.

fix Update your import statements to use ES module syntax: `import rehypeMinifyJavaScriptUrl from 'rehype-minify-javascript-url'` and ensure your project is configured for ESM.
```
TypeError: rehypeMinifyJavaScriptUrl is not a function
```
cause This typically occurs if you try to destructure a named export, but the package only provides a default export, or if the import path is incorrect, leading to an undefined module.

fix Verify that you are importing the default export correctly: `import rehypeMinifyJavaScriptUrl from 'rehype-minify-javascript-url'`. Do not use `{ rehypeMinifyJavaScriptUrl }`.

Warnings

breaking This package is ESM-only. CommonJS `require()` is no longer supported.
Fix: Migrate your project to use ES modules or update your bundler configuration to handle ESM imports correctly. Use `import rehypeMinifyJavaScriptUrl from 'rehype-minify-javascript-url'`.
breaking rehype-minify-javascript-url requires Node.js version 16 or newer.
Fix: Ensure your development and production environments are running Node.js 16 or a later LTS version.
gotcha Improper use of rehype plugins, especially when handling user-generated or untrusted HTML, can lead to Cross-Site Scripting (XSS) vulnerabilities.
Fix: Always use `rehype-sanitize` in your unified pipeline before or after minification when processing untrusted HTML to ensure the resulting document is safe.
gotcha The `rehype-minify-javascript-url` package exports only a default function. Attempting to use named imports will result in errors.
Fix: Ensure you are using a default import, e.g., `import rehypeMinifyJavaScriptUrl from 'rehype-minify-javascript-url'`.

Install

npm install rehype-minify-javascript-url npm
yarn add rehype-minify-javascript-url yarn
pnpm add rehype-minify-javascript-url pnpm

Imports

rehypeMinifyJavaScriptUrl

wrong:

const rehypeMinifyJavaScriptUrl = require('rehype-minify-javascript-url')

correct:

import rehypeMinifyJavaScriptUrl from 'rehype-minify-javascript-url'

This package is ESM-only since version 5 and requires Node.js 16+. It exports only a default function.

Quickstart

Demonstrates how to use rehype-minify-javascript-url within a unified pipeline to parse HTML, minify JavaScript URLs, and then stringify the result.

import rehypeMinifyJavaScriptUrl from 'rehype-minify-javascript-url'
import rehypeParse from 'rehype-parse'
import rehypeStringify from 'rehype-stringify'
import {read} from 'to-vfile'
import {unified} from 'unified'

async function processHtml() {
  const file = await unified()
    .use(rehypeParse)
    .use(rehypeMinifyJavaScriptUrl)
    .use(rehypeStringify)
    .process(await read('index.html'))

  console.log(String(file))
}

// Assuming 'index.html' exists in the current directory with content like:
// <a href="javascript:alert(true)">Click me</a>
// For a runnable example, you might create a dummy file:
// import { write } from 'to-vfile';
// await write({ path: 'index.html', value: '<a href="javascript:alert(true)">Click me</a>' });

processHtml().catch(console.error);

view raw JSON →