DEV Community

Cover image for I've made a react component that hides sensitive information in your app.
ItayLisaey
ItayLisaey

Posted on • Updated on

I've made a react component that hides sensitive information in your app.

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.

example-gif

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>
    )
}
Enter fullscreen mode Exit fullscreen mode

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.

"SafeView" on NPM

"SafeView" on Github

if you have any question and/or suggestion I would love to answer in the comments. :)

Discussion (39)

Collapse
lukeshiru profile image
Luke Shiru

The attribute approach is kinda awkward (almost feels like Angular). Being React, you could make it a hook which would be a more natural API.

Collapse
itaylisaey profile image
ItayLisaey Author

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.

Collapse
lukeshiru profile image
Luke Shiru

Maybe something like...

const MyComponent = () => {
    const dataSafeProps = useDataSafe();

    return (
        <div>
            <span {...dataSafeProps}>Hidden data here</span>
        </div>
    );
};
Enter fullscreen mode Exit fullscreen mode

This would also let the dev configure it for custom keys and stuff like that trough the same hook (instead of shift + s maybe they want another key combination, or maybe they want to have different types of "blurring" on different elements, or even maybe change the way the blurring is triggered and make it programatic if the devs want to trigger that in some other way. From the TypeScript perspective this also becomes better because you don't need to "pollute" the global types of React JSX, and instead you just return some properties from your hook.

Hope that gives a better idea :)

Thread Thread
itaylisaey profile image
ItayLisaey Author

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).

Collapse
eecolor profile image
EECOLOR

Hello,

Am I correct in thinking that simply adding the following CSS would have the exact same effect?

*[data-safe] {
    filter: blur(.3rem) !important;
}
Enter fullscreen mode Exit fullscreen mode

If that is the case I think it would be better to not use an external library with its associated security and maintenance cost.

Collapse
itaylisaey profile image
ItayLisaey Author

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.

Collapse
natescode profile image
Nathan Hedglin

Interesting. Though companies SHOULD have a Dev / UAT environment that has sanitized or demo data anyways.

Collapse
itaylisaey profile image
ItayLisaey Author

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

Collapse
natescode profile image
Nathan Hedglin • Edited on

Stage / UAT is meant for people outside the development team.

Collapse
alxizr profile image
alxizr

Super cool, very useful and unbelievably easy 👌 😀 👍

Collapse
letsbsocial1 profile image
Maria Campbell

And this sensitive info actually does not appear in the HTML? Where does it end up?

Collapse
itaylisaey profile image
ItayLisaey Author

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.

Collapse
letsbsocial1 profile image
Maria Campbell

Understood. So then basically not helpful regarding sensitive info as I thought. Just wanted confirmation. Thanks!

Collapse
christiankozalla profile image
Christian Kozalla

Is this similar to using feature flags?

Collapse
larsonnn profile image
Lars Feldeisen • Edited on

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.

SafeView is a component that allows you to hide sensitive information in your app visually, for presentation purposes, and more.

visually

they still exist when you look in your developer tools.

Collapse
itaylisaey profile image
ItayLisaey Author

Thanks Lars, SafeView purpose is not to secure your sensitive information.

You can look at it more like a showcase/presentaion helper.

Collapse
puritanic profile image
Darkø Tasevski

Feature flags are normally used to ignore specific parts of your code in the deployment so they wont get shipped.

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.

Thread Thread
christiankozalla profile image
Christian Kozalla

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 :)

Collapse
aminmansuri profile image
hidden_dude

Hmm then it's not really secure or "safe".
It's just activating and deactivating.

Thread Thread
robbiegm profile image
RobbieGM

What did you think the point of it was?

Thread Thread
aminmansuri profile image
hidden_dude

I don't know.. but "safe" doesn't seem like the right word to use here.

Thread Thread
christiankozalla profile image
Christian Kozalla

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...

Thread Thread
gweaths profile image
Grant

My thought exactly , I'd rather have a component which perhaps encrypts the data or redacts it on toggle or component render.

Thread Thread
aminmansuri profile image
hidden_dude

yeah.. i was thinking something similar.

Thread Thread
itaylisaey profile image
ItayLisaey Author

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.

Thread Thread
aminmansuri profile image
hidden_dude

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.

Collapse
larsonnn profile image
Lars Feldeisen

It's simple, that's the best of it.

Collapse
liorvainer profile image
LiorVainer

Used in a personal project of mine and helped me very much with presentation of the project

Collapse
thejavascripter profile image
SauhardoSengupta

Amazing, this will be really usefull

Collapse
nitzanhen profile image
Nitzan Hen

Cool idea! Seems simple to use and useful. Bookmarked for a time of need 📌

Collapse
enigmage profile image
Ali Zaidi

Wow this is pretty cool !! Will try using it in my projects

Collapse
shalevb108 profile image
shalevb108

Very useful and convenient to work just a pleasure!

Collapse
liadaltiff profile image
Liad Altif

been here since day one 🥳

Collapse
gweaths profile image
Grant

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.

Collapse
itaylisaey profile image
ItayLisaey Author

Interesting, didn't knew about that..
I think you can import the component by a different name.

import SafeView as MyComponent from "safeview"

Collapse
gweaths profile image
Grant

Apologies ReactNative is called SafeAreaView but point still stands

Collapse
stephanie profile image
Stephanie Handsteiner

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.

Collapse
itaylisaey profile image
ItayLisaey Author

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.

Collapse
anubra266 profile image
Abraham

Lol...I opened the article cause I wanted to know the new tech that helps me hide sensitive data with client side javascript. 😏