Added https functionality to GUI

socket.js → crypto.js

@@ -1,7 +1,7 @@
 (function() {
 
 // function to create certificate
-var createCert = function(cn, data) {
+var createCrypto = function(cn, data) {
   console.log(
     'Generating 1024-bit key-pair and certificate for \"' + cn + '\".');
   var keys = forge.pki.rsa.generateKeyPair(1024);
@@ -12,7 +12,7 @@ var createCert = function(cn, data) {
   cert.validity.notBefore = new Date();
   cert.validity.notAfter = new Date();
   cert.validity.notAfter.setFullYear(
-    cert.validity.notBefore.getFullYear() + 1);
+    cert.validity.notBefore.getFullYear() + 10);
   var attrs = [{
     name: 'commonName',
     value: cn
@@ -24,13 +24,13 @@ var createCert = function(cn, data) {
     value: 'test-st'
   }, {
     name: 'localityName',
-    value: 'test-locality'
+    value: 'testing server'
   }, {
     name: 'organizationName',
-    value: 'Testapp'
+    value: 'Web server for chrome'
   }, {
     shortName: 'OU',
-    value: 'Test'
+    value: 'WSC'
   }];
   cert.setSubject(attrs);
   cert.setIssuer(attrs);
@@ -64,18 +64,21 @@ var createCert = function(cn, data) {
     privateKey: forge.pki.privateKeyToPem(keys.privateKey)
   };
 
+  return data;
   //console.log('certificate created for \"' + cn + '\": \n' + data[cn].cert);
 };
 
 var end = {};
 var data = {};
 
 // create certificate for server and client
-createCert('server', data);
-createCert('client', data);
+createCrypto('server', data);
+createCrypto('client', data);
 console.log(data.server.privateKey);
 console.log(data.server.cert);
 
+WSC.createCrypto = (name) => { return createCrypto(name, {}); }
+
 
 var success = false;
 let secret = "My secret message", response, roundtrip;

makedeps/index.js

@@ -9,6 +9,9 @@ window.ReactDOM = m
 m = require('@material-ui/core')
 window.MaterialUI = m
 
+m = require('@material-ui/lab');
+window.MaterialUILab = m
+
 m = require('underscore')
 window._ = m
 

makedeps/package.json

@@ -10,6 +10,7 @@
     "@babel/plugin-transform-react-jsx": "^7.13.12",
     "@material-ui/core": "^4.6.1",
     "@material-ui/icons": "^4.5.1",
+    "@material-ui/lab": "^4.0.0-alpha.57",
     "babel": "^6.23.0",
     "browserify": "^16.5.0",
     "node-forge": "^0.10.0",

manifest.json

@@ -11,7 +11,7 @@
     "app": {
         "background": {
             "scripts": ["underscore.js","encoding.js","common.js","assets/bundle.js",
-            "log-full.js", "mime.js", "buffer.js","request.js","socket.js","stream.js", "chromesocketxhr.js",
+            "log-full.js", "mime.js", "buffer.js","request.js","crypto.js","stream.js", "chromesocketxhr.js",
             "connection.js","webapp.js","websocket.js","handlers.js","httplib.js","upnp.js","background.js"]
         }
     },

minimize.sh

@@ -1 +1 @@
-cat "underscore.js" "encoding.js" "common.js" "log-full.js" "mime.js" "buffer.js" "request.js" "socket.js" "stream.js" "chromesocketxhr.js" "connection.js" "webapp.js" "websocket.js" "upnp.js" "handlers.js" "httplib.js" > wsc-chrome.min.js
+cat "underscore.js" "encoding.js" "common.js" "log-full.js" "mime.js" "buffer.js" "request.js" "crypto.js" "stream.js" "chromesocketxhr.js" "connection.js" "webapp.js" "websocket.js" "upnp.js" "handlers.js" "httplib.js" > wsc-chrome.min.js

react-ui/js/index.js

@@ -12,9 +12,11 @@ const {
   Toolbar,
   Typography,
   Button,
-  ThemeProvider,
+  ThemeProvider
 } = MaterialUI
 
+const {Alert} = MaterialUILab;
+
 const {createMuiTheme, colors, withStyles} = MaterialUI;
 const styles = {
   card: {margin: '10px'},
@@ -84,7 +86,25 @@ const functions = {
 			webapp.opts.optBackground = val
 			bg.backgroundSettingChange({'optBackground':val})
 		}
-	}
+  },
+  optPrivateKey: (app, k, val) => {
+    console.log('privateKey')
+    console.assert(typeof val === 'string')
+    app.webapp.updateOption('optPrivateKey', val);
+  },
+  optCertificate: (app, k, val) => {
+    console.log('certificate', val);
+    console.assert(typeof val === 'string')
+    app.webapp.updateOption('optCertificate', val);
+  },
+  optUseHttps: (app, k, val) => {
+    console.log("useHttps", val);
+    app.webapp.updateOption('optUseHttps', val);
+    if (app.webapp.started) {
+      app.webapp.stop();
+      app.webapp.start();
+    }
+  }
 };
 
 
@@ -118,7 +138,7 @@ class App extends React.Component {
     starting: false,
     lasterr: null,
     folder: null,
-    message: '',
+    message: ''
   }
   constructor(props) {
     super(props)
@@ -174,6 +194,21 @@ class App extends React.Component {
       interfaces: this.webapp.urls.slice()
     })
   }
+  gen_crypto() {
+  	let reasonStr = this.webapp.opts.optPrivateKey ? "private key" :
+  	                   this.webapp.opts.optCertificate ? "certificate" : "";
+  	if (reasonStr) {
+      console.warn("Would overwrite existing " + reasonStr + ", erase it first\nMake sure to save a copy first");
+      return;
+    }
+    let cn = "WebServerForChrome" + (new Date()).toISOString();
+    let data = this.webapp.createCrypto(cn);
+    this.setState({optPrivateKey: data[cn].privateKey, optCertificate: data[cn].cert});
+    this.appOptions.set('optPrivateKey', data[cn].privateKey);
+    this.appOptions.set('optCertificate', data[cn].cert);
+    this.webapp.updateOption('optPrivateKey', data[cn].privateKey);
+    this.webapp.updateOption('optCertificate', data[cn].cert);
+  }
   ui_ready() {
     if (this.webapp) {
       if (! (this.webapp.started || this.webapp.starting)) {
@@ -225,9 +260,12 @@ class App extends React.Component {
       optModRewriteEnable: null,
       optModRewriteRegexp: ['optModRewriteEnable'],
       optModRewriteNegate: ['optModRewriteEnable'],
-      optModRewriteTo: ['optModRewriteEnable']
-    }
-    console.assert(this)
+      optModRewriteTo: ['optModRewriteEnable'],
+      optUseHttps: null,
+      optPrivateKey: null,
+      optCertificate: null
+    };
+    console.assert(this);
 
     const renderOpts = (opts) => {
       const _this = this;
@@ -253,6 +291,19 @@ class App extends React.Component {
       this.setState({showAdvanced: !this.state.showAdvanced})
     }}
     >{this.state.showAdvanced ? 'Hide Advanced Options' : 'Show Advanced Options'}</a></div>)
+
+    const genCryptoButton = (<div>
+        {this.webapp && (this.webapp.opts.optPrivateKey || this.webapp.opts.optCertificate) &&
+            <Alert severity="info">To regenerate, remove key and cert. Be sure to take a copy first, for possible later use!</Alert>}
+        <Button variant="contained"
+             disabled={this.webapp && (this.webapp.opts.optPrivateKey || this.webapp.opts.optCertificate)  ? true : false}
+             onClick={e => {
+				  e.preventDefault();
+				  this.gen_crypto();
+				  //this.setState({showAdvanced: !this.state.showAdvanced})
+				}}>Generate crypto</Button>
+	</div>)
+
     const {state} = this;
     return (<div>
       <ThemeProvider theme={theme}>
@@ -316,7 +367,7 @@ class App extends React.Component {
           {options}
 
           {advancedButton}
-          {state.showAdvanced && <div>{advOptions}</div>}
+          {state.showAdvanced && <div>{advOptions}{genCryptoButton}</div> }
         </CardContent>
       </Card>
 

react-ui/js/options.js

@@ -69,6 +69,7 @@ export function AppOption({disabled, indent, name, value, appOptions, onChange:
           <TextField
             disabled={disabled}
             onChange={onChange}
+            helperText={meta.label}
             label={meta.label}
             margin="normal"
             value={value}
@@ -198,6 +199,22 @@ const options = {
     help: 'Which file to server instead of the actual path. For example, /index.html',
     type: String,
     default: '/index.html'
+  },
+  optUseHttps: {
+    label: 'Use https://',
+    help: 'Serve pages through https://',
+    type: Boolean,
+    default: false
+  },
+  optPrivateKey: {
+  	label: 'Private key string',
+  	help: "String containg private key, used in pair with certificate string.\nEdit them in pairs",
+  	type: String
+  },
+  optCertificate: {
+  	label: 'Certificate string',
+  	help: "String containg certificate, used in pair with private key string.\nEdit them in pairs",
+  	type: String 
   }
 }
 

stream.js

@@ -1,5 +1,6 @@
 (function() {
 
+/*
 	const serverCert = 
 "-----BEGIN CERTIFICATE-----\n\
 MIICgjCCAeugAwIBAgIBATANBgkqhkiG9w0BAQsFADBpMQ8wDQYDVQQDEwZzZXJ2\n\
@@ -34,7 +35,7 @@ KfkEiJIVYIVBDosy8Ho4CBmWAGqhzqICYe8FYwsU67ur2NEPRU3m395PYEAadjok\n\
 yil1kn+r+kTR+m6RAkEAkIOQOleOZ+btbQTETMEDFnO/g6cuVhSXoemGmY6BY8k4\n\
 14AmYpksffL217BZU5OUcWVfCyNBfYZCklaakhK9Jw==\n\
 -----END RSA PRIVATE KEY-----";
-
+*/
     var peerSockMap = {}
     WSC.peerSockMap = peerSockMap
 
@@ -281,48 +282,37 @@ yil1kn+r+kTR+m6RAkEAkIOQOleOZ+btbQTETMEDFnO/g6cuVhSXoemGmY6BY8k4\n\
      }
 
 
-    var IOStreamTls = function(sockId) {
+    var IOStreamTls = function(sockId, privateKey, serverCert) {
         this.writeCallbacks = [];
         this.readCallbacks = [];
         var _t = this;
 
 		this.tlsServer = forge.tls.createConnection({
 		  server: true,
-		  //caStore: [WSC.Tls.data.client.cert],
 		  sessionCache: {},
 		  // supported cipher suites in order of preference
 		  cipherSuites: [
 			forge.tls.CipherSuites.TLS_RSA_WITH_AES_128_CBC_SHA,
 			forge.tls.CipherSuites.TLS_RSA_WITH_AES_256_CBC_SHA],
 		  connected: function(c) {
-			console.log('Server connected');
+			//console.log('Server connected');
 			//c.prepareHeartbeatRequest('heartbeat');
 		  },
-		  verifyClient: false,// true,
-//		  verify: function(c, verified, depth, certs) {
-//			console.log(
-//			  'Server verifying certificate w/CN: \"' +
-//			  certs[0].subject.getField('CN').value +
-//			  '\", verified: ' + verified + '...');
-//			return verified;
-//		  },
+		  verifyClient: false,
 		  getCertificate: function(c, hint) {
-			console.log('Server getting certificate for \"' + hint[0] + '\"...');
+			//console.log('Server getting certificate for \"' + hint[0] + '\"...');
 			return serverCert; //WSC.Tls.data.server.cert;
 		  },
 		  getPrivateKey: function(c, cert) {
-			console.log('Server getting privateKey for \"' + cert + '\"...');
+			//console.log('Server getting privateKey for \"' + cert + '\"...');
 			return privateKey;//WSC.Tls.data.server.privateKey;
-
-
 		  },
 		  tlsDataReady: function(c) {
 			// send TLS data to client
-			//end.client.process(c.tlsData.getBytes());
-			var cb = _t.writeCallbacks.pop() || function(){}; // || function(){_t.error(c.tlsData);}
+			var cb = _t.writeCallbacks.pop() || function(){};
 			let str = c.tlsData.getBytes();
 			var b = WSC.str2ab(str);
-			console.log('encrypt to client: ' + str);
+			//console.log('encrypt to client: ' + str);
 			if (this.connected)
                 chrome.sockets.tcp.send( _t.sockId, b, cb);
             else
@@ -331,17 +321,13 @@ yil1kn+r+kTR+m6RAkEAkIOQOleOZ+btbQTETMEDFnO/g6cuVhSXoemGmY6BY8k4\n\
 		  dataReady: function(c) {
 		  	// decrypted data from client
 		  	let str = c.data.getBytes();
-			console.log('client sent \"' + str + '\"');
+			//console.log('client sent \"' + str + '\"');
 			_t.readBuffer.add(WSC.str2ab(str));
             if (_t.onread) { _t.onread() }
             _t.checkBuffer()
-
-			// send response
-			//c.prepare('Hello Client');
-			//c.close();
 		  },
 		  heartbeatReceived: function(c, payload) {
-			console.log('Server received heartbeat: ' + payload.getBytes());
+			//console.log('Server received heartbeat: ' + payload.getBytes());
 		  },
 		  closed: function(c) {
 			console.log('Server disconnected.');
@@ -355,21 +341,18 @@ yil1kn+r+kTR+m6RAkEAkIOQOleOZ+btbQTETMEDFnO/g6cuVhSXoemGmY6BY8k4\n\
     }
     IOStreamTls.prototype = {
         _writeToTcp: function(data, cb) {
-        	let str = WSC.arrayBufferToString(data);
-        	console.log('send to client: ' + str);
+        	let s = WSC.ui82str(new Uint8Array(data));
         	this.writeCallbacks.push(cb);
-        	this.tlsServer.prepare(str);
+        	this.tlsServer.prepare(s);
         },
         _fillReadBuffer: function(data) {
         	let str = arrayBuffer2String(data);
         	let n = this.tlsServer.process(str);
-            console.log('from client: ' + str);
         }
     };
-    IOStreamTls.prototype.__proto__ = IOStream.prototype; //; = Object.create(chrome.sockets.tcp, {constructor: {value: IOStream}})
+    IOStreamTls.prototype.__proto__ = IOStream.prototype;
 
     WSC.IOStreamTls = IOStreamTls;
-
     WSC.IOStream = IOStream;
 
 })();