@transcend-io/penumbra

Usage

Display an encrypted file

// Decrypt and display text
getDecryptedContent({
  url: 'https://s3-us-west-2.amazonaws.com/bencmbrook/NYT.txt.enc',
  filePrefix: 'NYT',
  mimetype: 'text/plain',
  decryptionOptions: {
    key: 'vScyqmJKqGl73mJkuwm/zPBQk0wct9eQ5wPE8laGcWM=',
    iv: '6lNU+2vxJw6SFgse',
    authTag: 'gadZhS1QozjEmfmHLblzbg==',
  },
})
  .then(decryptedText => {
    document.getElementById('my-paragraph').innerText = decryptedText;
  });

// Decrypt and display media
getDecryptedContent({
  url: 'https://s3-us-west-2.amazonaws.com/bencmbrook/tortoise.jpg.enc',
  filePrefix: 'tortoise',
  mimetype: 'image/jpeg',
  decryptionOptions: {
    key: 'vScyqmJKqGl73mJkuwm/zPBQk0wct9eQ5wPE8laGcWM=',
    iv: '6lNU+2vxJw6SFgse',
    authTag: 'ELry8dZ3djg8BRB+7TyXZA==',
  },
})
  .then(imageSrc => {
    document.getElementById('my-img').src = imageSrc;
  });

Download an encrypted file

downloadEncryptedFile({
  url: 'https://s3-us-west-2.amazonaws.com/bencmbrook/africa.topo.json.enc',
  filePrefix: 'africa',
  mimetype: 'image/jpeg',
  decryptionOptions: {
    key: 'vScyqmJKqGl73mJkuwm/zPBQk0wct9eQ5wPE8laGcWM=',
    iv: '6lNU+2vxJw6SFgse',
    authTag: 'ELry8dZ3djg8BRB+7TyXZA==',
  },
  progressEventName: 'download-progress' // defaults to the url
});

Prepare connections for file downloads in advance

// Resources to load
const resources = [{
  url: 'https://s3-us-west-2.amazonaws.com/bencmbrook/NYT.txt.enc',
  filePrefix: 'NYT',
  mimetype: 'text/plain',
  decryptionOptions: {
    key: 'vScyqmJKqGl73mJkuwm/zPBQk0wct9eQ5wPE8laGcWM=',
    iv: '6lNU+2vxJw6SFgse',
    authTag: 'gadZhS1QozjEmfmHLblzbg==',
  },
}, {
  url: 'https://s3-us-west-2.amazonaws.com/bencmbrook/tortoise.jpg.enc',
  filePrefix: 'tortoise',
  mimetype: 'image/jpeg',
  decryptionOptions: {
    key: 'vScyqmJKqGl73mJkuwm/zPBQk0wct9eQ5wPE8laGcWM=',
    iv: '6lNU+2vxJw6SFgse',
    authTag: 'ELry8dZ3djg8BRB+7TyXZA==',
  },
}]

// preconnect to the origins
preconnect(...resources);

// or preload all of the URLS
preload(...resources);

Download Progress Event Emitter

You can listen to a download progress event. The event name is the same as the url parameter

window.addEventListener(url, e => {
  console.log(`${e.detail}% done`);
});

Note: this feature requires the Content-Length response header to be exposed. This works by adding Access-Control-Expose-Headers: Content-Length to the response header (read more here and here)

On Amazon S3, this means adding the following line to your bucket policy, inside the <CORSRule> block:

<ExposeHeader>Content-Length</ExposeHeader>