Skip to content

Commit

Permalink
Merge pull request #47 from Haroenv/feat/no-jquery
Browse files Browse the repository at this point in the history 
feat(security): remove jQuery dependency
  • Loading branch information
@eranchetz
eranchetz authored Jan 4, 2021
2 parents 5b64835 + 3590ea2 commit 7058ee9
Show file tree
Hide file tree
Showing 2 changed files with 204 additions and 154 deletions.
257 changes: 147 additions & 110 deletions static/getmsg.html
View file
Original file line number Diff line number Diff line change
@@ -1,125 +1,162 @@
<!DOCTYPE html>
<html>

<head>
<head>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="/static/jquery-2.1.1.min.js" integrity="sha384-fj9YEHKNa/e0CNquG4NcocjoyMATYo1k2Ff5wGB42C/9AwOlJjDoySPtNJalccfI"></script>
<script type="text/javascript" src="/static/clipboard.min.js" integrity="sha384-cV+rhyOuRHc9Ub/91rihWcGmMmCXDeksTtCihMupQHSsi8GIIRDG0ThDc3HGQFJ3"></script>
<link rel="stylesheet" href="/static/application.css">
<!-- Facebook/Slack Meta Tags-->
<meta property="og:title" content="Self Destructing Secure Message" />
<meta
property="og:image"
content="https://github.com/eranchetz/secretMsg"
/>
<meta property="og:site_name" content="secureMsg" />
<meta
property="og:description"
content="A self destructing one time secure msg service, have fun, stay secure!"
/>
</head>

<body>
<script
type="text/javascript"
src="/static/clipboard.min.js"
integrity="sha384-cV+rhyOuRHc9Ub/91rihWcGmMmCXDeksTtCihMupQHSsi8GIIRDG0ThDc3HGQFJ3"
></script>
<link rel="stylesheet" href="/static/application.css" />
<main class="send">
<div class="container">
<h1>Secret Message</h1>
<p class="subtitle">Get your secret one-time read only message</p>
<div class="input-field">


<textarea id="textarea1" name="msg" readonly=true class="materialize-textarea" placeholder="Message should appear here"></textarea>

</div>
<div class="button">
<button class="btn clipboard" type="submit" data-clipboard-target="#textarea1" name="action">Copy to clipboard

</button>
</div>
<div class="container">
<h1>Secret Message</h1>
<p class="subtitle">Get your secret one-time read only message</p>
<div class="input-field">
<textarea
id="textarea1"
name="msg"
readonly="true"
placeholder="Message should appear here"
></textarea>
</div>
<div class="button">
<button
class="btn clipboard"
type="submit"
data-clipboard-target="#textarea1"
name="action"
>
Copy to clipboard
</button>
</div>
</div>
</main>


<script type="text/javascript">
$(document).ready(function () {
new Clipboard('.btn');

let params = (new URL(window.location)).searchParams;
console.log(window.location.origin + "/secret?token=" + params.get('token') + "&filetoken=" + params.get('filetoken') + "&filename=" + params.get('filename') );
$.ajax({
type: "GET",
url: window.location.origin + "/secret?token=" + params.get('token'),
success: function (data) {
console.log('Submission was successful.');
console.log(data);
showMsg(data.msg, params.get('filetoken'), params.get('filename'))
},
error: function (data) {
console.log('An error occurred.');
console.log(data);
showMsg("Message was already deleted :(")
},
});
});

function showMsg(msg, filetoken, filename) {
$('#pbar').hide()
$('#textarea1').text(msg)
if (filetoken) {
console.log('filetoken=', filetoken)
getSecret(filetoken, filename)
function domReady(fn) {
document.addEventListener('DOMContentLoaded', fn);
if (
document.readyState === 'interactive' ||
document.readyState === 'complete'
) {
fn();
}
}

domReady(function () {
new Clipboard('.btn');

const params = new URL(window.location).searchParams;

console.log(
window.location.origin +
'/secret?token=' +
params.get('token') +
'&filetoken=' +
params.get('filetoken') +
'&filename=' +
params.get('filename')
);

fetch('/secret?token=' + params.get('token'), {
method: 'GET',
})
.then((res) => {
if (!res.ok) {
throw new Error(res);
}
return res;
})
.then((res) => res.json())
.then((data) => {
console.log('Submission was successful.');
console.log(data);
showMsg(data.msg, params.get('filetoken'), params.get('filename'));
})
.catch((err) => {
console.log('An error occurred.');
console.log(err);
showMsg('Message was already deleted :(');
});
});

function showMsg(msg, filetoken, filename) {
document.getElementById('textarea1').textContent = msg;
if (filetoken) {
console.log('filetoken=', filetoken);
getSecret(filetoken, filename);
}

function getSecret(token, name) {
fetch(window.location.origin + "/secret?token=" + token, {
method: 'get'
}).then(function (response) {
response.json().then(function (json) {
saveData(json.msg, name);
});



}).catch(function (err) {
console.error(err);
});
}

function getSecret(token, name) {
fetch('/secret?token=' + token, {
method: 'GET',
})
.then((res) => res.json())
.then((data) => {
saveData(data.msg, name);
})
.catch((err) => {
console.error(err);
});
}

function saveData(data, fileName) {
var a = document.createElement('a');
document.body.appendChild(a);
a.style = 'display: none';

console.log('data=', data);
console.log('fileName=', fileName);
var blob = b64toBlob([data], { type: 'octet/stream' });
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
}

function b64toBlob(b64Data, contentType, sliceSize) {
sliceSize = sliceSize || 512;

var byteCharacters = atob(b64Data);
var byteArrays = [];

for (
var offset = 0;
offset < byteCharacters.length;
offset += sliceSize
) {
var slice = byteCharacters.slice(offset, offset + sliceSize);

var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}

var byteArray = new Uint8Array(byteNumbers);

byteArrays.push(byteArray);
}

var saveData = (function () {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
return function (data, fileName) {
console.log( "data=", data);
console.log( "fileName=", fileName);
var blob = b64toBlob([data], { type: "octet/stream" })
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
};
}());

function b64toBlob(b64Data, contentType, sliceSize) {
sliceSize = sliceSize || 512;

var byteCharacters = atob(b64Data);
var byteArrays = [];

for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);

var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}

var byteArray = new Uint8Array(byteNumbers);

byteArrays.push(byteArray);
}

return new Blob(byteArrays, {type: contentType});
}

return new Blob(byteArrays, { type: contentType });
}
</script>
<!-- Facebook/Slack Meta Tags-->
<meta property="og:title" content="Self Destructing Secure Message" />
<meta property="og:image" content="https://github.com/eranchetz/secretMsg" />
<meta property="og:site_name" content="secureMsg" />
<meta property="og:description" content="A self destructing one time secure msg service, have fun, stay secure!" />
</body>

</body>
</html>
101 changes: 57 additions & 44 deletions static/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,58 +58,71 @@ <h1>Secret Message</h1>

</main>
</body>
<script type="text/javascript" src="/static/jquery-2.1.1.min.js" integrity="sha384-fj9YEHKNa/e0CNquG4NcocjoyMATYo1k2Ff5wGB42C/9AwOlJjDoySPtNJalccfI"></script>

<script type="text/javascript" src="/static/clipboard.min.js" integrity="sha384-cV+rhyOuRHc9Ub/91rihWcGmMmCXDeksTtCihMupQHSsi8GIIRDG0ThDc3HGQFJ3"></script>
<script type="text/javascript">
new Clipboard(".btn");
new Clipboard('.btn');

$("#secretform").submit(function(e) {
e.preventDefault();
if (this.val === "") return false;
const form = new FormData($("#secretform")[0]);
const form = document.getElementById('secretform');

$.ajax({
type: "POST",
url: "/secret",
processData: false, // Important!
contentType: false,
cache: false,
data: form,
success(data) {
$(".success-encrypted").css({
opacity: 1,
pointerEvents: "auto",
visibility: "visible"
});
$(".encrypt").css({
opacity: 0,
pointerEvents: "none",
visibility: "hidden"
});
$(".ttl").css({
opacity: 0,
pointerEvents: "none",
visibility: "hidden"
});
$(".input-field").css({
opacity: 0,
visibility: "hidden",
pointerEvents: "none"
form.addEventListener('submit', function (e) {
e.preventDefault();

const formData = new FormData(this);

fetch('/secret', {
method: 'POST',
body: formData,
})
.then((res) => res.json())
.then((data) => {
applyCss(document.querySelector('.success-encrypted'), {
opacity: 1,
pointerEvents: 'auto',
visibility: 'visible',
});

applyCss(document.querySelector('.encrypt'), {
opacity: 0,
pointerEvents: 'none',
visibility: 'hidden',
});
applyCss(document.querySelector('.ttl'), {
opacity: 0,
pointerEvents: 'none',
visibility: 'hidden',
});
applyCss(document.querySelector('.input-field'), {
opacity: 0,
visibility: 'hidden',
pointerEvents: 'none',
});

showURL(data.token, data.filetoken, data.filename);
});
showURL(data.token, data.filetoken, data.filename);
}
});
});

function showURL(token, filetoken, filename) {
if (filetoken) {
$("#url").text(
`${window.location.origin}/getmsg?token=${encodeURIComponent(token)}&filetoken=${encodeURIComponent(filetoken)}&filename=${encodeURIComponent(filename)}`
);
return;
function applyCss(element, css) {
Object.entries(css).forEach(([key, value]) => {
element.style[key] = value;
});
}

function showURL(token, filetoken, filename) {
const url = document.getElementById('url');
if (filetoken) {
url.textContent = `${
window.location.origin
}/getmsg?token=${encodeURIComponent(token)}&filetoken=${encodeURIComponent(
filetoken
)}&filename=${encodeURIComponent(filename)}`;
} else {
url.textContent = `${
window.location.origin
}/getmsg?token=${encodeURIComponent(token)}`;
}
}
$("#url").text(`${window.location.origin}/getmsg?token=${encodeURIComponent(token)}`);
}

</script>

</html>

0 comments on commit 7058ee9

Please sign in to comment.