Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve demos #34

Merged
merged 2 commits into from
Mar 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/core/demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
</head>
<body style="max-width: 700px; background-color: #FDDACD " onload="start(PRIVATE)">
<div id="content" style="padding: 10px">
<h1><a href="https://github.com/lavamoat/LavaDome">LavaDome</a> 🌋</h1>
<h1><a href="https://github.com/lavamoat/LavaDome">LavaDome (Core)</a> 🌋</h1>
<blockquote>
<p style="padding: 10px">
<i>Display sensitive information to the user only you two can access -
Expand Down Expand Up @@ -67,7 +67,7 @@ <h3><i>~ Can you bypass LavaDome?</i></h3>
<div>
This is not a secret:
<p id="PUBLIC">
<span> PUBLIC_CONTENT_NOT_ONLY_ACCESSIBLE_TO_LAVADOME </span>
<span> PUBLIC_CONTENT_ACCESSIBLE_TO_ALL </span>
</p>
</div>
<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/javascript/demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<div>
This is not a secret:
<p id="PUBLIC">
<span> PUBLIC_CONTENT_NOT_ONLY_ACCESSIBLE_TO_LAVADOME </span>
<span> PUBLIC_CONTENT_ACCESSIBLE_TO_ALL </span>
</p>
</div>
<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/javascript/test/basic.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ describe('test javascript mode', async function () {
const result = await browser.executeAsync(function(done) {
done(document.documentElement.innerText)
});
expect(result.includes('PUBLIC_CONTENT_NOT_ONLY_ACCESSIBLE_TO_LAVADOME')).toBeTruthy();
expect(result.includes('PUBLIC_CONTENT_ACCESSIBLE_TO_ALL')).toBeTruthy();
expect(result.includes('TO BE REPLACED')).toBeFalsy();
expect(result.includes('SECRET_CONTENT_ONLY_ACCESSIBLE_TO_LAVADOME')).toBeFalsy();
});
Expand Down
11 changes: 7 additions & 4 deletions packages/react/demo/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,29 @@ import { LavaDome as LavaDomeReact, toLavaDomeToken } from '../src/index';

const unsafeOpenModeShadow = location.href.includes('unsafeOpenModeShadow');

const blobURL = URL.createObjectURL(new Blob());
const secret = blobURL.split('/')[3].split('-').join('');
URL.revokeObjectURL(blobURL);

export default function App() {
const [count, setCount] = useState(0);

console.info('render marked', count);

return (
<div onClick={() => setCount(count+1)}
style={{ borderStyle: 'solid', margin: '10px', padding: '10px' }} >
<div onClick={() => setCount(count+1)} >
<div>
This is not a secret:
<p id="PUBLIC">
<span> PUBLIC_CONTENT_NOT_ONLY_ACCESSIBLE_TO_LAVADOME </span>
<span> PUBLIC_CONTENT_ACCESSIBLE_TO_ALL </span>
</p>
</div>
<div>
This is a secret:
<p id="PRIVATE">
<LavaDomeReact
unsafeOpenModeShadow={unsafeOpenModeShadow}
text={toLavaDomeToken(`SECRET_CONTENT_ONLY_ACCESSIBLE_TO_LAVADOME: "${count}"`)}
text={toLavaDomeToken(secret + ' ')}
/>
</p>
</div>
Expand Down
90 changes: 79 additions & 11 deletions packages/react/demo/index.html
Original file line number Diff line number Diff line change
@@ -1,16 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2210 0 100 100%22><text y=%22.90em%22 font-size=%2290%22>🌋</text></svg>">
<title>LavaDome (React) Demo</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
setTimeout(_ => start(document.querySelector('#root')), 100);
</script>
<style>
li {
padding: 3px 10px;
}
</style>
</head>
<body>
<div id="root"></div>
<script>
top.start = function(root) {
root.innerHTML = `
<div>
Currently, the LavaDomeReact demo only works locally by:
<li> cloning the
<a href="https://github.com/lavamoat/LavaDome">LavaDome repo</a>
</li>
<li>
setting up the project for development
</li>
and then:
<li>
running <code>npm run dev</code>
in the <code>react</code> package
</li>
<li>
and visiting <code>http://localhost:3000/</code>
</li>
But if you want to play with the core functionality of LavaDome without locally installing it,
you can easily do so by:
<li>
visiting the <a href="https://lavamoat.github.io/LavaDome/packages/core/demo/">online demo site</a>
</li>
</div>
`;
}
</script>
<body style="max-width: 700px; background-color: #FDDACD " onload="start(PRIVATE)">
<div id="content" style="padding: 10px">
<h1><a href="https://github.com/lavamoat/LavaDome#react">LavaDome (React)</a> 🌋</h1>
<blockquote>
<p style="padding: 10px">
<i>Display sensitive information to the user only you two can access -
<a href="https://github.com/lavamoat/LavaDome#README">learn more</a></i>
</p>
</blockquote>
<h1>Demo</h1>
<blockquote>
<h3><i>~ Can you bypass LavaDome?</i></h3>
<ul>
<li>Open the devtools and run whatever code you want</li>
<li>Use that code to get to the secret part and prove you can access it via JavaScript</li>
<ul>
<li>Do not test the randomness security of the secret - it's not what this is about </li>
<li>You may however assume you know all possible characters the secret may contain</li>
</ul>
<li>
Remember:
<ul>
<li>This is a very new project and is at experimental stage ⚠️</li>
<li>It is not unlikely to find ways to bypass it at this point</li>
<li>USE AT YOUR OWN RISK!</li>
<li>If you found a way around LavaDome, please open an issue</li>
</ul>
</li>
</ul>
</blockquote>
</div>

<div id="PRIVATE" style="background-color: #FECDBA; border-style: solid; margin: 10px; padding: 10px">
<span> TO BE REPLACED </span>
</div>

<blockquote>
<i>
~ By
<a href="https://github.com/LavaMoat">LavaMoat</a> 🌋 @
<a href="https://github.com/MetaMask">MetaMask</a> 🦊 @
<a href="https://github.com/consensys">Consensys</a> 💙
</i>
</blockquote>
</body>
</html>
</html>
2 changes: 1 addition & 1 deletion packages/react/test/basic.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ describe('test javascript mode', async function () {
const result = await browser.executeAsync(function(done) {
done(document.documentElement.innerText)
});
expect(result.includes('PUBLIC_CONTENT_NOT_ONLY_ACCESSIBLE_TO_LAVADOME')).toBeTruthy();
expect(result.includes('PUBLIC_CONTENT_ACCESSIBLE_TO_ALL')).toBeTruthy();
expect(result.includes('TO BE REPLACED')).toBeFalsy();
expect(result.includes('SECRET_CONTENT_ONLY_ACCESSIBLE_TO_LAVADOME')).toBeFalsy();
});
Expand Down