-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathupload.html
155 lines (129 loc) · 6.42 KB
/
upload.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!--
* Upload page to send file, encrypt it, save on server and generate download link
*
* @author Denis CLAVIER <clavierd at gmail dot com>
-->
<!DOCTYPE html>
<html>
<head>
<title>Upload : Share your files, not your secrets</title>
<!-- Include script SJCL, jquery, recaptcha API and bootstrap -->
<script src="sjcl.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!-- Recaptcha API and secret key for captcha module -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<!-- HTML code to render the upload button and the share link -->
<div id="main div" class="w3-margin w3-padding-large">
<h2>Select the file you wanna upload : </h2>
<!-- Upload button for file -->
<input class="w3-input" id="file" type="file" multiple />
</br>
<!-- Captcha module to avoid robot and DOS -->
<div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"></div>
<br/>
<!-- Submit button to start the upload process -->
<button type="button" class="w3-button w3-teal" id="uploadBtn">Upload</button>
</br>
</br>
<!-- div for the share link -->
<div id="link"></div>
</div>
<!-- JavaScript code to get data, cipher and request the server -->
<script>
/**
* @param string @file
* The uploaded file (in string format) to encrypt
* @param string @name
* The name of the file in order to save it with the file for decryption process
*
* @return
* A string array with 2 elements : the encrypted file and the associated key in base 64
*/
function encryptFile(file,name)
{
//Create a JSON object to bind the file and its name
var fileJSON = '{"data" : "' + file + '", "name" : "' + name + '"}';
//Genererate a secure random key
var salt = sjcl.random.randomWords(8,8); //Get a random salt
var key = sjcl.misc.pbkdf2(name, salt, 1000, 256); //Derivate the salt in order to get a 256 bits key (BitArray)
var keyB64 = sjcl.codec.base64.fromBits(key); //Convert the key in base 64 to handle easily (url).
//Encrypt the file with the generated key
var crypt = sjcl.encrypt(key, fileJSON);
return [crypt,keyB64];
}
/**
* Get the uploaded file, encrypt it, save it in the server and generate a share link
*/
function uploadProcess()
{
//Alert thrown if no file has been selected
if( document.getElementById("file").files.length == 0 ){
alert('No file selected');
exit(1);
}
//Get captcha response from Google API
var response = grecaptcha.getResponse();
//If there is no response, so captcha is not yet validated, so throw an alert
if(response.length == 0)
{
alert('Captcha verification is required');
exit(1);
}
//If captcha has been checked, the upload process go on
else
{
//Get the uploaded file
var fileInput = document.querySelector('#file');
//Read the file in order to convert in a buffer (string)
var reader = new FileReader();
//Read data in base 64 format to handle easily
reader.readAsDataURL(fileInput.files[0]);
//When all data are loaded, file is encrypted and share link is created
reader.addEventListener('load', function()
{
//Encrypt the file with its name
var crypt = encryptFile(reader.result,fileInput.files[0].name);
//Create a new POST request to send the encrypted file to the server
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.html');
//When file is uploaded on the server, create the share link
xhr.addEventListener('load', function()
{
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
{
//Get the file id generated by the server
const fileID = xhr.responseText;
//Create the share link with the file id and the key
var link = window.location.href +'download.html?file=' + fileID + '#' + crypt[1];
//Print the share link
var message = 'Share this link with your friends : <a href=' + link + '>' + link + '</a>';
//Throw an alert to inform the user
alert('Upload Successful ! Use the link to share !');
$('#link').html(message);
}
}, false);
//Create a blob with the encrypted data
var form = new FormData();
var blob = new Blob([crypt[0]], { type: "text/xml"});
//Provide parameter to the POST request : the encrypted file and the captcha validation
form.append('cryptFile', blob);
form.append('g-recaptcha-response', grecaptcha.getResponse());
//Send the post request
xhr.send(form);
});
}
}
//Initialisation function
function init()
{
//launch the upload process when upload button is pressed
$('#uploadBtn').click(uploadProcess);
}
//Start initialisation process when the user load the page
$(init);
</script>
</body>
</html>