Integrating ALTCHA with a Strict CSP

To support strict Content Security Policies (CSP), the altcha package provides separate distributable assets located in the /dist_external directory. These assets can be included individually:

• altcha/external – The Web Component without injected CSS and Web Worker.
• altcha/worker – The Web Worker.
• altcha/altcha.css – CSS for the widget.

When using bundlers like Vite, these assets can be handled separately and bundled appropriately. You must configure the widget’s workerurl attribute to point to your output file, such as altcha-worker.js.

Setup

1. Configure Vite

Configure your bundler (Vite, in this example) to build the altcha-worker.js file as a separate asset.

// vite.config.js
import { resolve } from 'node:path';
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        altcha_worker: resolve(__dirname, 'src/altcha_worker.js'),
      },
      output: {
        entryFileNames: assetInfo =>
          assetInfo.name === 'altcha_worker'
            ? 'assets/[name].js'
            : 'assets/[name]-[hash].js',
      },
    },
  },
});

2. Import ALTCHA Assets

Import the external component and stylesheet in your application or component. Code-splitting during the build will generate the appropriate output files.

import 'altcha/external';
import 'altcha/altcha.css';

3. Create the altcha-worker.js File

This file should only import the ALTCHA worker module. It will be loaded at runtime via new Worker().

// src/altcha_worker.js
import 'altcha/worker';

4. Using the Widget

Insert the Web Component into your application:

<altcha-widget
  challengeurl="..."
  workerurl="./altcha_worker.js"
></altcha-widget>

Alternatively, instead of using the workerurl attribute, define the altchaCreateWorker function to dynamically create the worker:

globalThis.altchaCreateWorker = () => new Worker(
  new URL('./altcha_worker.js', import.meta.url),
  { type: 'module' }
);

This approach is especially useful if you need more control over worker instantiation.