For E2E, decrypt and render client side

package.json

@@ -40,7 +40,9 @@
  "dependencies": {
  "@prisma/client": "^4.15.0",
  "libsodium-wrappers": "^0.7.11",
+ "prism-themes": "^1.9.0",
  "prismjs": "^1.29.0",
- "sanitize-html": "^2.10.0"
+ "sanitize-html": "^2.10.0",
+ "svelte-prism-autoloader": "^0.0.3"
  }
 }

src/routes/+page.svelte

@@ -112,7 +112,7 @@
 
 <div class="pb-4">
  <div class="flex flex-row items-center gap-4">
- <h1 class="mr-auto text-2xl">YAbin</h1>
+ <h1 class="mr-auto text-2xl"><a href="/">YAbin</a></h1>
 
  <div>
  <label for="burn" class="py-1">Burn after read?</label>

src/routes/[key]/+page.server.ts

@@ -8,7 +8,7 @@ import sanitize from 'sanitize-html';
 import sodium from 'libsodium-wrappers';
 
 /** @type {PageServerLoad} */
-export async function load({ params, url }) {
+export async function load({ params }) {
  const { key } = params;
 
  const data = await prisma.paste.findUnique({
@@ -18,27 +18,11 @@ export async function load({ params, url }) {
  if (!data) throw error(404, 'Not found');
 
  let { content, language, encrypted } = data;
- const nonceKeyB64 = url.searchParams.get('k');
-
- if (encrypted && nonceKeyB64) {
- await sodium.ready;
- try {
- if (!nonceKeyB64) throw new Error('Missing key');
- const [nonceB64, keyB64] = decodeURIComponent(nonceKeyB64).split(';');
- const nonce = sodium.from_base64(nonceB64);
- const key = sodium.from_base64(keyB64);
- const decrypted = sodium.crypto_secretbox_open_easy(sodium.from_base64(content), nonce, key);
- content = sodium.to_string(decrypted);
- } catch (e: any) {
- console.log(e);
- throw error(400, 'Invalid key');
- }
- }
 
  let contentHtml: string;
 
  try {
- if (language !== 'plaintext') {
+ if (!encrypted && language !== 'plaintext') {
  loadLanguages([language]);
  contentHtml = Prism.highlight(content, Prism.languages[language], language);
  } else {
@@ -51,6 +35,8 @@ export async function load({ params, url }) {
 
  return {
  content,
- contentHtml
+ contentHtml,
+ encrypted,
+ language
  };
 }

src/routes/[key]/+page.svelte

@@ -1,12 +1,26 @@
 <script lang="ts">
  import { goto } from '$app/navigation';
+ import { page } from '$app/stores';
  import { onMount } from 'svelte';
+ import { AutoLoader } from 'svelte-prism-autoloader';
  import type { PageData } from './$types';
 
+ let Prism: any;
+
  export let data: PageData;
+ let { content, contentHtml, language, encrypted } = data;
+ let isSafe = true;
+ let isDecrypted = false;
+ let codeRef: HTMLElement;
 
- let cmdKey = 'Ctrl';
+ $: if (isDecrypted && codeRef) {
+ (async () => {
+ const Prism = (await import('prismjs')).default;
+ Prism.highlightElement(codeRef);
+ })();
+ }
 
+ let cmdKey = 'Ctrl';
  onMount(() => {
  const isMac =
  (navigator as any).userAgentData?.platform?.toLowerCase() === 'macos' ||
@@ -29,16 +43,46 @@
  copyContent();
  }
  });
+
+ if (encrypted) {
+ contentHtml = 'Decrypting...';
+ (async () => {
+ const _sodium = (await import('libsodium-wrappers')).default;
+
+ try {
+ await _sodium.ready;
+ const sodium = _sodium;
+
+ const nonceKeyB64 = $page.url.searchParams.get('k');
+ if (!nonceKeyB64) throw new Error('Missing key');
+ const [nonceB64, keyB64] = decodeURIComponent(nonceKeyB64).split(';');
+ const nonce = sodium.from_base64(nonceB64);
+ const key = sodium.from_base64(keyB64);
+ const decrypted = sodium.crypto_secretbox_open_easy(
+ sodium.from_base64(content),
+ nonce,
+ key
+ );
+ content = sodium.to_string(decrypted);
+
+ isSafe = false;
+ isDecrypted = true;
+ } catch (e) {
+ console.error(e);
+ contentHtml = 'Failed to decrypt';
+ }
+ })();
+ }
  });
 
  function copyContent() {
- navigator.clipboard.writeText(data.content);
+ navigator.clipboard.writeText(content);
  }
 </script>
 
 <div class="pb-4">
  <div class="flex flex-row items-center gap-4">
- <h1 class="mr-auto text-2xl">YAbin</h1>
+ <h1 class="mr-auto text-2xl"><a href="/">YAbin</a></h1>
 
  <button
  class="btn underline underline-offset-4 px-2 py-1"
@@ -51,7 +95,7 @@
  <button
  class="btn underline underline-offset-4 px-2 py-1"
  title="{cmdKey}+N"
- on:click={() => goto('/new')}
+ on:click={() => goto('/')}
  >
  New
  </button>
@@ -66,8 +110,13 @@
  </div>
 </div>
 
-<div class="whitespace-pre bg-dark p-4 line-numbers">
- {@html data.contentHtml}
+<div class="whitespace-pre bg-dark p-4 overflow-x-scroll">
+ {#if isSafe}
+ {@html contentHtml}
+ {:else}
+ <pre><code bind:this={codeRef} class="language-{language}">{content}</code></pre>
+ <AutoLoader languagesPath="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/" />
+ {/if}
 </div>
 
 <svelte:head>
@@ -79,3 +128,11 @@
  referrerpolicy="no-referrer"
  />
 </svelte:head>
+
+<style>
+ pre {
+ background-color: var(--color-dark) !important;
+ padding: 0 !important;
+ margin: 0 !important;
+ }
+</style>

yarn.lock

@@ -1653,6 +1653,11 @@ prettier@^2.8.0:
  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
  integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
 
+prism-themes@^1.9.0:
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/prism-themes/-/prism-themes-1.9.0.tgz#19c034f3205f1e28d75d89728e54ccd745f7e3dd"
+ integrity sha512-tX2AYsehKDw1EORwBps+WhBFKc2kxfoFpQAjxBndbZKr4fRmMkv47XN0BghC/K1qwodB1otbe4oF23vUTFDokw==
+
 prisma@^4.15.0:
  version "4.15.0"
  resolved "https://registry.yarnpkg.com/prisma/-/prisma-4.15.0.tgz#4faa94f0d584828b68468953ff0bc88f37912c8c"
@@ -1914,6 +1919,11 @@ svelte-preprocess@^5.0.3:
  sorcery "^0.11.0"
  strip-indent "^3.0.0"
 
+svelte-prism-autoloader@^0.0.3:
+ version "0.0.3"
+ resolved "https://registry.yarnpkg.com/svelte-prism-autoloader/-/svelte-prism-autoloader-0.0.3.tgz#f524fdfe2424e255e0b6475cbee489ad6231d29f"
+ integrity sha512-hp0k3Rn39rCCjex4quQpSRX+JriSm3CyNkJjvMMFQ+NdzIENXMQA0NAX4IwyjeWdnvE3DbfGRUQlPMxlW76BEA==
+
 svelte-select@^5.6.1:
  version "5.6.1"
  resolved "https://registry.yarnpkg.com/svelte-select/-/svelte-select-5.6.1.tgz#2626748c92ff3983c75f273d87afba59ffef3b29"