#1203: Add OSCORE support to leshan-bsserver-demo

leshan-bsserver-demo/webapp/src/components/bsconfig/ServerInput.vue

@@ -27,20 +27,34 @@
       class="examplePatch"
     ></v-text-field>
     <security-input
+      v-if="server"
       :mode.sync="server.security.mode"
       @update:mode="$emit('input', server)"
       :details.sync="server.security.details"
       @update:details="$emit('input', server)"
       :defaultrpk="defaultrpk"
       :defaultx509="defaultx509"
     />
+    <!-- OSCORE Object -->
+    <v-switch
+      v-model="useOSCORE"
+      @change="useOSCOREChanged($event)"
+      label="Using OSCORE (Experimental - for now can not be used with DTLS)"
+    ></v-switch>
+    <oscore-input
+      v-if="useOSCORE"
+      v-model="server.oscore"
+      @input="$emit('input', server)"
+    >
+    </oscore-input>
   </div>
 </template>
 <script>
 import securityInput from "./SecurityInput.vue";
+import OscoreInput from "@leshan-server-core-demo/components/security/OscoreInput.vue";
 
 export default {
-  components: { securityInput },
+  components: { securityInput, OscoreInput },
   props: {
     value: Object,
     defaultNoSecValue: String,
@@ -60,17 +74,48 @@ export default {
   },
   data() {
     return {
-      server: { security: { mode: "no_sec" } }, // internal server Config
+      useOSCORE: false, // true if OSCORE is used
+      server: null, // internal server Config
     };
   },
+  beforeMount() {
+    this.initValue(this.value);
+  },
   watch: {
     value(v) {
-      if (!v) {
+      this.initValue(v);
+    },
+  },
+  methods: {
+    initValue(initialValue) {
+      if (!initialValue) {
         this.server = { security: { mode: "no_sec" } };
+        this.useOSCORE = false;
       } else {
-        this.server = v;
+        this.server = initialValue;
+        this.useOSCORE = initialValue.oscore ? true : false;
       }
     },
+    useOSCOREChanged(useOSCORE) {
+      if (useOSCORE) {
+        this.server.oscore = {};
+      } else {
+        this.server.oscore = undefined;
+      }
+      this.$emit("input", this.server);
+    },
+    /*exclusifTlsOrOSCORE() {
+      if (this.useDTLS) {
+        this.$emit("update:tls", { mode: "psk", details: {} });
+        this.$emit("update:oscore", undefined);
+      } else if (this.useOSCORE) {
+        this.$emit("update:tls", undefined);
+        this.$emit("update:oscore", {});
+      } else {
+        this.$emit("update:tls", undefined);
+        this.$emit("update:oscore", undefined);
+      }
+    },*/
   },
 };
 </script>

leshan-bsserver-demo/webapp/src/components/wizard/ClientConfigDialog.vue

@@ -193,7 +193,7 @@ export default {
           security: null,
           dm: { security: { mode: "no_sec" } },
           bs: null,
-          toDelete: ["/0", "/1"],
+          toDelete: ["/0", "/1", "/21"],
           autoIdForSecurityObject: false,
         };
         this.currentStep = 1;

leshan-bsserver-demo/webapp/src/components/wizard/DeleteStep.vue

@@ -18,7 +18,7 @@
         existing configuration on the <strong>LWM2M client</strong>.
       </p>
       <p>
-        By default, objects <code>/0</code> and <code>/1</code> are deleted,
+        By default, objects <code>/0</code>, <code>/1</code> and <code>/21</code> are deleted,
         then you will be able to define LWM2M Server and LWM2M Bootstrap Server
         to add.
       </p>

leshan-bsserver-demo/webapp/src/js/bsconfigutil.js

@@ -18,16 +18,33 @@ var configFromRestToUI = function (config) {
   for (var i in config.security) {
     var security = config.security[i];
     if (security.bootstrapServer) {
-      newConfig.bs.push({ security: security });
+      let bs = { security: security };
+
+      // add oscore object (if any) to bs
+      let oscoreObjectInstanceId = security.oscoreSecurityMode;
+      let oscore = config.oscore[oscoreObjectInstanceId];
+      if (oscore) {
+        bs.oscore = oscore;
+      }
+
+      newConfig.bs.push(bs);
     } else {
       // search for DM information;
+      var server;
       for (var j in config.servers) {
-        var server = config.servers[j];
+        server = config.servers[j];
         if (server.shortId === security.serverId) {
           newConfig.dm.push(server);
           server.security = security;
         }
       }
+
+      // add oscore object (if any) to dm
+      let oscoreObjectInstanceId = security.oscoreSecurityMode;
+      let oscore = config.oscore[oscoreObjectInstanceId];
+      if (oscore) {
+        server.oscore = oscore;
+      }
     }
   }
   newConfig.toDelete = config.toDelete;
@@ -49,10 +66,14 @@ var configFromUIToRest = function (c) {
   // do a deep copy
   // we should maybe rather use cloneDeep from lodashz
   let config = JSON.parse(JSON.stringify(c));
-  var newConfig = { servers: {}, security: {} };
+  var newConfig = { servers: {}, security: {}, oscore: {} };
   for (var i = 0; i < config.bs.length; i++) {
     var bs = config.bs[i];
     newConfig.security[i] = bs.security;
+    if (bs.oscore) {
+      newConfig.security[i].oscoreSecurityMode = i;
+      newConfig.oscore[i] = bs.oscore;
+    }
   }
   if (i == 0) {
     // To be sure that we are not using instance ID 0 for a DM server.
@@ -63,6 +84,11 @@ var configFromUIToRest = function (c) {
     var dm = config.dm[j];
     newConfig.security[i + j] = dm.security;
     delete dm.security;
+    if (dm.oscore) {
+      newConfig.security[i + j].oscoreSecurityMode = i + j;
+      newConfig.oscore[i + j] = dm.oscore;
+      delete dm.oscore;
+    }
     newConfig.servers[j] = dm;
   }
   newConfig.toDelete = config.toDelete;

leshan-bsserver-demo/webapp/src/views/Bootstrap.vue

@@ -88,6 +88,15 @@
                 {{ server.security.securityMode.toLowerCase() }}
               </v-chip>
             </span>
+            <span v-if="server.oscore">
+              with
+              <v-chip small>
+                <v-icon left small>
+                  {{ oscoreIcon() }}
+                </v-icon>
+                OSCORE
+              </v-chip>
+            </span>
             <br />
           </span>
           <!-- LWM2M Bootstrap Server to add -->
@@ -102,6 +111,15 @@
                 {{ server.security.securityMode.toLowerCase() }}
               </v-chip>
             </span>
+            <span v-if="server.oscore">
+              with
+              <v-chip small>
+                <v-icon left small>
+                  {{ oscoreIcon() }}
+                </v-icon>
+                OSCORE
+              </v-chip>
+            </span>
           </span>
         </div>
       </template>
@@ -119,7 +137,10 @@ import { configsFromRestToUI, configFromUIToRest } from "../js/bsconfigutil.js";
 import { fromHex, fromAscii } from "@leshan-server-core-demo/js/byteutils.js";
 import SecurityInfoChip from "@leshan-server-core-demo/components/security/SecurityInfoChip.vue";
 import ClientConfigDialog from "../components/wizard/ClientConfigDialog.vue";
-import { getModeIcon } from "@leshan-server-core-demo/js/securityutils.js";
+import {
+  getModeIcon,
+  getOscoreIcon,
+} from "@leshan-server-core-demo/js/securityutils.js";
 
 export default {
   components: { ClientConfigDialog, SecurityInfoChip },
@@ -183,6 +204,9 @@ export default {
     modeIcon(securitymode) {
       return getModeIcon(securitymode);
     },
+    oscoreIcon() {
+      return getOscoreIcon();
+    },
 
     formatData(c) {
       let s = {};
@@ -205,6 +229,12 @@ export default {
           s.certificateUsage = c.security.details.certificate_usage;
           break;
       }
+      if (c.oscore) {
+        s.oscore = {};
+        s.oscore.oscoreSenderId = fromHex(c.oscore.sid);
+        s.oscore.oscoreMasterSecret = fromHex(c.oscore.msec);
+        s.oscore.oscoreRecipientId = fromHex(c.oscore.rid);
+      }
       return s;
     },
 
@@ -257,6 +287,13 @@ export default {
             },
           },
         ];
+        if (dmServer.oscore) {
+          c.dm[0].oscore = {
+            oscoreSenderId: dmServer.oscore.oscoreSenderId,
+            oscoreMasterSecret: dmServer.oscore.oscoreMasterSecret,
+            oscoreRecipientId: dmServer.oscore.oscoreRecipientId,
+          };
+        }
       }
       if (config.bs) {
         let bsServer = this.formatData(config.bs);
@@ -278,6 +315,13 @@ export default {
             },
           },
         ];
+        if (bsServer.oscore) {
+          c.bs[0].oscore = {
+            oscoreSenderId: bsServer.oscore.oscoreSenderId,
+            oscoreMasterSecret: bsServer.oscore.oscoreMasterSecret,
+            oscoreRecipientId: bsServer.oscore.oscoreRecipientId,
+          };
+        }
       }
 
       if (config.security) {

leshan-server-core-demo/webapp/src/components/security/SecurityInfoChip.vue

@@ -19,26 +19,36 @@
       {{ securityInfo.tls.mode }}
     </v-chip>
     <v-chip small v-if="securityInfo.oscore">
-      <v-icon left small> {{$icons.mdiLockOutline}} </v-icon>
+      <v-icon left small> {{ oscoreIcon }} </v-icon>
       oscore
     </v-chip>
   </div>
   <div v-else>
     <v-chip small>
-      <v-icon left small> {{ $icons.mdiLockOpenRemove }} </v-icon>
+      <v-icon left small> {{ noSecIcon }} </v-icon>
       Nothing
     </v-chip>
   </div>
 </template>
 <script>
-import { getModeIcon } from "../../js/securityutils.js";
+import {
+  getModeIcon,
+  getOscoreIcon,
+  getNoSecIcon,
+} from "../../js/securityutils.js";
 
 export default {
   props: { securityInfo: Object /*securityInfo to display*/ },
   computed: {
     modeIcon() {
       return getModeIcon(this.securityInfo.tls.mode);
     },
+    oscoreIcon() {
+      return getOscoreIcon();
+    },
+    noSecIcon() {
+      return getNoSecIcon();
+    },
   },
 };
 </script>

leshan-server-core-demo/webapp/src/js/securityutils.js

@@ -13,6 +13,8 @@
 import {
   mdiCertificate,
   mdiLock,
+  mdiLockOpenRemove,
+  mdiLockOutline,
   mdiKeyChange,
   mdiHelpRhombusOutline,
 } from "@mdi/js";
@@ -37,4 +39,12 @@ function getModeIcon(mode) {
   }
 }
 
-export { getMode, getModeIcon };
+function getOscoreIcon() {
+  return mdiLockOutline;
+}
+
+function getNoSecIcon() {
+  return mdiLockOpenRemove;
+}
+
+export { getMode, getModeIcon, getOscoreIcon, getNoSecIcon };