Did you ever want to showcase a site you have worked on or a new feature you just published in a production system but were unable to do so because of the fear of exposing sensitive information?
SafeView is a component that allows you to hide sensitive information in your app visually, for presentation purposes, and more.
In order to hide an element all you need to do is to target it using the data-safe attribute.
const MyComponent = () => {
return (
<div>
<span data-safe>
// Sensitive info
<span>
</div>
)
}
And then when you want to hide press Shift + S.
There is basically no setup involved other than wrapping your app with the <SafeView> component.
The library is super simple and light-weight and is available at NPM.
if you have any question and/or suggestion I would love to answer in the comments. :)
Latest comments (35)
Hello,
Am I correct in thinking that simply adding the following CSS would have the exact same effect?
If that is the case I think it would be better to not use an external library with its associated security and maintenance cost.
You are definitely correct.
I actually said exactly that on some of the posts I wrote.
The reason I made it into a library is for my personal comfort and it fits my use cases.
You are more than welcome to use any of the code in library without using it through npm.
And this sensitive info actually does not appear in the HTML? Where does it end up?
The sensitive information is still available in the DOM.
As I've mentioned before the library's serves only to hide the sensitive information visibly, for presentation purposes.
Understood. So then basically not helpful regarding sensitive info as I thought. Just wanted confirmation. Thanks!
thanks! looks great.
mind you the key combination and different filters are already available and can be customized using the component (more on that in the library readme).
Lol...I opened the article cause I wanted to know the new tech that helps me hide sensitive data with client side javascript. 😏
You're definitely right about that one,
but from my experience the stage/dev isn't always accessible to people outside the dev/product team
How do you suppose to implement that? What will the hook provide?
I thought about that earlier but eventually decided to go with the attribute approach because it looks cleaner.
As other have said the functionality would be better to redact / encrypt the sensitive data.
Other suggestion could be to rename the component as then it could be used across React and React Native. (react native already has a SafeView component.
Interesting, didn't knew about that..
I think you can import the component by a different name.
import SafeView as MyComponent from "safeview"Apologies ReactNative is called
SafeAreaViewbut point still standsIt's not a good idea to obfuscate sensitive information with CSS, aside from the obvious point that the data is still there and one only has to deactivate CSS in order to deactivate the blur filter, this kind of blur is not actually safe to hide information, just look at the preview image in your article's header.
Your'e right about that one, the library isn't focused around security at all.
The idea is to enable a quick safe preview for customers/client at a presention or a meeting without revealing sensitive information.
Wow this is pretty cool !! Will try using it in my projects
Cool idea! Seems simple to use and useful. Bookmarked for a time of need 📌