trouble creating an identical hash server-side and client-side

[wvhulle]

Hi, I would like to obtain the same hash of a file on server as on the client.

I tried:

1. creating a form to upload
2. computing the hash with node-forge client-side
3. computing the hash on Linux command-line
4. uploading the file through the form
5. grabbing the file server-side as a blob
6. reading contents with .text() server-side
7. computing the hash server-side with node-forge

I am stuck at 7.

So, first I upload a file through a form

<form method="POST" action="?/upload" enctype="multipart/form-data">
		<input
			id="csvFile"
			name="csvFile"
			type="file"
			on:change={handleChange}
		/>
	<button type="submit" class="btn">Upload</button>
</form>

and I compute the hash of a file in the browser with node-forge:

function handleChange(event) {
		let files = event.target.files;
		const file = files[0]
                reader = new FileReader();
                reader.onload = function (event) {
		        var binary = event.target.result;
			var md = forge.md.sha256.create();
			sha256 = md.update(binary).digest().toHex();
		};
                reader.readAsBinaryString(f);
}

This computes a hash that is the same as when I execute it from the command line with sha256sum, so it is reliable.

However, when I upload the file and process it on SvelteKit, I am unable to obtain the same hash. I am thinking this is because the filename or something else is missing from the resulting blob compared to what is available in the browser.

export const actions = {
    upload: async ({ request }) => {
        const formData = await request.formData()
        const file = await formData.get(`csvFile`) as File;
        const contents = await file.text()

        const md = forge.md.sha256.create();
        md.update(contents);
        const sha256 = md.digest().toHex()
    }
}

I cannot use new FileReader() here because I am in a Node environment.

How can I create the exact same hash server-side and client-side? Do I need to add the filename or something to obtain the same hash as from the command line?

Thanks in advance!

[repsac-by]

If it fits, I did without FileReader and node-forge and have the same hash server-side and client-side

+page.svelte

<script>
/** @type {import('./$types').ActionData} */
export let form;

let sha256 = '';

/**
 * @param {ArrayBuffer} buffer
 */
function toHex(buffer) {
	return new Uint8Array(buffer).reduce(
		(hex, uint) => hex + uint.toString(16).padStart(2, '0'),
		''
	);
}

/**
 * @param {Event} event
 */
async function handleChange(event) {
		const file = /** @type {HTMLInputElement} */ (event.target).files?.[0];
		if (!file) return;

		sha256 = toHex(await crypto.subtle.digest('SHA-256', await file.arrayBuffer()));
}
</script>

<p>SHA256 client: {sha256}</p>
<p>SHA256 server: {form?.sha256 ?? ''}</p>

<form method="POST" action="?/upload" enctype="multipart/form-data">
		<input
			id="csvFile"
			name="csvFile"
			type="file"
			on:change={handleChange}
		/>
	<button type="submit" class="btn">Upload</button>
</form>

+page.server.js

/**
 * @param {ArrayBuffer} buffer
 */
function toHex(buffer) {
	return Buffer.from(buffer).toString('hex');
}

/** @type {import('./$types').Actions} */
export const actions = {
	async upload({ request }) {
		const formData = await request.formData();
		const file = formData.get('csvFile');

		if (!(file instanceof Blob) || file.size === 0) return { sha256: '' };

		const sha256 = toHex(await crypto.subtle.digest('SHA-256', await file.arrayBuffer()));
		return { sha256 };
	}
};

[wvhulle]

Thanks for the large example, but how did you set up an https server? You need an https server to use subtle crypto.

…

On Tue, 18 Oct 2022, 11:36 repsac, ***@***.***> wrote: If it fits, I did without FileReader and node-forge and have the same hash server-side and client-side +page.svelte <script>/** @type {import('./$types').ActionData} */export let form; let sha256 = ''; /** * @param {ArrayBuffer} buffer */function toHex(buffer) { return new Uint8Array(buffer).reduce( (hex, uint) => hex + uint.toString(16).padStart(2, '0'), '' );} /** * @param {Event} event */async function handleChange(event) { const file = /** @type {HTMLInputElement} */ (event.target).files?.[0]; if (!file) return; sha256 = toHex(await crypto.subtle.digest('SHA-256', await file.arrayBuffer()));}</script> <p>SHA256 client: {sha256}</p><p>SHA256 server: {form?.sha256 ?? ''}</p> <form method="POST" action="?/upload" enctype="multipart/form-data"> <input id="csvFile" name="csvFile" type="file" on:change={handleChange} /> <button type="submit" class="btn">Upload</button></form> +page.server.js /** * @param {ArrayBuffer} buffer */function toHex(buffer) { return Buffer.from(buffer).toString('hex');} /** @type {import('./$types').Actions} */export const actions = { async upload({ request }) { const formData = await request.formData(); const file = formData.get('csvFile'); if (!(file instanceof Blob) || file.size === 0) return { sha256: '' }; const sha256 = toHex(await crypto.subtle.digest('SHA-256', await file.arrayBuffer())); return { sha256 }; }}; — Reply to this email directly, view it on GitHub <#7294 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AB2VD2DOMQRMGXH4JLNPUMLWDZVRPANCNFSM6AAAAAARHHKVSI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[repsac-by]

The Web Crypto API is made available via the crypto global.

https://kit.svelte.dev/docs/web-standards#web-crypto

[wvhulle]

I tried using crypto in the browser, but it said that the crypto module is unavailable. Don't you need https for this?

[repsac-by]

Indeed, I use local https with mkcert to develop

[repsac-by]

But it also works by http on localhost

[wvhulle]

Do you use a reverse proxy for serving the generated certificate?

[repsac-by]

Yes

[wvhulle]

Would you mind sharing whether you use NginX and the setup? Thanks!

…

On Tue, 18 Oct 2022, 17:12 repsac, ***@***.***> wrote: Yes — Reply to this email directly, view it on GitHub <#7294 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AB2VD2BKJE6Q5WOKOWD7ISTWD247DANCNFSM6AAAAAARHHKVSI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[repsac-by]

nginx

map $http_upgrade $connection_upgrade {
        default upgrade;
        ''      $http_connection;
}

map $http_origin $origin {
	default               $http_origin;
	"~*^https://(.*)$"    "http://$1";
}

server {
	listen    *:80 default_server;
	listen [::]:80 default_server;

	location / {
		return 301 https://$host$request_uri;
	}
}

server {
	server_name <name>.localhost;

	listen    *:443 ssl http2;
	listen [::]:443 ssl http2;

	ssl_certificate cert.pem;
	ssl_certificate_key key.pem;

	proxy_http_version 1.1;
	proxy_set_header Host $http_host;
	proxy_set_header Origin $origin;
	proxy_set_header Upgrade $http_upgrade;
	proxy_set_header Connection $connection_upgrade;

	location / {
		proxy_pass http://localhost:<port>;
		error_page 502 = @disconnect;
	}

	location @disconnect {
		return 444;
	}
}