npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

rollup-plugin-webbundle

v0.2.0

Published

Rollup plugin to generate WebBundle output.

Downloads

42

Readme

rollup-plugin-webbundle

A Rollup plugin which generates Web Bundles output. Currently the spec is still a draft, so this package is also in alpha until the spec stabilizes.

Requirements

This plugin requires Node v14.0.0+ and Rollup v1.21.0+.

Install

Using npm:

npm install rollup-plugin-webbundle --save-dev

Usage

General Web Bundle

This example assumes your application entry point is src/index.js and static files (including index.html) are located in static directory.

/* rollup.config.mjs */
import webbundle from 'rollup-plugin-webbundle';

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'esm',
  },
  plugins: [
    webbundle({
      baseURL: 'https://example.com/',
      static: { dir: 'static' },
    }),
  ],
};

A WBN file dist/out.wbn should be written.

Isolated Web App (Signed Web Bundle)

This example assumes your application entry point is src/index.js, static files (including index.html) are located in static directory and you have a .env file in the root directory with ED25519KEY defined in it. The example also requires installing dotenv npm package as a dev dependency.

It is also required to have a Web App Manifest at /.well-known/manifest.webmanifest, which can be placed e.g. in the static directory.

Also as in the below example, baseURL must be of format isolated-app://${WEB_BUNDLE_ID} for Isolated Web Apps. It can easily be generated from the private key with WebBundleId helper class from wbn-sign package. See Scheme explainer for more details. Also note that providing headerOverride is optional.

/* rollup.config.mjs */
import webbundle from 'rollup-plugin-webbundle';
import * as wbnSign from 'wbn-sign';
import dotenv from 'dotenv';
dotenv.config({ path: './.env' });

export default async () => {
  const key = wbnSign.parsePemKey(
    process.env.ENC_ED25519KEY,
    await wbnSign.readPassphrase()
  );

  return {
    input: 'src/index.js',
    output: { dir: 'dist', format: 'esm' },
    plugins: [
      webbundle({
        baseURL: new wbnSign.WebBundleId(
          key
        ).serializeWithIsolatedWebAppOrigin(),
        static: { dir: 'public' },
        output: 'signed.swbn',
        integrityBlockSign: {
          strategy: new wbnSign.NodeCryptoSigningStrategy(key),
        },
        headerOverride: {
          'cross-origin-embedder-policy': 'require-corp',
          'cross-origin-opener-policy': 'same-origin',
          'cross-origin-resource-policy': 'same-origin',
          'content-security-policy':
            "base-uri 'none'; default-src 'self'; object-src 'none'; frame-src 'self' https: blob: data:; connect-src 'self' https: wss:; script-src 'self' 'wasm-unsafe-eval'; img-src 'self' https: blob: data:; media-src 'self' https: blob: data:; font-src 'self' blob: data:; style-src 'self' 'unsafe-inline'; require-trusted-types-for 'script';",
        },
      }),
    ],
  };
};

A signed web bundle (containing an Integrity Block) should be written to dist/signed.swbn.

Options

baseURL

Type: string

Default: ''

Specifies the URL prefix prepended to the file names in the bundle. Non-empty baseURL must end with /.

formatVersion

Type: string

Default: b2

Specifies WebBundle format version.

primaryURL

Type: string

Default: baseURL

Specifies the bundle's main resource URL. If omitted, the value of the baseURL option is used.

static

Type: { dir: String, baseURL?: string }

If specified, files and subdirectories under dir will be added to the bundle. baseURL can be omitted and defaults to Options.baseURL.

output

Type: string

Default: out.wbn

Specifies the file name of the Web Bundle to emit.

integrityBlockSign

Type:

  • { key: KeyObject, isIwa?: boolean }
  • { strategy: ISigningStrategy, isIwa?: boolean }
  • { strategies: Array<ISigningStrategy>, webBundleId: string, isIwa?: boolean }

Object specifying the signing options with Integrity Block.

integrityBlockSign.key

Type: KeyObject

An unencrypted ed25519 private key can be generated with:

openssl genpkey -algorithm Ed25519 -out ed25519key.pem

For better security, one should prefer using passphrase-encrypted ed25519 private keys. To encrypt an unencrypted private key, run:

# encrypt the key (will ask for a passphrase, make sure to use a strong one)
openssl pkcs8 -in ed25519key.pem -topk8 -out encrypted_ed25519key.pem

# delete the unencrypted key
rm ed25519key.pem

It can be parsed with an imported helper function parsePemKey(...) from wbn-sign npm package. For an encrypted private key there's also an async helper function (readPassphrase()) to prompt the user for the passphrase the key was encrypted with.

// For an unencrypted ed25519 key.
const key = wbnSign.parsePemKey(process.env.ED25519KEY);

// For an encrypted ed25519 key.
const key = wbnSign.parsePemKey(
  process.env.ENC_ED25519KEY,
  await wbnSign.readPassphrase()
);

Note that in order for the key to be parsed correctly, it must contain the BEGIN and END headers and line breaks (\n). Below an example .env file:

ED25519KEY="-----BEGIN PRIVATE KEY-----\nMC4CAQAwBQYDK2VwBCIEIB8nP5PpWU7HiILHSfh5PYzb5GAcIfHZ+bw6tcd/LZXh\n-----END PRIVATE KEY-----"

integrityBlockSign.strategy

Type: ISigningStrategy

Example web bundle plugin options using a signing strategy:

const pluginOptionsWithPredefinedSigningStrategy = {
  // ...other plugin options here...
  integrityBlockSign: {
    strategy: new wbnSign.NodeCryptoSigningStrategy(privateKey),
  },
};

const pluginOptionsWithCustomSigningStrategy = {
  // ...other plugin options here...
  integrityBlockSign: {
    strategy: new (class /* implements ISigningStrategy */ {
      async sign(data) {
        /** E.g. connect to one's external signing service that signs the
         * payload. */
      }
      async getPublicKey() {
        /** E.g. connect to one's external signing service that returns the
         * public key. */
      }
    })(),
  },
};

integrityBlockSign.strategies

Type: Array<ISigningStrategy>

Use this overload to sign a bundle with multiple keys. Note that webBundleId must always be specified when using strategies.

const pluginOptionsWithMultipleStrategiesAndWebBundleId = {
  // ...other plugin options here...
  integrityBlockSign: {
    strategies: [
      new NodeCryptoSigningStrategy(privateKey1),
      new NodeCryptoSigningStrategy(privateKey2)
    ],
    webBundleId: "some-random-id"
  },
};

integrityBlockSign.webBundleId

Type: string

Allows specifying a custom id for this signed web bundle to decouple it from the signing keys. Must be used together with strategies.

integrityBlockSign.isIwa (optional)

Type: boolean

Default: true

If undefined or true, enforces certain Isolated Web App -related checks for the headers. Also adds default IWA headers if completely missing. If set to false, skips validation checks and doesn't tamper with the headers.

headerOverride (optional)

Type: { [key: string]: string; } | (filepath: string) => { [key: string]: string; };

Object of strings specifying overridden headers or a function returning the same kind of object.

Discuss & Help

For discussions related to this repository's content, the Web Bundle plugins for webpack and rollup, please use GitHub Issues.

If you'd like to discuss the Web Packaging proposal itself, consider opening an issue in its incubation repository at https://github.com/WICG/webpackage.

For discussions related to Isolated Web Apps in general, or Chromium-specific implementation and development questions, please use the [email protected] mailing list.

If you'd like to discuss the Isolated Web Apps proposal, which builds on top of Web Bundles, consider opening an issue in the incubation repository at https://github.com/WICG/isolated-web-apps.

Release Notes

v0.2.0

  • Add support for the v2 integrity block format. Now web-bundle-id is no longer presumed to be a derivative of the first public key in the stack, but rather acts as a separate entry in the integrity block attributes, and multiple independent signatures are allowed to facilitate key rotation.

v0.1.4

  • Add support for ECDSA P-256 SHA-256 signing algorithm
  • Bumping underlying wbn-sign version to v0.1.3.

v0.1.3

  • Updates to style-src and wss CSP values.
  • Bumping underlying wbn-sign version to v0.1.1.

v0.1.2

  • Add support for integrityBlockSign.strategy plugin option which can be used to pass one of the predefined strategies or one's own implementation class for ISigningStrategy. One can also use the old integrityBlockSign.key option, which defaults to the predefined NodeCryptoSigningStrategy strategy.
  • Refactor plugin to be in TypeScript.
  • Combine the Webpack and Rollup web bundle plugins to live in the same repository and share some duplicated code. Taking advantage of npm workspaces.

v0.1.1

  • Add support for overriding headers with an optional headerOverride plugin option.

v0.1.0

  • BREAKING CHANGE: Change type of integrityBlockSign.key to be KeyObject instead of string.
  • Upgrade to support Rollup 3.

v0.0.4

License

Licensed under the Apache-2.0 license.

Contributing

See CONTRIBUTING.md file.

Disclaimer

This is not an officially supported Google product.