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

1. HOW TO ADD END TO END
ENCRYPTION TO YOUR REACT APP

2. // @IronCoreLabs @cipher_sift
Show of hands…

3. // @IronCoreLabs @cipher_sift
ENCRYPTION

4. // @IronCoreLabs @cipher_sift
HTTPS

5. // @IronCoreLabs @cipher_sift
DATA STORE ENCRYPTION

6. // @IronCoreLabs @cipher_sift
Loss of Data
Control
Encryption in Transit + Encryption at Rest
≠ End to End Encryption

7. // @IronCoreLabs @cipher_sift
DON’T GET
ZUCKED

8. // @IronCoreLabs @cipher_sift
END-TO-END ENCRYPTION

9. If your application is not using
end-to-end encryption
it is not private or secure.

10. Concept
Code
Groups

11. Concept
Code
Groups

12. // @IronCoreLabs @cipher_sift
Data
INTEGRATE AT THE DATA SEAM

13. // @IronCoreLabs @cipher_sift
REDUX

14. // @IronCoreLabs @cipher_sift
REDUX
Middleware

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. // @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. // @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. // @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. // @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. // @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. // @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. // @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. // @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. // @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. // @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. // @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. // @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. // @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. // @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. // @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. // @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. // @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. // @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. // @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. // @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. 1
2
Middleware
Encryption
Decryption
3

37. // @IronCoreLabs @cipher_sift

38. …BONUS

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. // @IronCoreLabs @cipher_sift
Group
Access
Encrypt

41. // @IronCoreLabs @cipher_sift
Personal
Health
Info
Group

42. // @IronCoreLabs @cipher_sift
Group
Hospital
Personal
Health
Info

43. // @IronCoreLabs @cipher_sift
Group
Hospital
Personal
Health
Info
Dr.,
Nurse,
Lab,
Insurance Company,
Blood Type Search Index (1x)
{

44. // @IronCoreLabs @cipher_sift
Group
Hospital
Dr.,
Nurse,
Lab,
Insurance Company,
Blood Type Search Index (1x)
{
Personal
Health
Info

45. // @IronCoreLabs @cipher_sift
Orthogonal
Access Control

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. 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. // @IronCoreLabs @cipher_sift
Questions?
IronCoreLabs
@ironcorelabs
madison-kerndt
@cipher_sift
ironcorelabs.com madison@ironcorelabs.com

49. // @IronCoreLabs @cipher_sift
Thank you!
IronCoreLabs
@ironcorelabs
madison-kerndt
@cipher_sift
ironcorelabs.com madison@ironcorelabs.com