bentopdf/src/pages/protect-pdf.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Primary Meta Tags -->
    <meta
      name="title"
      content="Password Protect PDF Free - Encrypt a PDF Online | BentoPDF"
    />
    <meta
      name="description"
      content="Lock your PDF by adding a password. Free, no uploads, no signup. Runs entirely in your browser."
    />
    <meta
      name="keywords"
      content="encrypt pdf, password protect pdf, secure pdf"
    />
    <meta name="author" content="BentoPDF" />
    <meta
      name="robots"
      content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"
    />

    <!-- Canonical URL -->
    <link rel="canonical" href="https://www.bentopdf.com/protect-pdf" />

    <!-- Open Graph / Facebook / LinkedIn -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.bentopdf.com/protect-pdf" />
    <meta
      property="og:title"
      content="Password Protect PDF Free - Encrypt a PDF Online | BentoPDF"
    />
    <meta
      property="og:description"
      content="Lock your PDF by adding a password. Free, no uploads, no signup. Runs entirely in your browser."
    />
    <meta
      property="og:image"
      content="https://www.bentopdf.com/images/og-protect-pdf.png"
    />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:site_name" content="BentoPDF" />

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="https://www.bentopdf.com/protect-pdf" />
    <meta
      name="twitter:title"
      content="Password Protect PDF Free - Encrypt a PDF Online | BentoPDF"
    />
    <meta
      name="twitter:description"
      content="Lock your PDF by adding a password. Free, no uploads, no signup. Runs entirely in your browser."
    />
    <meta
      name="twitter:image"
      content="https://www.bentopdf.com/images/twitter-protect-pdf.png"
    />
    <meta name="twitter:site" content="@BentoPDF" />

    <!-- Mobile Web App -->
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="Encrypt PDF" />

    <title>Password Protect PDF Free - Encrypt a PDF Online | BentoPDF</title>

    <link href="/src/css/styles.css" rel="stylesheet" />

    <!-- Web App Manifest -->
    <link rel="manifest" href="/site.webmanifest" />

    <!-- Favicons -->
    <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
    <link
      rel="icon"
      type="image/png"
      sizes="192x192"
      href="/images/favicon-192x192.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="512x512"
      href="/images/favicon-512x512.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="/images/apple-touch-icon.png"
    />
    <link rel="icon" href="/favicon.ico" sizes="32x32" />
  </head>

  <body class="antialiased bg-gray-900">
    {{> navbar }}

    <div
      id="uploader"
      class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900"
    >
      <div
        id="tool-uploader"
        class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700"
      >
        <button
          id="back-to-tools"
          class="flex items-center gap-2 text-indigo-300 hover:text-indigo-400 mb-6 font-semibold"
        >
          <i data-lucide="arrow-left" class="cursor-pointer"></i>
          <span class="cursor-pointer" data-i18n="tools.backToTools">
            Back to Tools
          </span>
        </button>

        <h1
          class="text-2xl font-bold text-white mb-2"
          data-i18n="tools:protectPdf.name"
        >
          Protect PDF
        </h1>
        <p class="text-gray-400 mb-6" data-i18n="tools:protectPdf.subtitle">
          Password protect a PDF with strong AES encryption.
        </p>

        <div
          id="drop-zone"
          class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300"
        >
          <div class="flex flex-col items-center justify-center pt-5 pb-6">
            <i class="ph ph-upload-simple text-4xl mb-3 text-gray-400"></i>
            <p class="mb-2 text-sm text-gray-400">
              <span class="font-semibold" data-i18n="upload.clickToSelect"
                >Click to select PDF</span
              >
              <span data-i18n="upload.orDragAndDrop">or drag and drop</span>
            </p>
            <p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">
              Your files never leave your device.
            </p>
          </div>
          <input
            id="file-input"
            type="file"
            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
            accept="application/pdf"
          />
        </div>

        <div id="file-display-area" class="mt-4 space-y-2"></div>

        <div id="tool-options" class="hidden mt-6 space-y-4">
          <div>
            <label
              for="user-password-input"
              class="block mb-2 text-sm font-medium text-gray-300"
              >User Password (Required)</label
            >
            <input
              type="password"
              id="user-password-input"
              placeholder="Enter password to open PDF"
              class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5"
            />
            <p class="text-xs text-gray-500 mt-1">
              This password will be required to open the PDF.
            </p>
          </div>

          <div>
            <label
              for="owner-password-input"
              class="block mb-2 text-sm font-medium text-gray-300"
              >Owner Password (Optional)</label
            >
            <input
              type="password"
              id="owner-password-input"
              placeholder="Enter password for permissions (optional)"
              class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5"
            />
            <p class="text-xs text-gray-500 mt-1">
              If provided, usage restrictions will be applied. Leave empty for
              no restrictions.
            </p>
          </div>

          <div class="p-4 bg-gray-900 rounded-lg border border-gray-700">
            <h3 class="text-sm font-semibold text-white mb-2">
              Encryption Details:
            </h3>
            <ul class="text-xs text-gray-400 space-y-1 list-disc list-inside">
              <li>256-bit AES encryption (highest security)</li>
              <li>User password required to open PDF</li>
              <li>Owner password enables usage restrictions</li>
              <li>Without owner password: no restrictions applied</li>
            </ul>
          </div>

          <button id="process-btn" class="btn-gradient w-full">
            Encrypt PDF
          </button>
        </div>
      </div>
    </div>

    <!-- Loader Modal -->
    <div
      id="loader-modal"
      class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
    >
      <div
        class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl"
      >
        <div class="solid-spinner"></div>
        <p
          id="loader-text"
          class="text-white text-lg font-medium"
          data-i18n="loader.processing"
          data-i18n="loader.processing"
        >
          Processing...
        </p>
      </div>
    </div>

    <!-- Alert Modal -->
    <div
      id="alert-modal"
      class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden"
    >
      <div
        class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700"
      >
        <h3
          id="alert-title"
          class="text-xl font-bold text-white mb-2"
          data-i18n="alert.title"
          data-i18n="alert.title"
        >
          Alert
        </h3>
        <p id="alert-message" class="text-gray-300 mb-6"></p>
        <button
          id="alert-ok"
          class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200"
        >
          OK
        </button>
      </div>
    </div>

    <!-- How It Works Section -->
    <section class="max-w-4xl mx-auto px-4 py-12">
      <h2
        class="text-2xl md:text-3xl font-bold text-white mb-8 text-center"
        data-i18n="howItWorks.title"
      >
        How It Works
      </h2>
      <div class="space-y-6">
        <div class="flex items-start gap-4">
          <div
            class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
          >
            1
          </div>
          <div class="flex-1">
            <h3 class="text-lg font-semibold text-white mb-1">Upload File</h3>
            <p class="text-gray-400" data-i18n="howItWorks.step1">
              Click or drag and drop your file to begin
            </p>
          </div>
        </div>
        <div class="flex items-start gap-4">
          <div
            class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
          >
            2
          </div>
          <div class="flex-1">
            <h3 class="text-lg font-semibold text-white mb-1">Process</h3>
            <p class="text-gray-400" data-i18n="howItWorks.step2">
              Click the process button to start
            </p>
          </div>
        </div>
        <div class="flex items-start gap-4">
          <div
            class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
          >
            3
          </div>
          <div class="flex-1">
            <h3 class="text-lg font-semibold text-white mb-1">Download</h3>
            <p class="text-gray-400" data-i18n="howItWorks.step3">
              Save your processed file instantly
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- Related Tools Section -->
    <section class="max-w-6xl mx-auto px-4 py-12">
      <h2
        class="text-2xl md:text-3xl font-bold text-white mb-6 text-center"
        data-i18n="relatedTools.title"
      >
        Related PDF Tools
      </h2>
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
        <a
          href="merge-pdf.html"
          class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
        >
          <h3 class="text-white font-semibold mb-1">Merge PDF</h3>
          <p class="text-gray-400 text-sm">Free online merge PDF tool</p>
        </a>
        <a
          href="compress-pdf.html"
          class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
        >
          <h3 class="text-white font-semibold mb-1">Compress PDF</h3>
          <p class="text-gray-400 text-sm">Free online compress PDF tool</p>
        </a>
        <a
          href="split-pdf.html"
          class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
        >
          <h3 class="text-white font-semibold mb-1">Split PDF</h3>
          <p class="text-gray-400 text-sm">Free online split PDF tool</p>
        </a>
        <a
          href="edit-pdf.html"
          class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
        >
          <h3 class="text-white font-semibold mb-1">Edit PDF</h3>
          <p class="text-gray-400 text-sm">Free online edit PDF tool</p>
        </a>
        <a
          href="rotate-pdf.html"
          class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
        >
          <h3 class="text-white font-semibold mb-1">Rotate PDF</h3>
          <p class="text-gray-400 text-sm">Free online rotate PDF tool</p>
        </a>
      </div>
    </section>

    <!-- FAQ Section -->
    <section class="max-w-4xl mx-auto px-4 py-12">
      <h2
        class="text-2xl md:text-3xl font-bold text-white mb-6 text-center"
        data-i18n="faq.sectionTitle"
      >
        Frequently Asked Questions
      </h2>
      <div class="faq-list">
        <details class="faq-d">
          <summary class="faq-d-q">
            What is the difference between the user password and the owner
            password?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            The user password is required and is what anyone must type to open
            the file. The owner password is optional; when you set a different
            one, the PDF also gets usage restrictions, so someone who opens it
            with only the user password can't print, copy, edit, annotate, fill
            forms, or rearrange pages.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            What encryption does Protect PDF use?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            256-bit AES, applied with QPDF's implementation of the PDF 2.0
            encryption standard. There is no option to pick a weaker cipher, so
            the strength of the protection comes down to how strong your
            password is.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            What happens if I forget the password?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            There is no recovery. AES-256 can't be brute-forced in any practical
            time, and BentoPDF keeps no copy of the file or the password. Store
            the password somewhere safe and keep an unprotected original for
            yourself.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Do I still get restrictions if I only enter a user password?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            No. With only a user password the file needs the password to open,
            but once opened there are no limits on printing, copying, or
            editing. Add a separate owner password if you want those
            restrictions.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Can I restrict printing or copying without requiring a password to
            open the file?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            Not with this tool, because the user password is mandatory here. Use
            <a
              href="/change-permissions"
              class="text-indigo-300 hover:text-indigo-400"
              >Change Permissions</a
            >
            instead, which applies restrictions while leaving the file openable
            without a password.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            How do I remove the password later?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            Open the protected file in the
            <a href="/unlock-pdf" class="text-indigo-300 hover:text-indigo-400"
              >password removal tool</a
            >, enter the password, and download a copy with the encryption
            removed. You need the password to do this; there is no bypass.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Will the protected PDF open in any reader?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            Any current PDF reader, including Adobe Reader, Preview, Chrome,
            Firefox, and Edge, opens AES-256 encrypted files. Very old readers
            released before AES-256 support was added may refuse the file.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Is my PDF or my password sent anywhere?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            No. QPDF runs as WebAssembly in your browser, so the file is
            encrypted on your device and neither the document nor the passwords
            are transmitted. Share the password with your recipient through a
            different channel than the file itself.
          </p>
        </details>
      </div>
    </section>
    {{> footer }}
    <script type="module" src="/src/js/utils/lucide-init.ts"></script>
    <script type="module" src="/src/js/utils/full-width.ts"></script>
    <script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
    <script type="module" src="/src/js/logic/protect-pdf-page.ts"></script>
    <script type="module" src="/src/js/mobileMenu.ts"></script>

    <script type="module" src="/src/js/main.ts"></script>

    <!-- JSON-LD Structured Data -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "SoftwareApplication",
        "name": "Encrypt PDF - BentoPDF",
        "applicationCategory": "PDF Tool",
        "operatingSystem": "Any - Web Browser",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        }
      }
    </script>

    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "HowTo",
        "name": "How to encrypt online",
        "description": "Learn how to encrypt using BentoPDF",
        "step": [
          {
            "@type": "HowToStep",
            "position": 1,
            "name": "Upload File",
            "text": "Click or drag and drop your file"
          },
          {
            "@type": "HowToStep",
            "position": 2,
            "name": "Process",
            "text": "Click the process button"
          },
          {
            "@type": "HowToStep",
            "position": 3,
            "name": "Download",
            "text": "Download your processed file"
          }
        ]
      }
    </script>

    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
          {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://www.bentopdf.com"
          },
          {
            "@type": "ListItem",
            "position": 2,
            "name": "Encrypt PDF",
            "item": "https://www.bentopdf.com/protect-pdf"
          }
        ]
      }
    </script>
  </body>
</html>