Installation

pnpm dlx uselab@latest add use-clipboard-guard

Usage

import { useClipboardGuard } from "@/hooks/use-clipboard-guard"
 
export function Component() {
  const { copy, paste } = useClipboardGuard({
    sanitizeFn: (text) => {
      return text.replace(/[<>]/g, "")
    },
    onCopy: (sanitized) => {
      console.log("Copied:", sanitized)
    },
    onPaste: (sanitized) => {
      console.log("Pasted:", sanitized)
    },
  })
 
  const handleCopy = async () => {
    const success = await copy("Hello <script>alert('xss')</script>")
    if (success) {
      console.log("Text copied successfully")
    }
  }
 
  const handlePaste = async () => {
    const text = await paste()
    if (text) {
      console.log("Pasted text:", text)
    }
  }
 
  return (
    <div>
      <button onClick={handleCopy}>Copy (Sanitized)</button>
      <button onClick={handlePaste}>Paste (Sanitized)</button>
    </div>
  )
}

Key Points

1. useClipboardGuard(options?):

   • Provides sanitized clipboard operations for secure UIs.
   • Automatically sanitizes text before copying and after pasting.
   • Supports custom sanitization functions and callbacks.

2. Options:

   • sanitizeFn: Custom function to sanitize clipboard text (default removes control characters).
   • onCopy: Callback fired after successful copy with sanitized text.
   • onPaste: Callback fired after successful paste with sanitized text.

3. Security:

   • Default sanitization removes control characters (\x00-\x1F, \x7F-\x9F).
   • Custom sanitization functions can remove XSS vectors, HTML tags, etc.
   • All clipboard operations are sanitized automatically.

4. Error Handling:

   • Returns false if copy fails, null if paste fails.
   • Errors are logged to console for debugging.

API Reference

Parameters

Options

Return Values

Use Cases

• High-Security UIs: Prevent XSS attacks through clipboard operations.
• Content Management: Sanitize user-generated content before clipboard operations.
• Data Protection: Remove sensitive information from clipboard data.
• Compliance: Ensure clipboard data meets security requirements.