This repository contains an Isolated Web App that reads and displays the X.509 Certificate for Card Authentication present in a Personal Identity Verification (PIV) smart card.
It serves as a demonstration of the Web Smart Card API.
The following flags in chrome://flags
must be enabled:
#enable-isolated-web-apps
#enable-isolated-web-app-dev-mode
#install-isolated-web-app-from-url
: Here you enter the URL to the web server
running in your development machine, eg: http://192.168.1.4:8080
. More on
that later.#enable-smart-card-web-api
This project is written in TypeScript and uses npm and Webpack to manage dependencies and automate the build process. To get started clone the repository and install dependencies by running,
npm install
Chrome supports two options for Isolated Web App development. In "proxy" mode
you run a local development server as you would for normal web app development
on a URL like http://localhost:8080
. When the app is installed a random
isolated-app://
origin is created and the browser proxies requests for this
origin to your local server. This allows you to quickly edit and refresh the
app to see your changes. When developer mode is enabled Chrome also allows you
to self-sign a Web Bundle and load it as it would be for a production app.
When developing an Isolated Web App always make sure you are running the latest version of Chrome dev-channel as the feature is under active development.
To start a local development server run,
npm run start
Then log into your ChromeOS device. It will automatically install the Isolated
Web App served by the URL set in #install-isolated-web-app-from-url
. After a
couple of seconds you should see the "Smart Card Demo" app available in the
launcher as a newly installed app. Now you can remove that URL from
#install-isolated-web-app-from-url
, otherwise it will install a new app on
every new log in.
To build signed web bundle from this and sign it with a signing key within
your Google Cloud project using wbn-sign-gcp-kms, create .env
file in the
repository root with the following contents (replace ...
with actual values):
GCP_PROJECT='...'
GCP_KEY_RING='...'
GCP_KEY='...'
GCP_LOCATION='...'
GCP_KEY_VERSION='...'
and run
npm run build-gcp-kms
if You are correctly authenticated for the purpose of GCP KMS Node.js client,
the ready bundle will appear in dist/smart_card_demo.swbn
.