Skip to content

Add client side handling for too long inputs #10

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.

Sign up for GitHub

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

Open
timlandolt wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add client side handling for too long inputs #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions src/semel.cr
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ end

# Landing page for Alice with the form to create a secret.
get "/" do
max_ciphertext_length = MAX_CIPHERTEXT_LENGTH
render "src/views/new.ecr", "src/views/layout.ecr"
end

Expand Down
13 changes: 13 additions & 0 deletions src/views/layout.ecr
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,19 @@
pointer-events: none;
transform: scaleY(0.8);
}

#error-container {
margin-top: 50px;
padding: 12px;
background: rgba(255, 0, 0, 0.3);
border-radius: 10px;
}

#error {
margin: 0;
font-size: 18px;
color: rgb(120, 0, 0);
}
</style>
</head>
<script id="script-global">
Expand Down
23 changes: 23 additions & 0 deletions src/views/new.ecr
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,13 @@
async function encryptAndStore() {
const { key, ciphertext } = await encryptLocally(plaintext());
const isInputTooLong = to_base64(ciphertext).length > <%= max_ciphertext_length %>;
Copy link
Owner

@schmijos schmijos Aug 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My long-term design goal is to move away from ecr-templates but using HTML only. You're going into another direction. Please move this test into the backend. Security relevance is low and you can steer it globally then. Also you can simply show the backend error message for all messages generically.

if (isInputTooLong) {
displayError('Your input is too long!');
hideSharable();
return;
}
hideError();
const { url } = await storeRemotely(ciphertext, expiresInSeconds());
Copy link
Owner

@schmijos schmijos Aug 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd rather expect an error to be shown as aftermath caused by this fetch call.

showSharable(`${url}:${to_base64(key)}`);
}
Expand Down Expand Up @@ -67,6 +74,18 @@
document.getElementById('sharable').innerText = url;
document.getElementById('sharable-container').style.removeProperty('display');
}
function hideSharable() {
document.getElementById('sharable').innerText = '';
document.getElementById('sharable-container').style.display = 'none';
}
function displayError(error) {
document.getElementById('error').innerHTML = error;
document.getElementById('error-container').style.removeProperty('display');
}
function hideError() {
document.getElementById('error-container').style.display = 'none';
}
function copyUrlToClipboard(copier) {
const sharable = document.getElementById('sharable')
sharable.select();
Expand Down Expand Up @@ -116,6 +135,10 @@
<button onclick="copyUrlToClipboard(this)">Copy URL to clipboard</button>
</section>

<section id="error-container" style="display: none">
<p id="error"></p>
Copy link
Owner

@schmijos schmijos Aug 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix indentation please.

</section>

<section id="explanation">
<p>Do you need to trust me?</p>
<details ontoggle="document.getElementById('code-detail').textContent = document.getElementById('script-lib').textContent.replace(/^ /gm, '')">
Expand Down