Add https functionality

.gitignore

@@ -0,0 +1,7 @@
+**/node_modules
+**/package-lock.json
+react-ui/nojsx
+wsc-chrome.min.js
+assets
+package.json
+package.zip

background.js

@@ -33,7 +33,11 @@ function onchoosefolder(entry) {
 
 function settings_ready(d) {
     localOptions = d
-	console.log('settings:',d)
+    let dCpy = {};
+    Object.assign(dCpy, d);
+    delete dCpy.optPrivateKey;// dont fill logs with crypto info
+    delete dCpy.optCertificate;
+	console.log('settings:',dCpy) 
 	setTimeout( maybeStartup, 2000 ) // give background accept handler some time to trigger
     //chrome.alarms.getAll( onAllAlarms )
 }

common.js

@@ -205,11 +205,12 @@ function ui82arr(arr, startOffset) {
     return outarr
 }
 function str2ab(s) {
-    var arr = []
+    var buf = new ArrayBuffer(s.length);
+    var bufView = new Uint8Array(buf);
     for (var i=0; i<s.length; i++) {
-        arr.push(s.charCodeAt(i))
+        bufView[i] = s.charCodeAt(i);
     }
-    return new Uint8Array(arr).buffer
+    return buf;
 }
     WSC.ui82str = ui82str
 WSC.str2ab = str2ab

crypto.js

@@ -0,0 +1,74 @@
+(function() {
+
+// function to create certificate
+var createCrypto = function(cn, data) {
+  console.log(
+    'Generating 1024-bit key-pair and certificate for \"' + cn + '\".');
+  var keys = forge.pki.rsa.generateKeyPair(1024);
+  console.log('key-pair created.');
+
+  var cert = forge.pki.createCertificate();
+  cert.serialNumber = '01';
+  cert.validity.notBefore = new Date();
+  cert.validity.notAfter = new Date();
+  cert.validity.notAfter.setFullYear(
+    cert.validity.notBefore.getFullYear() + 10);
+  var attrs = [{
+    name: 'commonName',
+    value: cn
+  }, {
+    name: 'countryName',
+    value: 'SE'
+  }, {
+    shortName: 'ST',
+    value: 'test-st'
+  }, {
+    name: 'localityName',
+    value: 'testing server'
+  }, {
+    name: 'organizationName',
+    value: 'Web server for chrome'
+  }, {
+    shortName: 'OU',
+    value: 'WSC'
+  }];
+  cert.setSubject(attrs);
+  cert.setIssuer(attrs);
+  cert.setExtensions([{
+    name: 'basicConstraints',
+    cA: true
+  }, {
+    name: 'keyUsage',
+    keyCertSign: true,
+    digitalSignature: true,
+    nonRepudiation: true,
+    keyEncipherment: true,
+    dataEncipherment: true
+  }, {
+    name: 'subjectAltName',
+    altNames: [{
+      type: 6, // URI
+      value: 'http://localhost'
+    }]
+  }]);
+  // FIXME: add subjectKeyIdentifier extension
+  // FIXME: add authorityKeyIdentifier extension
+  cert.publicKey = keys.publicKey;
+
+  // self-sign certificate
+  cert.sign(keys.privateKey, forge.md.sha256.create());
+
+  // save data
+  data[cn] = {
+    cert: forge.pki.certificateToPem(cert),
+    privateKey: forge.pki.privateKeyToPem(keys.privateKey)
+  };
+
+  return data;
+  console.log('certificate created for \"' + cn + '\": \n');
+};
+
+WSC.createCrypto = (name, data) => { return createCrypto(name, data || {}); }
+
+})();
+

makedeps/index.js

@@ -9,7 +9,13 @@ window.ReactDOM = m
 m = require('@material-ui/core')
 window.MaterialUI = m
 
+m = require('@material-ui/lab');
+window.MaterialUILab = m
+
 m = require('underscore')
 window._ = m
 
+m = require('node-forge')
+window.forge = m
+
 module.exports = {}

makedeps/package.json

@@ -9,7 +9,9 @@
   "dependencies": {
     "@material-ui/core": "^4.6.1",
     "@material-ui/icons": "^4.5.1",
+    "@material-ui/lab": "^4.0.0-alpha.57",
     "browserify": "^16.5.0",
+    "node-forge": "^0.10.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "underscore": "^1.9.1"

manifest.json

@@ -10,7 +10,9 @@
     "minimum_chrome_version": "45",
     "app": {
         "background": {
-            "scripts": ["underscore.js","encoding.js","common.js","log-full.js","mime.js","buffer.js","request.js","stream.js","chromesocketxhr.js","connection.js","webapp.js","websocket.js","handlers.js","httplib.js","upnp.js","background.js"]
+            "scripts": ["underscore.js","encoding.js","common.js","assets/bundle.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"]
         }
     },
     "permissions": [

minimize.sh

@@ -1 +1 @@
-cat "underscore.js" "encoding.js" "common.js" "log-full.js" "mime.js" "buffer.js" "request.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,13 +12,15 @@ const {
   Toolbar,
   Typography,
   Button,
-  ThemeProvider,
+  ThemeProvider
 } = MaterialUI
 
+const {Alert} = MaterialUILab;
+
 const {createMuiTheme, colors, withStyles} = MaterialUI;
 const styles = {
   card: {margin: '10px'},
-  appicon: {marginRight: '10px'},
+  appicon: {marginRight: '10px'}
 };
 const theme = createMuiTheme({
   palette: {
@@ -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');
+    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)
@@ -133,7 +153,12 @@ class App extends React.Component {
   }
   settings_ready() {
     const allOpts = this.appOptions.getAll()
-    console.log('fetched local settings', this.appOptions, allOpts)
+    let dCpy = {};
+    Object.assign(dCpy, allOpts);
+    delete dCpy.optPrivateKey;// dont fill logs with crypto info
+    delete dCpy.optCertificate;
+
+    console.log('fetched local settings', this.appOptions, dCpy)
     this.webapp = this.bg.get_webapp(allOpts) // retainStr in here
     this.bg.WSC.VERBOSE = this.bg.WSC.DEBUG = this.appOptions.get('optVerbose')
     this.webapp.on_status_change = this.on_webapp_change.bind(this)
@@ -174,6 +199,22 @@ 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.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);
+    this.setState({optPrivateKey: data[cn].privateKey, optCertificate: data[cn].cert});
+    setTimeout(this.render, 50); // prevent race condition when ReactElement get set before opts have value
+  }
   ui_ready() {
     if (this.webapp) {
       if (! (this.webapp.started || this.webapp.starting)) {
@@ -225,9 +266,14 @@ class App extends React.Component {
       optModRewriteEnable: null,
       optModRewriteRegexp: ['optModRewriteEnable'],
       optModRewriteNegate: ['optModRewriteEnable'],
-      optModRewriteTo: ['optModRewriteEnable']
-    }
-    console.assert(this)
+      optModRewriteTo: ['optModRewriteEnable'],
+      optUseHttps: null
+    };
+    const optHttpsInfo = {
+      optPrivateKey: null,
+      optCertificate: null
+    };
+    console.assert(this);
 
     const renderOpts = (opts) => {
       const _this = this;
@@ -253,6 +299,20 @@ class App extends React.Component {
       this.setState({showAdvanced: !this.state.showAdvanced})
     }}
     >{this.state.showAdvanced ? 'Hide Advanced Options' : 'Show Advanced Options'}</a></div>)
+
+    const httpsOptions = (() => {
+      let disable = (!this.webapp || !this.webapp.opts.optUseHttps);
+      let hasCrypto = this.webapp && (this.webapp.opts.optPrivateKey || this.webapp.opts.optCertificate);
+      const textBoxes = renderOpts(optHttpsInfo)
+      return [(<div style={{paddingLeft: 20}}>{!disable && textBoxes}
+        {hasCrypto && !disable && <Alert severity="info">To regenerate, remove key and cert. Be sure to take a copy first, for possible later use!</Alert>}
+        {!disable && <Button variant="contained" key="crytobtn" disabled={hasCrypto  ? true : false} onClick={e => {
+				  e.preventDefault();
+				  this.gen_crypto();
+				}}>Generate crypto</Button>}
+	  </div>)];
+    })();
+
     const {state} = this;
     return (<div>
       <ThemeProvider theme={theme}>
@@ -316,7 +376,7 @@ class App extends React.Component {
           {options}
 
           {advancedButton}
-          {state.showAdvanced && <div>{advOptions}</div>}
+          {state.showAdvanced && <div>{advOptions}{httpsOptions}</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 
   }
 }