This commit is contained in:
Emily 2018-07-05 12:40:49 -07:00
parent 38ef52d3ba
commit 62ed0a411f
16 changed files with 245 additions and 133 deletions

View File

@ -1,4 +1,7 @@
import { arrayToB64, b64ToArray, delay } from './utils'; import { arrayToB64, b64ToArray, delay } from './utils';
import { ReadableStream as PolyRS} from 'web-streams-polyfill';
import { createReadableStreamWrapper } from '@mattiasbuelens/web-streams-adapter';
const RS = createReadableStreamWrapper(PolyRS);
function post(obj) { function post(obj) {
return { return {
@ -201,11 +204,11 @@ export function uploadWs(encrypted, info, metadata, verifierB64, onprogress) {
async function downloadS(id, keychain, onprogress, signal) { async function downloadS(id, keychain, onprogress, signal) {
const auth = await keychain.authHeader(); const auth = await keychain.authHeader();
try {
const response = await fetch(`/api/download/${id}`, { const response = await fetch(`/api/download/${id}`, {
signal: signal , signal: signal,
method: 'GET', method: 'GET',
headers: {'Authorization': auth} headers: { Authorization: auth }
}); });
if (response.status !== 200) { if (response.status !== 200) {
@ -218,21 +221,15 @@ async function downloadS(id, keychain, onprogress, signal) {
} }
const fileSize = response.headers.get('Content-Length'); const fileSize = response.headers.get('Content-Length');
onprogress([0, fileSize]);
console.log(response.body); //right now only chrome allows obtaining a stream from fetch
//for other browsers we fetch as a blob and convert to polyfill stream later
if (response.body) { if (response.body) {
return response.body; console.log("STREAM")
return RS(response.body);
} }
return response.blob(); return response.blob();
} catch (err) {
if (err.name === 'AbortError') {
throw new Error('0');
} else {
throw err;
}
}
} }
async function tryDownloadStream(id, keychain, onprogress, signal, tries = 1) { async function tryDownloadStream(id, keychain, onprogress, signal, tries = 1) {
@ -243,6 +240,9 @@ async function tryDownloadStream(id, keychain, onprogress, signal, tries = 1) {
if (e.message === '401' && --tries > 0) { if (e.message === '401' && --tries > 0) {
return tryDownloadStream(id, keychain, onprogress, signal, tries); return tryDownloadStream(id, keychain, onprogress, signal, tries);
} }
if (e.name === 'AbortError') {
throw new Error('0');
}
throw e; throw e;
} }
} }

View File

@ -1,12 +1,15 @@
require('buffer'); require('buffer');
import { TransformStream } from 'web-streams-polyfill'; import { TransformStream as PolyTS, ReadableStream as PolyRS } from 'web-streams-polyfill';
import { createReadableStreamWrapper, createTransformStreamWrapper } from '@mattiasbuelens/web-streams-adapter';
const toTS = createTransformStreamWrapper(PolyTS);
const toRS = createReadableStreamWrapper(PolyRS);
const NONCE_LENGTH = 12; const NONCE_LENGTH = 12;
const TAG_LENGTH = 16; const TAG_LENGTH = 16;
const KEY_LENGTH = 16; const KEY_LENGTH = 16;
const MODE_ENCRYPT = 'encrypt'; const MODE_ENCRYPT = 'encrypt';
const MODE_DECRYPT = 'decrypt'; const MODE_DECRYPT = 'decrypt';
const RS = 1048576; const RS = 1024 * 1024;
const encoder = new TextEncoder(); const encoder = new TextEncoder();
@ -218,13 +221,14 @@ class ECETransformer {
} }
async flush(controller) { async flush(controller) {
//console.log('ece stream ends')
if (this.prevChunk) { if (this.prevChunk) {
await this.transformPrevChunk(true, controller); await this.transformPrevChunk(true, controller);
} }
} }
} }
class BlobSlicer { export class BlobSlicer {
constructor(blob, rs, mode) { constructor(blob, rs, mode) {
this.blob = blob; this.blob = blob;
this.index = 0; this.index = 0;
@ -262,28 +266,27 @@ class StreamSlicer {
constructor(rs, mode) { constructor(rs, mode) {
this.mode = mode; this.mode = mode;
this.rs = rs; this.rs = rs;
this.chunkSize = mode === MODE_ENCRYPT ? rs - 17 : 21; this.chunkSize = (mode === MODE_ENCRYPT) ? (rs - 17) : 21;
this.partialChunk = new Uint8Array(this.chunkSize); //where partial chunks are saved this.partialChunk = new Uint8Array(this.chunkSize); //where partial chunks are saved
this.offset = 0; this.offset = 0;
} }
send(buf, controller) { send(buf, controller) {
//console.log("sent a record")
controller.enqueue(buf); controller.enqueue(buf);
if (this.chunkSize === 21) { if (this.chunkSize === 21 && this.mode === MODE_DECRYPT) {
this.chunkSize = this.rs; this.chunkSize = this.rs;
}
this.partialChunk = new Uint8Array(this.chunkSize); this.partialChunk = new Uint8Array(this.chunkSize);
} }
}
//reslice input uint8arrays into record sized chunks //reslice input into record sized chunks
transform(chunk, controller) { transform(chunk, controller) {
//console.log('Received chunk') // with %d bytes.', chunk.byteLength) //console.log('Received chunk with %d bytes.', chunk.byteLength)
let i = 0; let i = 0;
if (this.offset > 0) { //send off the partial chunk if (this.offset > 0) {
const len = Math.min(chunk.byteLength, (this.chunkSize - this.offset)); const len = Math.min(chunk.byteLength, (this.chunkSize - this.offset));
this.partialChunk.set((chunk.slice(0, len)), this.offset); this.partialChunk.set(chunk.slice(0, len), this.offset);
this.offset += len; this.offset += len;
i += len; i += len;
@ -293,32 +296,41 @@ class StreamSlicer {
} }
} }
while (i < chunk.byteLength) { //send off whole records and stick last bit in partialChunk while (i < chunk.byteLength) {
if ((chunk.byteLength - i) > this.chunkSize) { if ((chunk.byteLength - i) >= this.chunkSize) {
const record = chunk.slice(i, i + this.chunkSize); const record = chunk.slice(i, i + this.chunkSize);
i += this.chunkSize; i += this.chunkSize;
this.send(record, controller); this.send(record, controller);
} else { } else {
const end = chunk.slice(i, end); const end = chunk.slice(i, this.chunkSize);
i += end.length;
this.partialChunk.set(end); this.partialChunk.set(end);
this.offset = end.length; this.offset = end.length;
i += end.length;
} }
} }
} }
flush(controller) { flush(controller) {
//console.log('slice stream ends')
if (this.offset > 0) { if (this.offset > 0) {
console.log("sent a partial record")
controller.enqueue(this.partialChunk.slice(0, this.offset)); controller.enqueue(this.partialChunk.slice(0, this.offset));
} }
} }
} }
async function stream2blob(stream) {
const chunks = [];
const reader = stream.getReader();
let state = await reader.read();
while (!state.done) {
chunks.push(state.value);
state = await reader.read();
}
return new Blob(chunks);
}
/* /*
input: a blob or a readable stream containing data to be transformed input: a blob or a ReadableStream containing data to be transformed
key: Uint8Array containing key of size KEY_LENGTH key: Uint8Array containing key of size KEY_LENGTH
mode: string, either 'encrypt' or 'decrypt' mode: string, either 'encrypt' or 'decrypt'
rs: int containing record size, optional rs: int containing record size, optional
@ -326,26 +338,37 @@ salt: ArrayBuffer containing salt of KEY_LENGTH length, optional
*/ */
export default class ECE { export default class ECE {
constructor(input, key, mode, rs, salt) { constructor(input, key, mode, rs, salt) {
this.input = input;
this.key = key;
this.mode = mode;
this.rs = rs;
this.salt = salt;
if (rs === undefined) { if (rs === undefined) {
rs = RS; this.rs = RS;
} }
if (salt === undefined) { if (salt === undefined) {
salt = generateSalt(KEY_LENGTH); this.salt = generateSalt(KEY_LENGTH);
}
} }
let inputStream; info() {
if (input instanceof Blob) { return {
this.streamInfo = { recordSize: this.rs,
recordSize: rs, fileSize: 21 + this.input.size + 16 * Math.floor(this.input.size / (this.rs - 17))
fileSize: 21 + input.size + 16 * Math.floor(input.size / (rs - 17))
}; };
inputStream = new ReadableStream(new BlobSlicer(input, rs, mode));
} else {
const sliceStream = new TransformStream(new StreamSlicer(rs, mode));
inputStream = input.pipeThrough(sliceStream);
} }
const ts = new TransformStream(new ECETransformer(mode, key, rs, salt)); transform() {
this.stream = inputStream.pipeThrough(ts); let inputStream;
if (this.input instanceof Blob) {
inputStream = toRS(new ReadableStream(new BlobSlicer(this.input, this.rs, this.mode)));
} else {
const sliceStream = toTS(new TransformStream(new StreamSlicer(this.rs, this.mode)));
inputStream = this.input.pipeThrough(sliceStream);
}
const cryptoStream = toTS(new TransformStream(new ECETransformer(this.mode, this.key, this.rs, this.salt)));
return inputStream.pipeThrough(cryptoStream);
} }
} }

View File

@ -36,6 +36,12 @@ export default function(state, emitter) {
} }
} }
function register() {
navigator.serviceWorker.register('/serviceWorker.js')
.then( reg => console.log("registration successful or already installed"))
.catch( e => console.log(e) );
}
function updateProgress() { function updateProgress() {
if (updateTitle) { if (updateTitle) {
emitter.emit('DOMTitleChange', percent(state.transfer.progressRatio)); emitter.emit('DOMTitleChange', percent(state.transfer.progressRatio));
@ -162,6 +168,13 @@ export default function(state, emitter) {
} }
} }
} }
const info = {
key: file.secretKey,
nonce: file.nonce
}
navigator.serviceWorker.controller.postMessage(info);
render(); render();
}); });

View File

@ -1,7 +1,7 @@
import Nanobus from 'nanobus'; import Nanobus from 'nanobus';
import Keychain from './keychain'; import Keychain from './keychain';
import { bytes } from './utils'; import { bytes } from './utils';
import { metadata, downloadFile, downloadStream} from './api'; import { metadata, downloadFile, downloadStream } from './api';
export default class FileReceiver extends Nanobus { export default class FileReceiver extends Nanobus {
constructor(fileInfo) { constructor(fileInfo) {
@ -51,89 +51,56 @@ export default class FileReceiver extends Nanobus {
this.state = 'ready'; this.state = 'ready';
} }
/* async streamToArrayBuffer(stream, streamSize, onprogress) {
async streamToArrayBuffer(stream, streamSize) {
try {
var finish;
const promise = new Promise((resolve) => {
finish = resolve;
});
const result = new Uint8Array(streamSize);
let offset = 0;
const writer = new WritableStream(
{
write(chunk) {
result.set(state.value, offset);
offset += state.value.length;
},
close() {
//resolve a promise or something
finish.resolve();
}
}
);
stream.pipeTo(writer);
await promise;
return result.slice(0, offset).buffer;
} catch (e) {
console.log(e)
}
}
*/
async streamToArrayBuffer(stream, streamSize) {
try { try {
const result = new Uint8Array(streamSize); const result = new Uint8Array(streamSize);
let offset = 0; let offset = 0;
console.log("reading...")
const reader = stream.getReader(); const reader = stream.getReader();
let state = await reader.read(); let state = await reader.read();
console.log("read done")
while (!state.done) { while (!state.done) {
result.set(state.value, offset); result.set(state.value, offset);
offset += state.value.length; offset += state.value.length;
state = await reader.read(); state = await reader.read();
onprogress([offset, streamSize]);
} }
onprogress([streamSize, streamSize]);
return result.slice(0, offset).buffer; return result.slice(0, offset).buffer;
} catch (e) { } catch (e) {
console.log(e) console.log(e);
throw (e);
} }
} }
async download(noSave = false) { async download(noSave = false) {
this.state = 'downloading'; const onprogress = p => {
this.downloadRequest = await downloadStream(
this.fileInfo.id,
this.keychain,
p => {
this.progress = p; this.progress = p;
this.emit('progress'); this.emit('progress');
} }
);
try { try {
this.state = 'downloading';
this.downloadRequest = downloadStream(
this.fileInfo.id,
this.keychain
);
const ciphertext = await this.downloadRequest.result; onprogress([0, this.fileInfo.size]);
const download = await this.downloadRequest.result;
const plainstream = this.keychain.decryptStream(download);
//temporary
const plaintext = await this.streamToArrayBuffer(
plainstream,
this.fileInfo.size,
onprogress
);
this.downloadRequest = null; this.downloadRequest = null;
this.msg = 'decryptingFile'; this.msg = 'decryptingFile';
this.state = 'decrypting'; this.state = 'decrypting';
this.emit('decrypting'); this.emit('decrypting');
const dec = this.keychain.decryptStream(ciphertext);
let plaintext = await this.streamToArrayBuffer(
dec.stream,
this.fileInfo.size
);
if (plaintext === undefined) { plaintext = (new Uint8Array(1)).buffer; }
if (!noSave) { if (!noSave) {
await saveFile({ await saveFile({
plaintext, plaintext,
@ -144,7 +111,6 @@ export default class FileReceiver extends Nanobus {
this.msg = 'downloadFinish'; this.msg = 'downloadFinish';
this.state = 'complete'; this.state = 'complete';
} catch (e) { } catch (e) {
this.downloadRequest = null; this.downloadRequest = null;
throw e; throw e;

View File

@ -65,7 +65,7 @@ export default class FileSender extends Nanobus {
this.msg = 'encryptingFile'; this.msg = 'encryptingFile';
this.emit('encrypting'); this.emit('encrypting');
const enc = this.keychain.encryptStream(this.file); const enc = await this.keychain.encryptStream(this.file);
const metadata = await this.keychain.encryptMetadata(this.file); const metadata = await this.keychain.encryptMetadata(this.file);
const authKeyB64 = await this.keychain.authKeyB64(); const authKeyB64 = await this.keychain.authKeyB64();

View File

@ -180,13 +180,16 @@ export default class Keychain {
} }
encryptStream(plaintext) { encryptStream(plaintext) {
const enc = new ECE(plaintext, this.rawSecret, 'encrypt'); const ece = new ECE(plaintext, this.rawSecret, 'encrypt');
return enc; return {
stream: ece.transform(),
streamInfo: ece.info()
};
} }
decryptStream(encstream) { decryptStream(cryptotext) {
const dec = new ECE(encstream, this.rawSecret, 'decrypt'); const ece = new ECE(cryptotext, this.rawSecret, 'decrypt');
return dec; return ece.transform();
} }
async decryptFile(ciphertext) { async decryptFile(ciphertext) {

View File

@ -9,11 +9,18 @@ import storage from './storage';
import metrics from './metrics'; import metrics from './metrics';
import experiments from './experiments'; import experiments from './experiments';
import Raven from 'raven-js'; import Raven from 'raven-js';
import assets from '../common/assets';
if (navigator.doNotTrack !== '1' && window.RAVEN_CONFIG) { if (navigator.doNotTrack !== '1' && window.RAVEN_CONFIG) {
Raven.config(window.SENTRY_ID, window.RAVEN_CONFIG).install(); Raven.config(window.SENTRY_ID, window.RAVEN_CONFIG).install();
} }
function register(state, emitter) {
navigator.serviceWorker.register('serviceWorker.js')
.then( reg => console.log("registration successful or already installed"))
.catch( e => console.log(e) );
}
app.use((state, emitter) => { app.use((state, emitter) => {
state.transfer = null; state.transfer = null;
state.fileInfo = null; state.fileInfo = null;
@ -44,6 +51,7 @@ app.use((state, emitter) => {
}); });
}); });
app.use(register);
app.use(metrics); app.use(metrics);
app.use(fileManager); app.use(fileManager);
app.use(dragManager); app.use(dragManager);

38
app/serviceWorker.js Normal file
View File

@ -0,0 +1,38 @@
import Keychain from './keychain';
self.addEventListener('install', (event) => {
console.log("install event on sw")
self.skipWaiting();
});
async function decryptStream(request) {
console.log("DOWNLOAD FETCH")
//make actual request to server, get response back, decrypt it, send it
const response = await fetch(req,
{
method: 'GET',
headers: { Authorization: auth }
}
);
if (response.status !== 200) {
console.log(response.status)
throw new Error(response.status);
}
const body = response.body;
console.log(body);
return response;
}
self.onfetch = (event) => {
const req = event.request.clone();
if (req.url.includes('/api/download')) {
event.respondWith(decryptStream(req));
}
};
self.onmessage = (event) => {
self.keychain = new Keychain(event.data.key, event.data.nonce);
};

View File

@ -20,6 +20,7 @@ module.exports = function() {
const files = fs.readdirSync(path.join(__dirname, '..', 'assets')); const files = fs.readdirSync(path.join(__dirname, '..', 'assets'));
const code = `module.exports = { const code = `module.exports = {
"package.json": require('../package.json'), "package.json": require('../package.json'),
"serviceWorker.js" : require('../app/serviceWorker.js'),
${files.map(kv).join(',\n')} ${files.map(kv).join(',\n')}
};`; };`;
return { return {

13
package-lock.json generated
View File

@ -89,6 +89,11 @@
"integrity": "sha1-9vGlzl05caSt6RoR0i1MRZrNN18=", "integrity": "sha1-9vGlzl05caSt6RoR0i1MRZrNN18=",
"dev": true "dev": true
}, },
"@mattiasbuelens/web-streams-adapter": {
"version": "0.1.0-alpha.1",
"resolved": "https://registry.npmjs.org/@mattiasbuelens/web-streams-adapter/-/web-streams-adapter-0.1.0-alpha.1.tgz",
"integrity": "sha512-8YK2ZY6CAgrzFGfW2uPyNDMYvh7OmWjrlbdP+GeHiMJhzPF3XwrQaHyLQ4IZqGTj8NW879ttfbcqbLqQxWvtsw=="
},
"@sinonjs/formatio": { "@sinonjs/formatio": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz", "resolved": "https://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz",
@ -1172,6 +1177,14 @@
"regenerator-transform": "0.10.1" "regenerator-transform": "0.10.1"
} }
}, },
"babel-plugin-transform-runtime": {
"version": "6.23.0",
"resolved": "https://registry.npmjs.org/babel-plugin-transform-runtime/-/babel-plugin-transform-runtime-6.23.0.tgz",
"integrity": "sha1-iEkNRGUC6puOfvsP4J7E2ZR5se4=",
"requires": {
"babel-runtime": "6.26.0"
}
},
"babel-plugin-transform-strict-mode": { "babel-plugin-transform-strict-mode": {
"version": "6.24.1", "version": "6.24.1",
"resolved": "https://registry.npmjs.org/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz", "resolved": "https://registry.npmjs.org/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz",

View File

@ -12,7 +12,7 @@
"prepush": "npm test", "prepush": "npm test",
"check": "nsp check", "check": "nsp check",
"clean": "rimraf dist", "clean": "rimraf dist",
"build": "npm run clean && webpack -p", "build": "npm run clean && webpack -p && webpack --config webpackSw.config.js -p",
"lint": "npm-run-all lint:*", "lint": "npm-run-all lint:*",
"lint:css": "stylelint app/*.css app/**/*.css", "lint:css": "stylelint app/*.css app/**/*.css",
"lint:js": "eslint .", "lint:js": "eslint .",
@ -118,8 +118,11 @@
"webpack-unassert-loader": "^1.2.0" "webpack-unassert-loader": "^1.2.0"
}, },
"dependencies": { "dependencies": {
"@mattiasbuelens/web-streams-adapter": "0.1.0-alpha.1",
"aws-sdk": "^2.206.0", "aws-sdk": "^2.206.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0", "babel-polyfill": "^6.26.0",
"babel-runtime": "^6.26.0",
"choo": "^6.10.0", "choo": "^6.10.0",
"cldr-core": "^32.0.0", "cldr-core": "^32.0.0",
"convict": "^4.0.1", "convict": "^4.0.1",

View File

@ -1,4 +1,5 @@
const config = require('../config'); const config = require('../config');
const assets = require('../../common/assets');
let sentry = ''; let sentry = '';
if (config.sentry_id) { if (config.sentry_id) {
@ -36,6 +37,7 @@ if (isIE && !isUnsupportedPage) {
} }
var MAXFILESIZE = ${config.max_file_size}; var MAXFILESIZE = ${config.max_file_size};
var EXPIRE_SECONDS = ${config.expire_seconds}; var EXPIRE_SECONDS = ${config.expire_seconds};
var SERVICEWORKER = '${assets.get('serviceWorker.js')}';
${ga} ${ga}
${sentry} ${sentry}
`; `;

View File

@ -13,7 +13,7 @@ describe('API', function() {
describe('websocket upload', function() { describe('websocket upload', function() {
it('returns file info on success', async function() { it('returns file info on success', async function() {
const keychain = new Keychain(); const keychain = new Keychain();
const enc = keychain.encryptStream(plaintext); const enc = await keychain.encryptStream(plaintext);
const meta = await keychain.encryptMetadata(metadata); const meta = await keychain.encryptMetadata(metadata);
const verifierB64 = await keychain.authKeyB64(); const verifierB64 = await keychain.authKeyB64();
const p = function() {}; const p = function() {};
@ -27,7 +27,7 @@ describe('API', function() {
it('can be cancelled', async function() { it('can be cancelled', async function() {
const keychain = new Keychain(); const keychain = new Keychain();
const enc = keychain.encryptStream(plaintext); const enc = await keychain.encryptStream(plaintext);
const meta = await keychain.encryptMetadata(metadata); const meta = await keychain.encryptMetadata(metadata);
const verifierB64 = await keychain.authKeyB64(); const verifierB64 = await keychain.authKeyB64();
const p = function() {}; const p = function() {};

View File

@ -31,7 +31,8 @@ describe('Streaming', function() {
const blob = new Blob([str], { type: 'text/plain' }); const blob = new Blob([str], { type: 'text/plain' });
it('can encrypt', async function() { it('can encrypt', async function() {
const encStream = new ECE(blob, key, 'encrypt', rs, salt).stream; const ece = new ECE(blob, key, 'encrypt', rs, salt);
const encStream = await ece.transform();
const reader = encStream.getReader(); const reader = encStream.getReader();
let result = Buffer.from([]); let result = Buffer.from([]);
@ -47,7 +48,8 @@ describe('Streaming', function() {
it('can decrypt', async function() { it('can decrypt', async function() {
const encBlob = new Blob([encrypted]); const encBlob = new Blob([encrypted]);
const decStream = await new ECE(encBlob, key, 'decrypt', rs).stream; const ece = new ECE(encBlob, key, 'decrypt', rs);
const decStream = await ece.transform()
const reader = decStream.getReader(); const reader = decStream.getReader();
let result = Buffer.from([]); let result = Buffer.from([]);

View File

@ -40,7 +40,7 @@ module.exports = {
test: /\.js$/, test: /\.js$/,
oneOf: [ oneOf: [
{ {
include: require.resolve('./assets/cryptofill'), include: [require.resolve('./assets/cryptofill')],
use: [ use: [
{ {
loader: 'file-loader', loader: 'file-loader',

40
webpackSw.config.js Normal file
View File

@ -0,0 +1,40 @@
const path = require('path');
const webpack = require('webpack');
const regularJSOptions = {
babelrc: false,
presets: [['env', { modules: false }], 'stage-2'],
// yo-yoify converts html template strings to direct dom api calls
plugins: [
"transform-runtime", {
//"polyfill": false,
//"regenerator": true
}
]
};
const entry = {
serviceWorker: ['./app/serviceWorker.js']
};
module.exports = {
entry,
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
module: {
rules: [
{
loader: 'babel-loader',
// exclude: /node_modules/,
include: [
path.resolve(__dirname, 'app'),
path.resolve(__dirname, 'node_modules/buffer')
],
options: regularJSOptions
}
]
}
};