From cede0c2decccceff8a35d73a026c1f875e42c0cf Mon Sep 17 00:00:00 2001
From: brasseld <brasseld@gmail.com>
Date: Wed, 10 Oct 2018 12:14:33 +0200
Subject: [PATCH] feat(http): Add better SSL support for trust origin and
 client authentication

Closes gravitee-io/issues#1492
---
 .../endpointConfiguration.controller.ts       |  59 ++++-
 .../endpoint/endpointConfiguration.html       | 205 ++++++++++++++++--
 2 files changed, 233 insertions(+), 31 deletions(-)

diff --git a/src/management/api/proxy/backend/endpoint/endpointConfiguration.controller.ts b/src/management/api/proxy/backend/endpoint/endpointConfiguration.controller.ts
index 438172ca5b..77dba88496 100644
--- a/src/management/api/proxy/backend/endpoint/endpointConfiguration.controller.ts
+++ b/src/management/api/proxy/backend/endpoint/endpointConfiguration.controller.ts
@@ -61,6 +61,10 @@ class ApiEndpointController {
       this.creation = true;
     }
 
+    this.endpoint.ssl = this.endpoint.ssl || {trustAll: false};
+    this.endpoint.ssl.trustStore = this.endpoint.ssl.trustStore || {type: ''};
+    this.endpoint.ssl.keyStore = this.endpoint.ssl.keyStore || {type: ''};
+
     // Keep the initial state in case of form reset
     this.initialEndpoint = _.cloneDeep(this.endpoint);
 
@@ -75,9 +79,52 @@ class ApiEndpointController {
         name: 'SOCKS5 tcp proxy',
         value: 'SOCKS5'
       }];
+
+    this.$scope.trustStoreTypes = [
+      {
+        name: 'None',
+        value: ''
+      }, {
+        name: 'Java Trust Store (.jks)',
+        value: 'JKS'
+      }, {
+        name: 'PKCS#12 (.p12) / PFX (.pfx)',
+        value: 'PKCS12'
+      }, {
+        name: 'PEM (.pem)',
+        value: 'PEM'
+      }];
+
+    this.$scope.keyStoreTypes = [
+      {
+        name: 'None',
+        value: ''
+      },
+      {
+        name: 'Java Trust Store (.jks)',
+        value: 'JKS'
+      }, {
+        name: 'PKCS#12 (.p12) / PFX (.pfx)',
+        value: 'PKCS12'
+      }, {
+        name: 'PEM (.pem)',
+        value: 'PEM'
+      }];
   }
 
   update(api) {
+    if (this.endpoint.ssl.trustAll) {
+      delete this.endpoint.ssl.trustStore;
+    }
+
+    if (this.endpoint.ssl.trustStore && (!this.endpoint.ssl.trustStore.type || this.endpoint.ssl.trustStore.type === '')) {
+      delete this.endpoint.ssl.trustStore;
+    }
+
+    if (this.endpoint.ssl.keyStore && (!this.endpoint.ssl.keyStore.type || this.endpoint.ssl.keyStore.type === '')) {
+      delete this.endpoint.ssl.keyStore;
+    }
+
     let group: any = _.find(this.api.proxy.groups, { 'name': this.$stateParams.groupName});
 
     if (!_.includes(group.endpoints, this.endpoint)) {
@@ -109,18 +156,6 @@ class ApiEndpointController {
     group.endpoints = _.cloneDeep(this.initialEndpoints);
     this.$state.go('management.apis.detail.proxy.endpoints');
   }
-
-  toggleTrustAll() {
-    if (this.endpoint.ssl.trustAll === true) {
-      this.endpoint.ssl.enabled = true;
-    }
-  }
-
-  toggleSSL() {
-    if (!this.endpoint.ssl.enabled) {
-      this.endpoint.ssl.trustAll = false;
-    }
-  }
 }
 
 export default ApiEndpointController;
diff --git a/src/management/api/proxy/backend/endpoint/endpointConfiguration.html b/src/management/api/proxy/backend/endpoint/endpointConfiguration.html
index cc9b2ad4c5..9f2fd83b20 100644
--- a/src/management/api/proxy/backend/endpoint/endpointConfiguration.html
+++ b/src/management/api/proxy/backend/endpoint/endpointConfiguration.html
@@ -233,41 +233,208 @@
   <br />
 
   <section>
-    <md-subheader class="md-primary" style="background-color: #fafafa">SSL Support</md-subheader>
-    <div layout="column" layout-wrap layout-gt-sm="row">
-      <div flex-xs flex="50">
-        <div layout-xs="column" flex-xs="100">
-          <md-checkbox
-            ng-model="endpointCtrl.endpoint.ssl.enabled"
-            ng-change="endpointCtrl.toggleSSL()"
-            aria-label="Enable SSL"
-            class="md-align-top-left" flex>
-            Enable client SSL
-          </md-checkbox>
-        </div>
-      </div>
+    <md-subheader class="md-primary" style="background-color: #fafafa">SSL / TLS</md-subheader>
+    <div layout="column" layout-wrap>
       <div flex-xs flex="50">
         <div layout-xs="column" flex-xs="100">
           <md-checkbox
             ng-model="endpointCtrl.endpoint.ssl.trustAll"
-            ng-change="endpointCtrl.toggleTrustAll()"
             aria-label="Enable trust all"
             class="md-warn md-align-top-left" flex>
-            Enable trust all<br/>
+            Trust all server certificates<br/>
                 <span class="ipsum">
-                  Use this with caution (if over Internet). The gateway will trust all server certificates. The connection will still be
+                  Use this with caution (if over Internet). The gateway must trust any origin certificates. The connection will still be
                   encrypted but this mode is vulnerable to 'man in the middle' attacks.
                 </span>
           </md-checkbox>
         </div>
       </div>
+      <div flex-xs flex="50" ng-if="!endpointCtrl.endpoint.ssl.trustAll">
+        <md-input-container class="md-block" flex-gt-sm>
+          <label>Type</label>
+          <md-select ng-model="endpointCtrl.endpoint.ssl.trustStore.type"
+                     ng-required="!endpointCtrl.endpoint.ssl.trustAll"
+                     ng-disabled="endpointCtrl.endpoint.ssl.trustAll">
+            <md-option ng-repeat="trustStore in trustStoreTypes" value="{{trustStore.value}}">
+              {{trustStore.name}}
+            </md-option>
+          </md-select>
+          <div class="hint">Type of the trust store</div>
+        </md-input-container>
+      </div>
+      <div flex ng-if="!endpointCtrl.endpoint.ssl.trustAll && endpointCtrl.endpoint.ssl.trustStore.type === 'JKS'">
+        <div flex-xs flex="50">
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>Path to JKS file</label>
+            <input ng-model="endpointCtrl.endpoint.ssl.trustStore.path" type="text" name="truststore-jks-path"
+                   ng-required="!endpointCtrl.endpoint.ssl.trustStore.content">
+            <div class="hint">Path to the JKS file</div>
+          </md-input-container>
+        </div>
+        <div flex-xs flex="50">
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>JKS content</label>
+            <textarea ng-model="endpointCtrl.endpoint.ssl.trustStore.content" name="truststore-jks-content" rows="5"
+                      md-select-on-focus ng-required="!endpointCtrl.endpoint.ssl.trustStore.path"></textarea>
+            <div class="hint">JKS binary content</div>
+          </md-input-container>
+        </div>
+        <div flex-xs flex="50">
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>Password</label>
+            <input ng-model="endpointCtrl.endpoint.ssl.trustStore.password" type="password" name="truststore-jks-password" required>
+            <div class="hint">Trust store password</div>
+          </md-input-container>
+        </div>
+      </div>
+      <div flex ng-if="!endpointCtrl.endpoint.ssl.trustAll && endpointCtrl.endpoint.ssl.trustStore.type === 'PKCS12'">
+        <div flex-xs flex="50">
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>Path to PKCS#12 file</label>
+            <input ng-model="endpointCtrl.endpoint.ssl.trustStore.path" type="text" name="truststore-pkcs12-path"
+                   ng-required="!endpointCtrl.endpoint.ssl.trustStore.content">
+            <div class="hint">Path to the PKCS#12 file (.p12 or .pfx)</div>
+          </md-input-container>
+        </div>
+        <div flex-xs flex="50">
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>PKCS#12 content</label>
+            <textarea ng-model="endpointCtrl.endpoint.ssl.trustStore.content" name="truststore-pkcs12-content" rows="5"
+                      md-select-on-focus ng-required="!endpointCtrl.endpoint.ssl.trustStore.path"></textarea>
+            <div class="hint">PKCS#12 binary content</div>
+          </md-input-container>
+        </div>
+        <div flex-xs flex="50">
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>Password</label>
+            <input ng-model="endpointCtrl.endpoint.ssl.trustStore.password" type="password" name="truststore-pkcs12-password" required>
+            <div class="hint">Trust store password</div>
+          </md-input-container>
+        </div>
+      </div>
+      <div flex ng-if="!endpointCtrl.endpoint.ssl.trustAll && endpointCtrl.endpoint.ssl.trustStore.type === 'PEM'">
+        <div flex-xs flex="50">
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>Path to cert file</label>
+            <input ng-model="endpointCtrl.endpoint.ssl.trustStore.path" type="text" name="truststore-pem-path"
+                   ng-required="!endpointCtrl.endpoint.ssl.trustStore.content">
+            <div class="hint">Path to the cert file (.pem)</div>
+          </md-input-container>
+        </div>
+        <div flex-xs flex="50">
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>Certificate</label>
+            <textarea ng-model="endpointCtrl.endpoint.ssl.trustStore.content" name="truststore-pem-content" rows="5"
+                      md-select-on-focus ng-required="!endpointCtrl.endpoint.ssl.trustStore.path"></textarea>
+            <div class="hint">Certificate</div>
+          </md-input-container>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <br />
+
+  <section>
+    <md-subheader class="md-primary" style="background-color: #fafafa">
+      SSL - Client Authentication
+    </md-subheader>
+    <div layout="column" layout-wrap>
       <div flex-xs flex="50">
         <md-input-container class="md-block" flex-gt-sm>
-          <label>PEM certificate</label>
-          <input ng-model="endpointCtrl.endpoint.ssl.pem">
-          <div class="hint">Use a client certificate if server requires it.</div>
+          <label>Type</label>
+          <md-select ng-model="endpointCtrl.endpoint.ssl.keyStore.type">
+            <md-option ng-repeat="keyStore in keyStoreTypes" value="{{keyStore.value}}">
+              {{keyStore.name}}
+            </md-option>
+          </md-select>
+          <div class="hint">Type of the key store</div>
         </md-input-container>
       </div>
+      <div flex ng-if="endpointCtrl.endpoint.ssl.keyStore.type === 'JKS'">
+        <div flex-xs flex="50">
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>Path to JKS file</label>
+            <input ng-model="endpointCtrl.endpoint.ssl.keyStore.path" type="text" name="keystore-jks-path"
+                   ng-required="!endpointCtrl.endpoint.ssl.keyStore.content">
+            <div class="hint">Path to JKS file</div>
+          </md-input-container>
+        </div>
+        <div flex-xs flex="50">
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>JKS content</label>
+            <textarea ng-model="endpointCtrl.endpoint.ssl.keyStore.content" name="keystore-jks-content" rows="5"
+                      md-select-on-focus ng-required="!endpointCtrl.endpoint.ssl.keyStore.path"></textarea>
+            <div class="hint">JKS binary content</div>
+          </md-input-container>
+        </div>
+        <div flex-xs flex="50">
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>Password</label>
+            <input ng-model="endpointCtrl.endpoint.ssl.keyStore.password" type="password" name="keystore-jks-password" required>
+            <div class="hint">Key store password</div>
+          </md-input-container>
+        </div>
+      </div>
+      <div flex ng-if="endpointCtrl.endpoint.ssl.keyStore.type === 'PKCS12'">
+        <div flex-xs flex="50">
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>Path to PKCS#12 file</label>
+            <input ng-model="endpointCtrl.endpoint.ssl.keyStore.path" type="text" name="keystore-pkcs12-path"
+                   ng-required="!endpointCtrl.endpoint.ssl.keyStore.content">
+            <div class="hint">Path to the PKCS#12 file (.p12 or .pfx)</div>
+          </md-input-container>
+        </div>
+        <div flex-xs flex="50">
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>PKCS#12 content</label>
+            <textarea ng-model="endpointCtrl.endpoint.ssl.keyStore.content" name="keystore-pkcs12-content" rows="5"
+                      md-select-on-focus ng-required="!endpointCtrl.endpoint.ssl.keyStore.path"></textarea>
+            <div class="hint">PKCS#12 binary content</div>
+          </md-input-container>
+        </div>
+        <div flex-xs flex="50">
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>Password</label>
+            <input ng-model="endpointCtrl.endpoint.ssl.keyStore.password" type="password" name="keystore-pkcs12-password" required>
+            <div class="hint">Key store password</div>
+          </md-input-container>
+        </div>
+      </div>
+      <div flex ng-if="endpointCtrl.endpoint.ssl.keyStore.type === 'PEM'">
+        <div flex-xs flex="50">
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>Path to cert file</label>
+            <input ng-model="endpointCtrl.endpoint.ssl.keyStore.certPath" type="text" name="keystore-pem-cert-path"
+                   ng-required="!endpointCtrl.endpoint.ssl.keyStore.certContent">
+            <div class="hint">Path to the cert file (.pem)</div>
+          </md-input-container>
+        </div>
+        <div flex-xs flex="50">
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>Certificate</label>
+            <textarea ng-model="endpointCtrl.endpoint.ssl.keyStore.certContent" name="keystore-pem-cert-content" rows="5"
+                      md-select-on-focus ng-required="!endpointCtrl.endpoint.ssl.keyStore.certPath"></textarea>
+            <div class="hint">Certificate</div>
+          </md-input-container>
+        </div>
+        <div flex-xs flex="50">
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>Path to private key file</label>
+            <input ng-model="endpointCtrl.endpoint.ssl.keyStore.keyPath" type="text" name="keystore-pem-key-path"
+                   ng-required="!endpointCtrl.endpoint.ssl.keyStore.keyContent">
+            <div class="hint">Path to the private key file (.pem)</div>
+          </md-input-container>
+        </div>
+        <div flex-xs flex="50">
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>Private Key</label>
+            <textarea ng-model="endpointCtrl.endpoint.ssl.keyStore.keyContent" name="keystore-pem-key-content" rows="5"
+                      md-select-on-focus ng-required="!endpointCtrl.endpoint.ssl.keyStore.keyPath"></textarea>
+            <div class="hint">Private Key</div>
+          </md-input-container>
+        </div>
+      </div>
     </div>
   </section>