How can I detect/avoid updates to my cached React-based App? Or how can I detect a cache-invalidation before it happens?

Question

I'm developing an app in React that does encryption on the client-side and sends the encrypted content back to the server for secure storage (e.g. think of online-wallets). This works well since the data is secure in case someone malicious gets access to the data. However, in case a hacker gets access to the server and changes the actual React code to send the data back in raw format as opposed to encrypted, this would defeat the whole system.

So how can I force the React app to cache only once, and then any time in the future, before it pulls a new version of the app, it will warn the user that "a new update is available and that they need to check twitter and/or GitHub to ensure validity"?

Basically I need to detect "cache invalidation" attempts before they happen and warn the user. How could I do this?

Answer 1

A couple of options you might like to consider:

• Set object.freeze() on your cache after the first time the data is loaded and then use try/catch to detect another attempt to write to it.

• Create a Proxy of the object

const cache = Proxy({
  isSet: false,
  data: {}
}, {
  set(obj, prop, value) {
    if (prop === 'isSet') throw new ReferenceError()
    if (obj.isSet) throw new Error('Cache already set')
    obj.isSet = true
    return Reflect.set(...arguments)
  }
})