Skip to content
This repository has been archived by the owner on May 12, 2023. It is now read-only.

A service worker that proxies fetch request in order to support HTTP Basic Authentication

License

Notifications You must be signed in to change notification settings

andornaut/http-basic-auth-proxy-worker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

http-basic-auth-proxy-worker

A service worker that proxies fetch request in order to support HTTP Basic Authentication.

This can be used to support HTTP Basic Authentication in <audio> and <video> elements, which are not permitted to include credentials in src attributes, eg. <video src="https://USERNAME:PASSWORD@example.com">.

Web browsers usually prompt the user to enter access credentials when resources require HTTP Basic Authentication, but this service worker can be used to avoid this prompt in cases where the access credentials are already known.

Note that resources whose request.destination is a <script> element are not proxied.

Getting Started

Install from npm.

npm install --save http-basic-auth-proxy-worker

Install the worker.js file at the root of your application or at a location that matches your desired scope.

// webpack.config.js
module.exports = {
  entry: {
    main: "./src/index.js",
    worker: "./node_modules/http-basic-auth-proxy-worker/worker.js"
  }
};

Register the service worker in your entrypoint script:

// index.js
const config = {
  baseUrl: "https://example.com/",
  username: "username",
  password: "password",
};

navigator.serviceWorker.addEventListener("message", event => {
  event.ports[0].postMessage(config);
});

navigator.serviceWorker.register("./worker.js");

This service worker sends its client(s) messages to request configuration. This service worker maintains a cache of its configuration, but clients can invalidate this cache by sending the a message:

// You can specify arbitrary message payload.
navigator.serviceWorker.controller.postMessage("invalidate-cache");

Configuration

This service worker must be configured in order for it to proxy requests. The configuration object should contain the following properties:

Name Description
baseUrl Required A URL prefix. If a fetched request.url begins with the "baseUrl", then it will be proxied.
username Required The username to include in the HTTP Basic Authentication header.
password The password to include in the HTTP Basic Authentication header.

Web Server

You may need to configure your web server to support CORS requests, by adding the requisite access control headers:

Example Nginx configuration

location / {
    root /var/www/html;
    autoindex on;

    auth_basic "Restricted Content";
    auth_basic_user_file /etc/nginx/cybertron.spacectrl.com.htpasswd;

    add_header Access-Control-Allow-Credentials true always;
    add_header Access-Control-Allow-Origin $http_origin always;
    add_header Access-Control-Allow-Methods GET,POST,HEAD,DELETE,PUT,OPTIONS always;
    add_header Access-Control-Allow-Headers authorization,chrome-proxy,range always;

    if ($request_method = 'OPTIONS') {
        add_header Access-Control-Allow-Credentials true always;
        add_header Access-Control-Allow-Origin $http_origin always;
        add_header Access-Control-Allow-Methods GET,POST,HEAD,DELETE,PUT,OPTIONS always;
        add_header Access-Control-Allow-Headers authorization,chrome-proxy,range always;
        return 204;
    }
}

Developing

Chrome

  • Navigate to chrome://flags/#unsafely-treat-insecure-origin-as-secure.
  • Enable this option, and then add your local domain to this list, eg. "localhost"

Firefox

  • Navigate to about:debugging#workers
  • Disable "multi content processes" by setting “dom.ipc.multiOptOut” to true in about:config.

About

A service worker that proxies fetch request in order to support HTTP Basic Authentication

Topics

Resources

License

Stars

Watchers

Forks