javascript & php per monitorare download.

[SuperStep]

salve, ho provato a scrivere su big G le varie parole chiave, ma i risultati mi portano a scaricare browser con Javascript (LoL).

Quello che volevo fare era monitorare i download di file che venivano scelti sulla mia pagina web, lato browser.

In particolare mi interessava accedere ad informazioni quali:
- il progresso di download (dimensione scaricata, dimensione da scaricare).
- poter manipolare il path di destinazione lato client (magari utilizzando anche le finestre di sistema per il path del file).
- altre generiche.

ovviamente mi interessano per legarli ad alcuni servizi come salvare un feedback di download.

inoltre mi domandavo se fosse possibile monitorare anche da php il download di un file, del tipo:
- consentire / negare la possibilità di scaricare quel determinato file.
- altre generiche.

è possibile?

se si con che keyword posso accedere ai manuali?

[Zoff]

Per poter controllare i download lato server devi proteggere tutti i file e permettere l'accesso solo tramite un tuo script downloader.
Una volta fatto questo puoi gestire chi può scaricare i file e tenere traccia di tutto.

Il download lato client invece è difficilmente controllabile, una volta iniziato il download di un file il controllo viene spostato al browser (giustamente) e a quel punto sono il browser e la usa interazione con l'utente a determinare il tutto.
Non sia mai che uno script possa decidere cosa, dove e quando scaricare e salvare sul pc senza l'esplicita autorizzazione dell'utente, sarebbe la fiera del malware.
Per avere un controllo come quello che chiedi servirebbe una applet java o una applicazione flash che va tramite socket a scaricare il file dal server e poi gestisce il salvataggio su disco.
Ma per fare questo devono essere applicazioni firmate e il browser gli deve concedere i permessi per farlo.
Inoltre in un ottica html5 applet e flash sono deprecati, giusto appunto applet e flash sono le due maggiori fonti di infezioni malware.

[SuperStep]

mhhh, molto interessante.

per quanto riguarda lo script che permette l'accesso al downloader, potresti approfondire?

invece per quanto riguarda il controllo passato al browser, da li in poi mi confermi che non è nemmeno più possibile monitorare lo stato del download?
cioè non posso sapere a che percentuale di download sta?

Grazie mille.

[Zoff]

per quanto riguarda lo script che permette l'accesso al downloader, potresti approfondire?

Si tratterebbe di uno script che va fisicamente a leggere il file da uno spazio del filesystem non raggiungibile tramite webserver e lo butta in output.

Il piu' stupido che mi viene in mente sarebbe:

Codice: Seleziona tutto

<?php

function fileNotFound(){
     header('HTTP/1.0 404 Not Found');
     echo "<h1>404 Not Found</h1>The page that you have requested could not be found.";
     exit;
}

if( !isset($_GET['file']) ){
    fileNotFound();
}

$file = basename($_GET['file']);
$folder = '/private/file_folder/';

if( !file_exists( $folder . $file ) ){
    fileNotFound();
}

echo file_get_contents( $folder . $file );

invece per quanto riguarda il controllo passato al browser, da li in poi mi confermi che non è nemmeno più possibile monitorare lo stato del download?
cioè non posso sapere a che percentuale di download sta?

In linea di massima direi di no, mi è venuta in mente un'idea se si concretizza ti aggiorno.

[Zoff]

Ok come pensavo in realtà qualcosa si riesce a fare ma con grosse limitazioni.

La versione 2 di XmlHttpRequest (supportata da gran parte dei browser odierni, forse anche IE10) mette a disposizione un evento "progress" per il download e l'upload delle richieste AJAX.
Ipotizzando che la variabile xhr contenga un oggetto XmlHttpRequest è possibile registrare un handler per i due eventi in questa maniera:

Codice: Seleziona tutto

//Download
xhr.addEventListener( 'progress', handlerFunction, false);
//Upload
xhr.upload.addEventListener( 'progress', handlerFunction, false);

L'evento passato a questi handler mette a disposizione due cambi che sono loaded (numero di byte scaricati) e total (numero di byte complessivi da scaricare).

Con questo però hai fatto solo il 50% del lavoro perché devi anche scrivere il file nel filesystem.
Le Filesystem API di html5 sono supportate solo da webkit (Chrome/Safari/Opera) e in maniera sperimentale anche perché le API stesse non sono stabili.
Affidarsi a queste non è il massimo.

L'alternativa sarebbe memorizzare il file in ram e poi dire al browser di "scaricarlo" quando lo scaricamento reale è terminato.
Questo approccio pone il problema della dimensione del file.
Per file di piccole dimensioni si può "fregare" il browser impostando nell'attributo href di un link il base64 del file scaricato e simulando il click.

Se riesco ti metto giù un POC.

[Zoff]

Ecco il POC:

Codice: Seleziona tutto

<!DOCTYPE html>
<html>

<head>
    <title>Ajax downloader POC</title>
    <meta charset="utf-8">
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
	<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>
	<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="panel panel-primary">
			<div class="panel-heading"><h2>POC - Ajax downloader</h2></div>
			<div class="panel-body">
				<a href="#" download="test.zip" class="btn btn-success" id="linkStart">Start</a>
				<div class="well">
					<label>Progress:</label>
					<div class="progress progress-striped">
						<div id="progressBar" class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
							<span class="sr-only">0% Complete</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		(function addXhrProgressEvent($) {
			var originalXhr = $.ajaxSettings.xhr;
			$.ajaxSetup({
				xhr: function() {
					var req = originalXhr(), that = this;
					if (req) {
						if (typeof req.addEventListener == "function" && that.progress !== undefined) {
							req.addEventListener("progress", function(evt) {
								that.progress(evt);
							}, false);
						}
						if (typeof req.upload == "object" && that.progressUpload !== undefined) {
							req.upload.addEventListener("progress", function(evt) {
								that.progressUpload(evt);
							}, false);
						}
					}
					return req;
				}
			});
		})(jQuery);
		
		function base64Encode(str) {
			var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
			var out = "", i = 0, len = str.length, c1, c2, c3;
			while (i < len) {
				c1 = str.charCodeAt(i++) & 0xff;
				if (i == len) {
					out += CHARS.charAt(c1 >> 2);
					out += CHARS.charAt((c1 & 0x3) << 4);
					out += "==";
					break;
				}
				c2 = str.charCodeAt(i++);
				if (i == len) {
					out += CHARS.charAt(c1 >> 2);
					out += CHARS.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
					out += CHARS.charAt((c2 & 0xF) << 2);
					out += "=";
					break;
				}
				c3 = str.charCodeAt(i++);
				out += CHARS.charAt(c1 >> 2);
				out += CHARS.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
				out += CHARS.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
				out += CHARS.charAt(c3 & 0x3F);
			}
			return out;
		}
		
		$('#linkStart').click(function(e){
			var interval;
			var $this = $(this);
			var xhr = $.ajax({
				url: 'test.zip',
				//~ async: false,
				progress: function(e){
					var v = parseInt(e.loaded/e.total*100);
					console.log(v);
					$('#progressBar').parent().addClass('active');
					$('#progressBar').attr('aria-valuenow',v)
									 .width(v+'%')
									 .find('span').text(v+'%');
				},
				success: function(fileData){
					$('#progressBar').parent().removeClass('active');
					var b64 = base64Encode(fileData);
					window.open('data:application/zip;base64,'+b64,'test.zip');
				},
			});
		});
	</script>
</body>
</html>

Richiede un file test.zip nella stessa cartella. Usa un file piccolo ~1MB.
Vedrai che funziona ma anche solo con 1MB senza poter usare il filesystem come buffer sarà lento.

[SuperStep]

Zoff, sono appena tornato a casa, sei un grande. domani appena mi sveglio provo subito il tuo codice. Veramente, ti stimo.

[SuperStep]

per quanto riguarda lo script che permette l'accesso al downloader, potresti approfondire?

Si tratterebbe di uno script che va fisicamente a leggere il file da uno spazio del filesystem non raggiungibile tramite webserver e lo butta in output.

Il piu' stupido che mi viene in mente sarebbe:

Codice: Seleziona tutto

<?php

function fileNotFound(){
     header('HTTP/1.0 404 Not Found');
     echo "<h1>404 Not Found</h1>The page that you have requested could not be found.";
     exit;
}

if( !isset($_GET['file']) ){
    fileNotFound();
}

$file = basename($_GET['file']);
$folder = '/private/file_folder/';

if( !file_exists( $folder . $file ) ){
    fileNotFound();
}

echo file_get_contents( $folder . $file );

invece per quanto riguarda il controllo passato al browser, da li in poi mi confermi che non è nemmeno più possibile monitorare lo stato del download?
cioè non posso sapere a che percentuale di download sta?

In linea di massima direi di no, mi è venuta in mente un'idea se si concretizza ti aggiorno.

ho trovato un secondo modo per permettere di scaricare un file da php, modificando gli header, in questo modo:

Codice: Seleziona tutto

    $file = "/path/completo/del/file.txt";
    header("Cache-Control: public");
    header("Content-Description: File Transfer");
    header("Content-Disposition: attachment; filename= " .  $nomefile.$estensione);
    header("Content-Transfer-Encoding: binary");
    readfile($file);

in questo modo si avvia il download del file; non mi resta che scrivere una classe che gestisca questo modo ed ho fatto =)

poi sarà ora di passare al lato client =(

vabbè piano piano, appena ho finito provo il codice lato client che mi hai passato; grazie mille zoff.