feat: reset decrypt role to d, improve frontend for decrypt

Author: SharzyL

doc/api.md

@@ -4,13 +4,15 @@
 
 Return the index page.
 
-## **GET** `/<name>[.<ext>]` or `/<name>/<filename>[.<ext>]`
+## **GET** `/<name>[.<ext>]` or `/<name>/<filename>`
 
 Fetch the paste with name `<name>`. By default, it will return the raw content of the paste.
 
-The `Content-Type` header is set to `text/plain;charset=UTF-8`. If `<ext>` is given, the worker will infer mime-type from `<ext>` and change `Content-Type`. If the paste is uploaded with a filename, the worker will infer mime-type from the filename. This method accepts the following query string parameters:
+The `Content-Type` header is set to the mime type inferred from the filename of the paste, or `text/plain;charset=UTF-8` if no filename is present. If `<ext>` is given, the worker will infer mime-type from `<ext>` and change `Content-Type`. If the paste is uploaded with a filename, the worker will infer mime-type from the filename. This method accepts the following query string parameters:
 
-The `Content-Disposition` header is set to `inline` by default. But can be overriden by `?a` query string. If the paste is uploaded with filename, or `<filename>` is set in given request URL, `Content-Disposition` is appended with `filename*` indicating the filename (with `<ext>` if it exists).
+The `Content-Disposition` header is set to `inline` by default. But can be overriden by `?a` query string. If the paste is uploaded with filename, or `<filename>` is set in given request URL, `Content-Disposition` is appended with `filename*` indicating the filename. If the paste is encrypted, the filename is appended with `.encrypted` suffix.
+
+If the paste is encrypted, an `X-Encryption-Scheme` header will be set to the encryption scheme.
 
 - `?a=`: optional. Set `Content-Disposition` to `attachment` if present.
 
@@ -36,7 +38,10 @@ $ curl https://shz.al/~panty.jpg | feh -
 $ firefox 'https://shz.al/kf7z?lang=nix'
 
 $ curl 'https://shz.al/~panty.jpg?mime=image/png' -w '%{content_type}' -o /dev/null -sS
-image/png;charset=UTF-8
+image/png
+
+$ curl 'https://shz.al/kf7Z/panty.jpg?mime=image/png' -w '%{content_type}' -o /dev/null -sS
+image/png
 ```
 
 ## GET `/<name>:<passwd>`
@@ -65,6 +70,21 @@ $ firefox https://shz.al/u/i-p-
 $ curl -L https://shz.al/u/i-p-
 ```
 
+## GET `/d/<name>`
+
+Return the web page that will decrypt the paste of name `<name>` in browser.
+
+If error occurs, the worker returns status code different from `302`:
+
+- `404`: the paste of given name is not found.
+- `500`: unexpected exception. You may report this to the author to give it a fix.
+
+Usage example:
+
+```shell
+$ firefox https://shz.al/e/i-p-
+```
+
 ## GET `/m/<name>`
 
 Get the metadata of the paste of name `<name>`.
@@ -83,8 +103,9 @@ $ curl -L https://shz.al/m/i-p-
   "createdAt": "2025-05-01T10:33:06.114Z",
   "expireAt": "2025-05-08T10:33:06.114Z",
   "sizeBytes": 4096,
+  "location": "KV",
   "filename": "a.jpg",
-  "location": "KV"
+  "encryptionScheme": "AES-GCM"
 }
 ```
 
@@ -96,6 +117,7 @@ Explanation of the fields:
 - `sizeBytes`: Integer. The size of the content of the paste in bytes.
 - `filename`: Optional string. The file name of the paste.
 - `location`: String, either "KV" of "R2". Representing whether the paste content is stored in Cloudflare KV storage or R2 object storage.
+- `encryptionScheme`: Optional string. Currently only "AES-GCM" is possible. The encryption scheme used to encrypt the pastused to encrypt the pastused to encrypt the pastused to encrypt the paste.
 
 ## GET `/a/<name>`
 
@@ -167,6 +189,8 @@ Upload your paste. It accept parameters in form-data:
 - `n`: optional. The customized **name** of your paste. If not specified, the worker will generate a random string (4 characters by default) as the name. You need to prefix the name with `~` when fetching the paste of customized name. The name is at least 3 characters long, consisting of alphabet, digits and characters in `+_-[]*$=@,;/`.
 
 - `p`: optional. The flag of **private mode**. If specified to any value, the name of the paste is as long as 24 characters. No effect if `n` is used.
+-
+- `encryption-scheme`: optional. The encryption scheme used in the uploaded paste. It will be returned as `X-Encryption-Scheme` header on fetching paste. Note that this is not the encryption scheme that the backend will perform.
 
 `POST` method returns a JSON string by default, if no error occurs, for example:
 

frontend/components/DecryptPaste.tsx

@@ -1,18 +1,25 @@
 import React, { useEffect, useRef, useState } from "react"
 import { ErrorModal, ErrorState } from "./ErrorModal.js"
-import { decodeKey, decrypt } from "../utils/encryption.js"
+import { decodeKey, decrypt, EncryptionScheme } from "../utils/encryption.js"
 
 import { Button, CircularProgress, Link, Tooltip } from "@heroui/react"
-import { CheckIcon, CopyIcon, DownloadIcon } from "./icons.js"
+import { CheckIcon, CopyIcon, DownloadIcon, HomeIcon } from "./icons.js"
 
 import "../style.css"
 import { parseFilenameFromContentDisposition, parsePath } from "../../src/shared.js"
 import { formatSize } from "../utils/utils.js"
 import { DarkMode, DarkModeToggle, defaultDarkMode, shouldBeDark } from "./DarkModeToggle.js"
+import binaryExtensions from "binary-extensions"
+
+function isBinaryPath(path: string) {
+  return binaryExtensions.includes(path.replace(/.*\./, ""))
+}
 
 export function DecryptPaste() {
   const [pasteFile, setPasteFile] = useState<File | undefined>(undefined)
   const [pasteContentBuffer, setPasteContentBuffer] = useState<ArrayBuffer | undefined>(undefined)
+
+  const [isFileBinary, setFileBinary] = useState(false)
   const [forceShowBinary, setForceShowBinary] = useState(false)
 
   const [isLoading, setIsLoading] = useState<boolean>(false)
@@ -29,29 +36,20 @@ export function DecryptPaste() {
     showModal(errText, title)
   }
 
-  const { nameFromPath } = parsePath(location.pathname)
-  const keyString = location.hash.slice(1)
-  // const url = new URL("http://localhost:8787/e/dSGT#TkHRDZ4CD3UQPqjY71cuwd_yE3NpEEr_CtzF0wu32jA=")
-  // const nameFromPath = url.pathname.slice(3)
-  // const keyString = url.hash.slice(1)
+  // uncomment the following lines for testing
+  // const url = new URL("http://localhost:8787/d/dHYQ.jpg.txt#uqeULsBTb2I3iC7rD6AaYh4oJ5lMjJA2nYR+H0U8bEA=")
+  const url = location
+
+  const { nameFromPath, ext, filename } = parsePath(url.pathname)
+  const keyString = url.hash.slice(1)
 
   useEffect(() => {
+    if (keyString.length === 0) {
+      showModal("No encryption key is given. You should append the key after a “#” character in the URL", "Error")
+    }
     const pasteUrl = `${API_URL}/${nameFromPath}`
 
     const fetchPaste = async () => {
-      const scheme = "AES-GCM"
-      let key: CryptoKey | undefined
-      try {
-        key = await decodeKey(scheme, keyString)
-      } catch {
-        showModal(`Failed to parse “${keyString}” as key`, "Error")
-        return
-      }
-      if (key === undefined) {
-        showModal(`Failed to parse “${keyString}” as key`, "Error")
-        return
-      }
-
       try {
         setIsLoading(true)
         const resp = await fetch(pasteUrl)
@@ -60,18 +58,34 @@ export function DecryptPaste() {
           return
         }
 
+        const scheme: EncryptionScheme = (resp.headers.get("X-Encryption-Scheme") as EncryptionScheme) || "AES-GCM"
+        let key: CryptoKey | undefined
+        try {
+          key = await decodeKey(scheme, keyString)
+        } catch {
+          showModal(`Failed to parse “${keyString}” as ${scheme} key`, "Error")
+          return
+        }
+        if (key === undefined) {
+          showModal(`Failed to parse “${keyString}” as ${scheme} key`, "Error")
+          return
+        }
+
         const decrypted = await decrypt(scheme, key, await resp.bytes())
         if (decrypted === null) {
           showModal("Failed to decrypt content", "Error")
         } else {
-          const filename = resp.headers.has("Content-Disposition")
-            ? parseFilenameFromContentDisposition(resp.headers.get("Content-Disposition")!) || ""
-            : ""
-          const type = resp.headers.has("Content-Type")
-            ? resp.headers.get("Content-Type")!.replace(/;.*/, "")
+          const filenameFromDispTrimmed = resp.headers.has("Content-Disposition")
+            ? parseFilenameFromContentDisposition(resp.headers.get("Content-Disposition")!)?.replace(
+                /.encrypted$/g,
+                "",
+              ) || undefined
             : undefined
-          setPasteFile(new File([decrypted], filename, { type }))
+
+          const inferredFilename = filename || (ext && nameFromPath + ext) || filenameFromDispTrimmed || nameFromPath
+          setPasteFile(new File([decrypted], inferredFilename))
           setPasteContentBuffer(decrypted)
+          setFileBinary(isBinaryPath(inferredFilename))
         }
       } finally {
         setIsLoading(false)
@@ -98,7 +112,7 @@ export function DecryptPaste() {
     <div className="absolute top-[50%] left-[50%] translate-[-50%] flex flex-col items-center">
       <div className="text-foreground-600 mb-2">{`${pasteFile?.name} (${formatSize(pasteFile.size)})`}</div>
       <div>
-        Binary file{" "}
+        Possibly Binary file{" "}
         <button className="text-primary-500" onClick={() => setForceShowBinary(true)}>
           (Click to show)
         </button>
@@ -125,40 +139,46 @@ export function DecryptPaste() {
       .catch(console.error)
   }
 
-  const showFileContent = pasteFile && (!pasteFile.name || forceShowBinary)
+  const showFileContent = pasteFile && (!isFileBinary || forceShowBinary)
 
+  const buttonClasses = "rounded-full bg-background hover:bg-gray-100"
   return (
     <main
       className={
-        "flex flex-col items-center min-h-screen bg-background text-foreground" +
+        "flex flex-col items-center min-h-screen bg-background text-foreground mx-2" +
         (shouldBeDark(darkModeSelect) ? " dark" : " light")
       }
     >
       <div className="w-full max-w-[64rem]">
         <div className="flex flex-row my-4 items-center justify-between">
-          <h1 className="text-2xl inline grow">
-            <Link href="/" className="text-2xl text-foreground-500 mr-1">
-              {INDEX_PAGE_TITLE + " / "}
+          <h1 className="text-xl md:text-2xl grow inline-flex items-center">
+            <Link href="/" className="text-foreground-500 text-[length:inherited]">
+              <Button isIconOnly aria-label="Home" className={buttonClasses + " md:hidden"}>
+                <HomeIcon className="size-6" />
+              </Button>
+              <span className="hidden md:inline">{INDEX_PAGE_TITLE}</span>
             </Link>
-            <code>{nameFromPath}</code> (decrypted)
+            <span className="mx-2">{" / "}</span>
+            <code>{nameFromPath}</code>
+            <span className="ml-1">{isLoading ? " (Loading…)" : pasteFile ? " (Decrypted)" : ""}</span>
           </h1>
           {showFileContent && (
             <Tooltip content={`Copy to clipboard`}>
-              <Button isIconOnly aria-label="Copy" className="mr-2 rounded-full bg-background" onPress={onCopy}>
-                {hasIssuedCopies ? <CheckIcon className="size-6 inline" /> : <CopyIcon className="size-6 inline" />}
+              <Button isIconOnly aria-label="Copy" className={buttonClasses} onPress={onCopy}>
+                {hasIssuedCopies ? <CheckIcon className="size-6" /> : <CopyIcon className="size-6" />}
               </Button>
             </Tooltip>
           )}
           {pasteFile && (
             <Tooltip content={`Download as file`}>
-              <Button aria-label="Download" isIconOnly className="rounded-full bg-background">
+              <Button aria-label="Download" isIconOnly className={buttonClasses}>
                 <a href={URL.createObjectURL(pasteFile)}>
-                  <DownloadIcon className="size-6 inline mr-2" />
+                  <DownloadIcon className="size-6 inline" />
                 </a>
               </Button>
             </Tooltip>
           )}
-          <DarkModeToggle mode={darkModeSelect} onModeChange={setDarkModeSelect} className="" />
+          <DarkModeToggle mode={darkModeSelect} onModeChange={setDarkModeSelect} className={buttonClasses} />
         </div>
         <div className="my-4">
           <div className="min-h-[30rem] w-full bg-secondary-50 rounded-lg p-3 relative">

frontend/components/PasteSettingPanel.tsx

@@ -1,6 +1,20 @@
-import { Card, CardBody, CardHeader, CardProps, Divider, Input, Radio, RadioGroup, Switch } from "@heroui/react"
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  CardProps,
+  Divider,
+  Input,
+  PopoverContent,
+  PopoverTrigger,
+  Popover,
+  Radio,
+  RadioGroup,
+  Switch,
+} from "@heroui/react"
 import { BaseUrl, verifyExpiration, verifyManageUrl, verifyName } from "../utils/utils.js"
 import React from "react"
+import { InfoIcon } from "./icons.js"
 
 export type UploadKind = "short" | "long" | "custom" | "manage"
 
@@ -101,10 +115,29 @@ export function PanelSettingsPanel({ setting, onSettingChange, ...rest }: PasteS
           ) : null}
         </RadioGroup>
         <Divider />
-        <div className="mt-2">
+        <div className="mt-2 flex flex-row items-center">
           <Switch isSelected={setting.doEncrypt} onValueChange={(v) => onSettingChange({ ...setting, doEncrypt: v })}>
             Encrypt paste
           </Switch>
+          <Popover>
+            <PopoverTrigger>
+              <InfoIcon className="inline size-5 ml-2" />
+            </PopoverTrigger>
+            <PopoverContent>
+              {(titleProps) => (
+                <div className="px-1 py-2 max-w-[20rem]">
+                  <h3 className="text-normal font-bold mb-2" {...titleProps}>
+                    Encrypted Paste
+                  </h3>
+                  <div className="text-small">
+                    Enable client-side encryption. Your paste is shared via a URL containing the decryption key in the
+                    hash. Decryption happens in the browser, so only those with the key (not the server) can view the
+                    original content.
+                  </div>
+                </div>
+              )}
+            </PopoverContent>
+          </Popover>
         </div>
       </CardBody>
     </Card>

frontend/components/UploadedPanel.tsx

@@ -9,7 +9,7 @@ interface UploadedPanelProps extends CardProps {
 
 const makeDecryptionUrl = (url: string, key: string) => {
   const urlParsed = new URL(url)
-  urlParsed.pathname = "/e" + urlParsed.pathname
+  urlParsed.pathname = "/d" + urlParsed.pathname
   return urlParsed.toString() + "#" + key
 }
 
@@ -47,16 +47,6 @@ export function UploadedPanel({ pasteResponse, encryptionKey, ...rest }: Uploade
                 </Skeleton>
               </td>
             </tr>
-            {pasteResponse?.suggestedUrl ? (
-              <tr>
-                <td className={firstColClassNames}>Suggested URL</td>
-                <td className="w-full">
-                  <Snippet hideSymbol variant="bordered" classNames={snippetClassNames}>
-                    {pasteResponse?.suggestedUrl}
-                  </Snippet>
-                </td>
-              </tr>
-            ) : null}
             {encryptionKey ? (
               <tr>
                 <td className={firstColClassNames}>Decryption URL</td>

frontend/components/icons.tsx

@@ -115,3 +115,37 @@ export const CheckIcon = (props: HTMLAttributes<SVGElement>) => (
     <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
   </svg>
 )
+
+export const InfoIcon = (props: HTMLAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    {...props}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
+    />
+  </svg>
+)
+
+export const HomeIcon = (props: HTMLAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    {...props}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+    />
+  </svg>
+)

frontend/decrypt.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Encrypted</title>
+    <title>%INDEX_PAGE_TITLE% / {{PASTE_NAME}}</title>
   </head>
   <body>
     <div id="root"></div>

package.json

@@ -56,6 +56,7 @@
     "@tailwindcss/vite": "^4.1.4",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
+    "binary-extensions": "^3.0.0",
     "framer-motion": "^12.7.4",
     "mdast-util-to-string": "^4.0.0",
     "mime": "^4.0.7",