feat: wrap payload in envelope

packages/core/src/lavadome.mjs

@@ -8,21 +8,49 @@ import {
     createElement,
     appendChild,
     textContentSet,
+    WeakMap, create, set, get
 } from './native.mjs';
 import {distraction, unselectable} from './element.mjs';
 import {getShadow} from './shadow.mjs';
 
+
+// there's no code running earlier 
+const STORE = new WeakMap();
+
+export const envelope = (secret) => {
+    const en = create(null);
+    set(STORE, en, secret);
+    return en;
+};
+
+
 export function LavaDome(host, opts) {
     opts = options(opts);
 
     // make exported API tamper-proof
-    defineProperties(this, {text: {value: text}});
+    defineProperties(this, {
+        text: {value: text, writable: false, configurable: false},
+        envelope: {value: envelope, writable: false, configurable: false},
+    });
 
     // child of the shadow, where the secret is set, must be unselectable
     const child = unselectable();
     const shadow = getShadow(host, opts);
     appendChild(shadow, child);
 
+    function envelope(anEnvelope) {
+        if (typeof anEnvelope !== 'object') {
+            throw new Error(
+                `LavaDome: first argument must be an object, instead got ${stringify(anEnvelope)}`);
+        }
+        const secret = get(STORE, anEnvelope);
+        if (secret === undefined) {
+            throw new Error(
+                `LavaDome: first argument must be an envelope`);
+        }
+        text(secret);
+    }
+
     function text(text) {
         if (typeof text !== 'string') {
             throw new Error(

packages/react/demo/App.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LavaDome as LavaDomeReact } from '../src/index';
+import { LavaDome as LavaDomeReact, envelope } from '../src/index';
 
 const unsafeOpenModeShadow = location.href.includes('unsafeOpenModeShadow');
 
@@ -17,7 +17,7 @@ export default function App() {
                 <p id="PRIVATE">
                     <LavaDomeReact
                         unsafeOpenModeShadow={unsafeOpenModeShadow}
-                        text={'SECRET_CONTENT_ONLY_ACCESSIBLE_TO_LAVADOME'}
+                        envelope={envelope('SECRET_CONTENT_ONLY_ACCESSIBLE_TO_LAVADOME')}
                     />
                 </p>
             </div>

packages/react/package.json

@@ -28,7 +28,9 @@
         "swc-loader": "^0.2.3",
         "webpack": "^5.89.0",
         "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "4.15.1"
+        "webpack-dev-server": "4.15.1",
+        "react": "^16.12.0",
+        "react-dom": "^16.12.0"
     },
     "dependencies": {
         "@lavamoat/lavadome-core": "^0.0.10"

packages/react/src/index.jsx

@@ -1,19 +1,20 @@
 import React, { useEffect, useRef } from 'react'
 import { LavaDome as LavaDomeCore } from "@lavamoat/lavadome-core"
+export { envelope } from "@lavamoat/lavadome-core"
 
-export const LavaDome = ({ text, unsafeOpenModeShadow }) => {
+export const LavaDome = ({ envelope, unsafeOpenModeShadow }) => {
     const hostRef = useRef(null);
     return (
         <span ref={hostRef}>
             <LavaDomeShadow
-                text={text} hostRef={hostRef}
+                envelope={envelope} hostRef={hostRef}
                 unsafeOpenModeShadow={unsafeOpenModeShadow}
             />
         </span>
     )
 };
 
-function LavaDomeShadow({ hostRef, text, unsafeOpenModeShadow }) {
+function LavaDomeShadow({ hostRef, envelope, unsafeOpenModeShadow }) {
     const lavadome = useRef(null);
 
     useEffect(() => {
@@ -24,8 +25,9 @@ function LavaDomeShadow({ hostRef, text, unsafeOpenModeShadow }) {
     }, [])
 
     useEffect(() => {
-        lavadome.current.text(text);
-    }, [text]);
+        const payload = STORE.get(envelope);
+        lavadome.current.envelope(payload);
+    }, [envelope]);
 
     return <></>
 }

packages/react/test/basic.mjs

@@ -11,4 +11,25 @@ describe('test javascript mode', async function () {
         expect(result.includes('TO BE REPLACED')).toBeFalsy();
         expect(result.includes('SECRET_CONTENT_ONLY_ACCESSIBLE_TO_LAVADOME')).toBeFalsy();
     });
+    it('steal secret from react metadata on DOM nodes', async function () {
+        const result = await browser.executeAsync(function(done) {
+            const hostref = document.querySelector("#PRIVATE>span");
+            const cache = new Set();
+            const result = JSON.stringify(
+            hostref[
+                Object.getOwnPropertyNames(hostref).find((a) => a.includes("reactInternal"))
+            ].child,
+            (key, value) => {
+                if (typeof value === "object" && value !== null) {
+                if (cache.has(value)) return;
+                cache.add(value);
+                }
+                return value;
+            }
+            );
+            // specifically in the props / memoizedProps fields
+            done(result)
+        });
+        expect(result.includes('SECRET_CONTENT_ONLY_ACCESSIBLE_TO_LAVADOME')).toBeFalsy();
+    });
 });