Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
What to Upload to SlideShare
Loading in …3
×
1 of 49

How to Add End-to-End Encryption to Your React App

0

Share

Download to read offline

Even the coolest user interfaces won’t cover for apps that are insecure and leak private information. As front-end developers, we need to build apps that stand up to the demands of our industry and protects the data and privacy of our users.

In this talk, you will learn:
* Why private data should be end-to-end encrypted
* How to use middleware to encrypt data without rewriting your app
* How to use metadata to centralize a data privacy policy
* How to separate what data to encrypt from who should be able to decrypt it
* How to add end-to-end encryption without restraining the functionality of your app

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

How to Add End-to-End Encryption to Your React App

  1. 1. HOW TO ADD END TO END ENCRYPTION TO YOUR REACT APP
  2. 2. // @IronCoreLabs @cipher_sift Show of hands…
  3. 3. // @IronCoreLabs @cipher_sift ENCRYPTION
  4. 4. // @IronCoreLabs @cipher_sift HTTPS
  5. 5. // @IronCoreLabs @cipher_sift DATA STORE ENCRYPTION
  6. 6. // @IronCoreLabs @cipher_sift Loss of Data Control Encryption in Transit + Encryption at Rest ≠ End to End Encryption
  7. 7. // @IronCoreLabs @cipher_sift DON’T GET ZUCKED
  8. 8. // @IronCoreLabs @cipher_sift END-TO-END ENCRYPTION
  9. 9. If your application is not using end-to-end encryption it is not private or secure.
  10. 10. Concept Code Groups
  11. 11. Concept Code Groups
  12. 12. // @IronCoreLabs @cipher_sift Data INTEGRATE AT THE DATA SEAM
  13. 13. // @IronCoreLabs @cipher_sift REDUX
  14. 14. // @IronCoreLabs @cipher_sift REDUX Middleware
  15. 15. // @IronCoreLabs @cipher_sift IronCoreMiddleware.js import * as IronWeb from "@ironcorelabs/ironweb"; const encryptionMiddleware = () => (next) => (action) => { if (action.type === “ADD_BLOOD_TEST") { return encryptBloodTest(next, action, group.id); } next(action); }; const decryptionMiddleware = () => (next) => (action) => { if (action.type === "GET_BLOOD_TEST") { if (action.payload.encrypted) { return decryptBloodTest(next, action); } return next(action); } next(action); };
  16. 16. // @IronCoreLabs @cipher_sift IronCoreMiddleware.js import * as IronWeb from "@ironcorelabs/ironweb"; const encryptionMiddleware = () => (next) => (action) => { if (action.type === “ADD_BLOOD_TEST") { return encryptBloodTest(next, action, group.id); } next(action); }; const decryptionMiddleware = () => (next) => (action) => { if (action.type === "GET_BLOOD_TEST") { if (action.payload.encrypted) { return decryptBloodTest(next, action); } return next(action); } next(action); };
  17. 17. // @IronCoreLabs @cipher_sift IronCoreMiddleware.js import * as IronWeb from "@ironcorelabs/ironweb"; const encryptionMiddleware = () => (next) => (action) => { if (action.type === “ADD_BLOOD_TEST") { return encryptBloodTest(next, action, group.id); } next(action); }; const decryptionMiddleware = () => (next) => (action) => { if (action.type === "GET_BLOOD_TEST") { if (action.payload.encrypted) { return decryptBloodTest(next, action); } return next(action); } next(action); };
  18. 18. // @IronCoreLabs @cipher_sift IronCoreMiddleware.js import * as IronWeb from "@ironcorelabs/ironweb"; const encryptionMiddleware = () => (next) => (action) => { if (action.type === “ADD_BLOOD_TEST") { return encryptBloodTest(next, action, group.id); } next(action); }; const decryptionMiddleware = () => (next) => (action) => { if (action.type === "GET_BLOOD_TEST") { if (action.payload.encrypted) { return decryptBloodTest(next, action); } return next(action); } next(action); };
  19. 19. // @IronCoreLabs @cipher_sift IronCoreMiddleware.js import * as IronWeb from "@ironcorelabs/ironweb"; const encryptionMiddleware = () => (next) => (action) => { if (action.type === “ADD_BLOOD_TEST") { return encryptBloodTest(next, action, group.id); } next(action); }; const decryptionMiddleware = () => (next) => (action) => { if (action.type === "GET_BLOOD_TEST") { if (action.payload.encrypted) { return decryptBloodTest(next, action); } return next(action); } next(action); };
  20. 20. // @IronCoreLabs @cipher_sift IronCoreMiddleware.js next(action); }; const decryptionMiddleware = () => (next) => (action) => { if (action.type === “GET_BLOOD_TEST”) { return decryptBloodTest(next, action); } next(action); }; function encryptBloodTest(next, action, hospital) { return IronWeb.document.encrypt(IronWeb.codec.utf8.toBytes(action.payload.body), { accessList: { groups: [{ id: hospital }] } }) .then((encryptedDoc) => { next({...action,
  21. 21. // @IronCoreLabs @cipher_sift IronCoreMiddleware.js next(action); }; const decryptionMiddleware = () => (next) => (action) => { if (action.type === “GET_BLOOD_TEST”) { return decryptBloodTest(next, action); } next(action); }; function encryptBloodTest(next, action, hospital) { return IronWeb.document.encrypt(IronWeb.codec.utf8.toBytes(action.payload.body), { accessList: { groups: [{ id: hospital }] } }) .then((encryptedDoc) => { next({...action,
  22. 22. // @IronCoreLabs @cipher_sift IronCoreMiddleware.js next(action); }; const decryptionMiddleware = () => (next) => (action) => { if (action.type === “GET_BLOOD_TEST”) { return decryptBloodTest(next, action); } next(action); }; function encryptBloodTest(next, action, hospital) { return IronWeb.document.encrypt(IronWeb.codec.utf8.toBytes(action.payload.body), { accessList: { groups: [{ id: hospital }] } }) .then((encryptedDoc) => { next({...action,
  23. 23. // @IronCoreLabs @cipher_sift IronCoreMiddleware.js next(action); }; const decryptionMiddleware = () => (next) => (action) => { if (action.type === “GET_BLOOD_TEST”) { return decryptBloodTest(next, action); } next(action); }; function encryptBloodTest(next, action, hospital) { return IronWeb.document.encrypt(IronWeb.codec.utf8.toBytes(action.payload.body), { accessList: { groups: [{ id: hospital }] } }) .then((encryptedDoc) => { next({...action,
  24. 24. // @IronCoreLabs @cipher_sift IronCoreMiddleware.js next(action); }; const decryptionMiddleware = () => (next) => (action) => { if (action.type === “GET_BLOOD_TEST”) { return decryptBloodTest(next, action); } next(action); }; function encryptBloodTest(next, action, hospital) { return IronWeb.document.encrypt(IronWeb.codec.utf8.toBytes(action.payload.body), { accessList: { groups: [{ id: hospital }] } }) .then((encryptedDoc) => { next({...action,
  25. 25. // @IronCoreLabs @cipher_sift IronCoreMiddleware.js function encryptBloodTest(next, action, hospital) { return IronWeb.document.encrypt(IronWeb.codec.utf8.toBytes(action.payload.body), { accessList: { groups: [{ id: hospital }] } }) .then((encryptedDoc) => { next({...action, payload: { ...action.payload, body: encryptedDoc.document, id: encryptedDoc.documentID, encrypted: true }, }); }) .catch(() => {...}); }
  26. 26. // @IronCoreLabs @cipher_sift IronCoreMiddleware.js function encryptBloodTest(next, action, hospital) { return IronWeb.document.encrypt(IronWeb.codec.utf8.toBytes(action.payload.body), { accessList: { groups: [{ id: personalHealthInfoID }] } }) .then((encryptedDoc) => { next({...action, payload: { ...action.payload, body: encryptedDoc.document, id: encryptedDoc.documentID, encrypted: true }, }); }) .catch(() => {...}); }
  27. 27. // @IronCoreLabs @cipher_sift IronCoreMiddleware.js function encryptBloodTest(next, action, hospitalID) { return IronWeb.document.encrypt(IronWeb.codec.utf8.toBytes(action.payload.body), { accessList: { groups: [{ id: hospitalID }] } }) .then((encryptedDoc) => { next({...action, payload: { ...action.payload, body: encryptedDoc.document, id: encryptedDoc.documentID, encrypted: true }, }); }) .catch(() => {...}); }
  28. 28. // @IronCoreLabs @cipher_sift IronCoreMiddleware.js function encryptBloodTest(next, action, hospitalID) { return IronWeb.document.encrypt(IronWeb.codec.utf8.toBytes(action.payload.body), { accessList: { groups: [{ id: hospitalID }] } }) .then((encryptedBloodTest) => { next({...action, payload: { ...action.payload, body: encryptedBloodTest.document, id: encryptedBloodTest.documentID, encrypted: true }, }); }) .catch(() => {...}); }
  29. 29. // @IronCoreLabs @cipher_sift IronCoreMiddleware.js function encryptBloodTest(next, action, hospitalID) { return IronWeb.document.encrypt(IronWeb.codec.utf8.toBytes(action.payload.body), { accessList: { groups: [{ id: hospitalID }] } }) .then((encryptedDoc) => { next({...action, payload: { ...action.payload, body: encryptedDoc.document, id: encryptedDoc.documentID, encrypted: true }, }); }) .catch(() => {...}); }
  30. 30. // @IronCoreLabs @cipher_sift IronCoreMiddleware.js .catch(() => {…}); } function decryptBloodTest(next, action) { IronWeb.document.decrypt(action.payload.id, action.payload.body) .then((bloodTest) => { next({ …action, payload: { …action.payload, body: IronWeb.codec.utf8.fromBytes(bloodTest.data) }, }); }) .catch(() => {...}); }
  31. 31. // @IronCoreLabs @cipher_sift IronCoreMiddleware.js .catch(() => {…}); } function decryptBloodTest(next, action) { IronWeb.document.decrypt(action.payload.id, action.payload.body) .then((bloodTest) => { next({ ...action, payload: { …action.payload, body: IronWeb.codec.utf8.fromBytes(bloodTest.data) }, }); }) .catch(() => {...}); }
  32. 32. // @IronCoreLabs @cipher_sift IronCoreMiddleware.js .catch(() => {…}); } function decryptBloodTest(next, action) { IronWeb.document.decrypt(action.payload.id, action.payload.body) .then((bloodTest) => { next({ ...action, payload: { …action.payload, body: IronWeb.codec.utf8.fromBytes(bloodTest.data) }, }); }) .catch(() => {...}); }
  33. 33. // @IronCoreLabs @cipher_sift IronCoreMiddleware.js .catch(() => {…}); } function decryptBloodTest(next, action) { IronWeb.document.decrypt(action.payload.id, action.payload.body) .then((bloodTest) => { next({ ...action, payload: { …action.payload, body: IronWeb.codec.utf8.fromBytes(bloodTest.data) }, }); }) .catch(() => {...}); }
  34. 34. // @IronCoreLabs @cipher_sift IronCoreMiddleware.js .catch(() => {…}); } function decryptBloodTest(next, action) { IronWeb.document.decrypt(action.payload.id, action.payload.body) .then((bloodTest) => { next({ ...action, payload: { …action.payload, body: IronWeb.codec.utf8.fromBytes(bloodTest.data) }, }); }) .catch(() => {...}); }
  35. 35. // @IronCoreLabs @cipher_sift IronCoreMiddleware.js .catch(() => {…}); } function decryptBloodTest(next, action) { IronWeb.document.decrypt(action.payload.id, action.payload.body) .then((bloodTest) => { next({ ...action, payload: { …action.payload, body: IronWeb.codec.utf8.fromBytes(bloodTest.data) }, }); }) .catch(() => {...}); }
  36. 36. 1 2 Middleware Encryption Decryption 3
  37. 37. // @IronCoreLabs @cipher_sift
  38. 38. …BONUS
  39. 39. // @IronCoreLabs @cipher_sift IronCoreMiddleware.js function encryptNewOrder(next, action, hospital) { return IronWeb.document.encrypt(IronWeb.codec.utf8.toBytes(action.payload.body), { accessList: { groups: [{ id: personalHealthInfoID }] } }) .then((encryptedDoc) => { next({...action, payload: { ...action.payload, body: encryptedDoc.document, id: encryptedDoc.documentID, encrypted: true }, }); }) .catch(() => {...}); }
  40. 40. // @IronCoreLabs @cipher_sift Group Access Encrypt
  41. 41. // @IronCoreLabs @cipher_sift Personal Health Info Group
  42. 42. // @IronCoreLabs @cipher_sift Group Hospital Personal Health Info
  43. 43. // @IronCoreLabs @cipher_sift Group Hospital Personal Health Info Dr., Nurse, Lab, Insurance Company, Blood Type Search Index (1x) {
  44. 44. // @IronCoreLabs @cipher_sift Group Hospital Dr., Nurse, Lab, Insurance Company, Blood Type Search Index (1x) { Personal Health Info
  45. 45. // @IronCoreLabs @cipher_sift Orthogonal Access Control
  46. 46. // @IronCoreLabs @cipher_sift Data control: Data control is the ability for a data owner to determine who can use their data, see how it's used and by whom, and to change their mind and revoke their access at any time, regardless of where the data is stored.
  47. 47. If your application is not using end-to-end encryption it is not private or secure. Implement data control
 for who, how, and revocation.
  48. 48. // @IronCoreLabs @cipher_sift Questions? IronCoreLabs @ironcorelabs madison-kerndt @cipher_sift ironcorelabs.com madison@ironcorelabs.com
  49. 49. // @IronCoreLabs @cipher_sift Thank you! IronCoreLabs @ironcorelabs madison-kerndt @cipher_sift ironcorelabs.com madison@ironcorelabs.com

×