Sensitive Data and "Demo Mode"
Generally now, I suggest doing presentations on the dashboard using a slide deck of screenshots. This way, when collecting screenshots you’re able to manually redact anything sensitive.
However, to speed this up, or for live demos, we have a “demo mode” which attempts to redact sensitive information by blurring elements of the DOM.
Always use a test or staging server when demoing the dashboard. No real production data should be used. Demo mode attempts to hide anything sensitive but there’s always a risk of information leaks
Enabling demo mode
In both production and when running locally, demo mode will be activated if the DEMO_MODE environment variable has a truthy value (e.g. 1, true, TRUE, yes).
Running locally, you can set this with a .env file. In production, you can set it using either a .env file or by modifying the compose file. However, I don’t currently see any reason you’d actually need to enable demo mode in a deployed environment.
Marking data as sensitive
Marking a DOM element as sensitive
Any element containing sensitive data should have the sensitive class added to it.
E.g.
<p class="sensitive some-other-classes">
Some really sensitive data
</p>When demo mode is enabled, this element will have a blur filter applied,
Replacing sensitive data
In some cases we want to keep an element visible, but hide specific text or numbers in the data. To do this, we use the sensitive and sensitiveNumbers functions which are part of the useSensitive composable.
These functions take a single string or number argument, and if demo mode is enabled, replace it with * or 0 characters.
For example, when we create our string informing the user when the most recent file for a patient was received, we use:
`Latest file ${sensitive(props.message.filename)} recieved from ${props.message.facility}`;This replaces the filename with all * characters when demo mode is enabled.
How it works
The useSensitive composable has 3 main functions. sensitive and sensitiveNumbers both work in a similar way, and just take a single string argument and return either the same string, or the redacted string if demo mode is enabled. These can be used anywhere in your code.
The sensitiveCssFilter computed value checks if demo mode is enabled, and returns a CSS filter. If demo mode is enabled, it returns a blur CSS filter, otherwise it returns “none”. Our default page template then includes some PostCSS which applies the returned filter to the sensitive class. This effectively applies a blur filter to any elements with the sensitive class if demo mode is enabled, otherwise sets the CSS filter to none.