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. :)
Oldest comments (35)
been here since day one 🥳
Very useful and convenient to work just a pleasure!
Super cool, very useful and unbelievably easy 👌 😀 👍
Used in a personal project of mine and helped me very much with presentation of the project
Is this similar to using feature flags?
No. Feature flags are normally used to ignore specific parts of your code in the deployment so they wont get shipped.
SafeView "hides" existing components.
visually
they still exist when you look in your developer tools.
Hmm then it's not really secure or "safe".
It's just activating and deactivating.
What did you think the point of it was?
I don't know.. but "safe" doesn't seem like the right word to use here.
When I read the title of the post, "sensitive information" makes me think of API secrets..
If I want to hide something visually, I can provide a global CSS ID for the same purpose myself...
My thought exactly , I'd rather have a component which perhaps encrypts the data or redacts it on toggle or component render.
yeah.. i was thinking something similar.
Sorry about that, didn't mean to mislead anyone.
I think I clearly state in the library that it is only for visual purposes it is NOT secure in anyway by design.
Of course not. I just suggest you change the name to "activate" or "hide" rather than "safe". Because "safe" gives the impression of being a security feature.
But good work and kudos for your efforts.
Thanks Lars, SafeView purpose is not to secure your sensitive information.
You can look at it more like a showcase/presentaion helper.
You sure about that @larsonnn ?
From my experience so far, the code behind the feature flags is shipped, but is not available to the user in the production. Talking from the the frontend perspective though, not sure if in native development we can remove code behind the disabled feature flags in compile step.
We're using feature flags like in a simple if else statement. So the code is shipped and we can switch the flag on and off at runtime.
I'm sure a compile step could remove the code behind the flag, but then you couldn't toggle the flags at runtime
Thanks for sharing your experience :)
Amazing, this will be really usefull
It's simple, that's the best of it.
Cool idea! Seems simple to use and useful. Bookmarked for a time of need 📌
Wow this is pretty cool !! Will try using it in my projects
It'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.