Delivering copy-protected HTML content to be cached and rendered in a PWA a

I have valuable content represented as HTML content including images.

After reading about PWA technology made easy with Vaadin Flow and/or Vaadin Fusion, I wonder how one might write an app where the latest copy of such content is downloaded from a server for presentation to the user on their device/computer.

The content would be rendered using the web-rendering technology of that particular device/computer operating system. That content must be copy-protected, to avoid piracy. So the download communication from the server must be encrypted, which I suppose a TLS connection would handle.

But the content must also be cached locally on the client device/computer for reading by the user even when offline, when an internet connection is unavailable.

So how might I store that HTML text & images locally in an encrypted manner?

Security is not my forte. I am barely familiar with the basics of [public-key cryptography]

I have delivered this copy-protected functionality in a native app using C-based encryption of locally-stored stored files that are decrypted on-the-fly at runtime into memory for local web-rendering. Now I am wondering if there is a way to do this with a PWA in the latest Vaadin.

I’m not a security expert either, but I have some knowledge and an interest in security. Having the content fetched only through HTTPS (TLS encryption) should make it safe for the transmission.

But afaik there’s no reasonable way to prevent the end user from copying (and redistributing) the HTML content and images from their browser if you want to render it as HTML is normally rendered so that it is interactive and not just a static prerendered image. You can only make it more difficult to copy the content (HTML & images) in a sensible format if you would not render it normally as DOM in the browser but as prerendered images or via a canvas element, but in that case it wouldn’t really even be HTML content anymore and it wouldn’t matter what the source format is if it’s not used as HTML in the end. Also the user can always take screenshots or video recordings of the content or application (and use OCR software to convert text in images to actual text).

If you trust the user and are ok with just displaying the HTML as normal, but are mostly concerned about other native applications or malware that might be running on the user’s computer that might be trying to copy the content from the browser’s storage on disk, then it might make sense to store the content as encryped data e.g. in localStorage, IndexedDB or with Cache API. If the user needs to access it offline then the encryption key should probably be something that the user knows or has (like the user’s password) that isn’t stored directly on the same device where the encrypted content is.

In any case this problem isn’t specific to Vaadin in any way and Vaadin doesn’t have any features or helpers for this kind of use case (encryption or copy protection parts) as far as I’m aware.