Store sensitive data in browser, so it's inaccessible to other websites
<p>How do I put sensitive credentials in the browser so they can be accessed by the javascript on the webpage, but not by the server or other websites?</p>

<p>I'm building a website that displays AES encrypted messages to users. A message is retrieved through an API and stored on my server. A user can log in and enter his key to decrypt in the browser, like this:</p>

<pre class="lang-js prettyprint-override"><code>$(document).on("submit", "#decryption_form", function(e) {
  e.preventDefault();
  var key       = $("#key").val();                                  // The key is retrieved through a form input div
  var iv        = key.substring(32);                                // The initialization vector is a part of the key submitted by the user
  var encrypted = $("#message").attr("encrypted");                  // The encrypted message that was fetched from the server was added as an attribute to a div
  var decrypted = CryptoJS.AES.decrypt(encrypted, key, { iv: iv }); // The message is decrypted
  $("#message").html(decrypted);                                    // The decrypted message is displayed to the user
});
</code></pre>

<p>I've noticed that <a href="https://protonmail.com/faq" rel="nofollow noreferrer">ProtonMail</a> - a zero knowledge email provider who put your PGP keypair in the browser to be decrypted with your credentials - can persist the sensitive credentials even when you refresh the webpage or copy/paste the URL into the same browser tab (but not if you paste the URL into a new tab). Their source code is <a href="https://github.com/ProtonMail/WebClient" rel="nofollow noreferrer">open source</a>, but too complicated for me to understand.</p>

<p>This makes me think I must somehow be able to safeguard sensitive credentials, and even persist the data for users who navigate between my webpages in the same browser tab (without the need to send it through my server).</p>

<p><a href="https://crypto.stackexchange.com/questions/35530/where-and-how-to-store-private-keys-in-web-applications-for-private-messaging-wi">This post</a> discusses the topic, but without canonical/concrete answers. There is also <a href="https://stackoverflow.com/questions/18030684/persist-sensitive-data-in-browser-possible">this 3 year old post</a> but comments are mostly about why OP needs to store sentive data in the browser at all.</p>