pastilhasandClaude Opus 5
cd209483e3
navigator.clipboard is secure-context only, like crypto.randomUUID before it —
over plain http on a tailnet address the object does not exist. Twenty call
sites across eighteen files, in three states that all looked fine in review:
bare calls that threw and killed the handler, optional-chained calls that
silently did nothing, and one carrying the comment "Officer is always behind
HTTPS", which it is not.
The optional-chained ones are the worst of the three: a copy button that reports
success and copies nothing is indistinguishable from a working one until someone
pastes.
helpers/clipboard.ts falls back to document.execCommand('copy') over an
off-screen textarea — deprecated, and it works on any origin because it predates
the secure-context rule. Off-screen rather than hidden, because display:none and
visibility:hidden elements cannot be selected and the copy fails silently.
Reading the clipboard has no equivalent: execCommand('paste') was never permitted
from script. The file browser's paste-a-file path now checks canReadClipboard()
and explains itself instead of throwing.
docs/http-secure-context-audit.md is the full sweep the owner asked for: what was
fixed, what cannot be, and what was checked and found clear. crypto.subtle is
used nowhere in the frontend, which was the one worth confirming since it has no
cheap fallback. Notification's six matches are type names, not the API.
geolocation and navigator.share are already guarded. getUserMedia is in four
files and is being removed — but QrTransfer uses it for the CAMERA, not a
microphone, so "remove audio" does not cover it.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
import { useState } from 'react';
|
|
import { Copy, Check, Play } from 'lucide-react';
|
|
import { copyToClipboard } from 'helpers/clipboard';
|
|
|
|
type CommandBlockProps = {
|
|
label?: string;
|
|
command: string;
|
|
onRun?: (command: string) => void;
|
|
};
|
|
|
|
export const CommandBlock = ({ label, command, onRun }: CommandBlockProps) => {
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
const copy = () => {
|
|
copyToClipboard(command);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 1500);
|
|
};
|
|
|
|
return (
|
|
<div className="inline-flex flex-col gap-1">
|
|
{label && <span className="text-xs text-duck-dark/50">{label}</span>}
|
|
<div className="inline-flex items-center gap-1 bg-[#1a1a2e] rounded-lg pl-3 pr-1 py-1.5">
|
|
<code className="text-sm text-[#e0e0e0] font-mono whitespace-nowrap">{command}</code>
|
|
{onRun && (
|
|
<button
|
|
type="button"
|
|
onClick={() => onRun(command)}
|
|
className="shrink-0 p-1.5 rounded hover:bg-white/10 cursor-pointer transition-colors"
|
|
title="Run in terminal"
|
|
>
|
|
<Play className="h-3.5 w-3.5 text-duck-teal" />
|
|
</button>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={copy}
|
|
className="shrink-0 p-1.5 rounded hover:bg-white/10 cursor-pointer transition-colors"
|
|
title="Copy command"
|
|
>
|
|
{copied ? <Check className="h-3.5 w-3.5 text-green-400" /> : <Copy className="h-3.5 w-3.5 text-white/40" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|