npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

securelog-rsc

v1.0.2

Published

Secure Log React Server Component for Scanning secrets.

Downloads

173

Readme

Securelog React Server Component

SecureLog RSC is a React component designed to detect and mask sensitive information (secrets) in your application. It leverages a worker-based approach to scan text nodes and component props for patterns already supported by the Securelog Scan CLI. It also allows for custom secret patterns and provides the option to mask detected secrets both in the DOM and in the results.

Need Secret scanning in other places?

Features

  • Secret Detection: Scan text and props of React elements to detect sensitive information based on custom regex patterns.
  • DOM Manipulation: Automatically masks detected secrets directly in the DOM to prevent them from being displayed.
  • Customizable: Support for custom secret patterns.
  • Asynchronous Processing: Uses web workers to process the scanning asynchronously, improving performance for large component trees.
  • Depth Limiting: Controls how deep the secret inspector scans into the component tree.
  • Secret Masking: Option to mask secrets to avoid displaying sensitive secret on the DOM

Demo

Check out the live demo to see the SecureLog react component in action.

Performance Considerations

While the SecureLog React Component is optimized for runtime scanning and masking of secrets, using it with very large or deeply nested component structures may lead to a slight increase in rendering times. It is recommended to use this component judiciously in performance-critical parts of your application to minimize any potential impact on the user experience.

Installation

yarn add securelog-rsc  # npm i securelog-rsc

Usage

Basic usage

Wrap your application or part of your component tree with SecureLog to inspect its children for secrets:

import React from "react";
import { SecureLog } from "securelog-rsc";

const App = () => {
  return (
    <SecureLog onSecretFound={(secret) => console.log("Secret found:", secret)}>
      <div>
        My Stripe key is sk_test_********************************
      </div>
    </SecureLog>
  );
};

export default App;

SecureLog RSC also suports React HOC (useSecurelog)

useSecureLog is a Higher-Order Component (HOC) that wraps the SecureLog component and provides secret inspection to any component without requiring the use of SecureLog directly.

import React from "react";
import { useSecureLog } from "securelog-rsc";

const MyComponent = () => {
  return (
    <div>My secret key is sk_test_***********************</div>
  );
};

const WrappedComponent = useSecureLog(
  MyComponent,
  undefined,
  ["input"],
  10,
  true,
  (secret) => {
    console.log("Secret found:", secret); // provides a fallback to see returned results
  }
);

export default WrappedComponent;

Custom patterns

You can pass custom secret patterns to scan for, in addition to the default ones.

const customPatterns = [
  {
    detector: "CustomKey",
    regex: "\\bck\\_[a-zA-Z0-9]{32}\\b",
    secretPosition: 0,
  },
];

<SecureLog
  customPatterns={customPatterns}
  onSecretFound={(secret) => console.log("Custom secret found:", secret)}
>
  <div>My custom key is ck_**************************</div>
</SecureLog>;

Secret masking

You can enable masking to replace detected secrets with asterisks. This will both mask the secret in the `onSecretFound` callback and in the DOM.

<SecureLog
  mask={true}
  onSecretFound={(secret) => console.log("Masked secret found:", secret)}
>
  <div>My Stripe key is sk_test_**************************</div>
</SecureLog>

Exclude components

You can exclude certain components from the inspection process by passing an array of component types to the `excludeComponents` prop.

<SecureLog excludeComponents={["input", "textarea"]}>
  <div>My Stripe key is sk_test_****************************</div>
  <input value="sk_test_*******************************" />
</SecureLog>

Props

| Prop | Type | Default | Description | | ----------------- | --------------------------------------- | -------- | ----------------------------------------------------------------------- | | customPatterns | SecretPattern[] | [] | Array of custom regex patterns to detect secrets. | | excludeComponents | string[] | [] | Components to exclude from secret detection. | | maxDepth | number | 10 | Maximum depth for recursive child inspection. | | onSecretFound | (secret: SecretInspectorResult) => void | () => {} | Callback invoked when a secret is found. | | mask | boolean | false | If true, secrets are masked both in the DOM and in the callback result. |

Types

SecretInspectorResult

type SecretInspectorResult = {
  secret: string;
  componentName: string;
  detector: string;
};
  • secret: The detected secret.
  • componentName: The name of the React component where the secret was found.
  • detector: The name of the detector that found the secret.

License

This project is licensed under the MIT License - see the LICENSE file for details.