how to encrypt loader data but with type hints

[SteveSuv]

why encrypt loader data?
i don't want anyone see structured loader data in F12 html source code, because it's easy for hackers using crawlers to steal these structured data by parse html source code.

window.__remixContext =  xxx // structured loader data - json

so i use CryptoJS to encrypt and decrypt loader data

import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import CryptoJS from "crypto-js";

const CRYPTO_SECRET = "xxx";

export const loader = async () => {
  const data = await db.user.findMany();
  // return json(data); 

  // encrypt data
  const encryptData = CryptoJS.AES.encrypt(JSON.stringify(data), CRYPTO_SECRET).toString() 

  return json(encryptData);
};

export default () => {
  const encryptData = useLoaderData<typeof loader>()

  // decrypt data
  const dataStr = CryptoJS.AES.decrypt(encryptData, CRYPTO_SECRET).toString(CryptoJS.enc.Utf8)
  const data = JSON.parse(dataStr)  // the data type is any

  return <div>{data.length}</div>;
};

it will show successfully, and the loader data in html source code just be a string, it's very good. but i lose type hints of loader data in dev, do have some way that i can encrypt loader data with no type hints lose?

[lzif]

Type hint still works for me

[sergiodxa]

If you're shipping the CRYPTO_SECRET to the browser, that means someone could steal it from the JS files and use it to decrypt your data.

I think #8048 will let you solve this, instead of sending raw structured data you can send the React elements which is not gonna be much different than the HTML data.