Come faccio a essere sicuro che un URL sia un'immagine utilizzando JavaScript + jQuery?

Question

Nella mia applicazione Web, gli utenti possono inserire testo in un feed e il testo può includere URL. Il mio codice esegue la scansione degli URL e li sostituisce quali tag di ancoraggio puntati agli URL. Voglio cambiare questo in modo che il mio codice possa rilevare se l'URL punta o meno su un'immagine, e se lo fa, esegue il rendering di un tag immagine all'interno del tag di ancoraggio, invece del solo testo dell'URL.

Posso eseguire questa operazione sul codice lato server inviando una richiesta rapida "HEAD" all'URL per vedere quale tipo di contenuto è presente nella risposta e funziona in modo affidabile. Tuttavia, non si adatta bene per ovvi motivi.

Cosa sarebbe meglio se potessi inserire questa logica nel browser del cliente. Vorrei utilizzare JavaScript + jQuery per inviare la richiesta "HEAD" all'URL specificato e leggere l'intestazione Content-Type dalla risposta.

So che le richieste tra domini sono un problema. Potrei in qualche modo usare JSONP? Che opzioni ho?

EDIT - SICUREZZA RISCHIO

ho avuto alcune buone risposte alla mia domanda, ma volevo far notare qualcosa in grandi lettere in grassetto. Come Adam ha sottolineato nei commenti, questo è un rischio per la sicurezza. Se puoi garantire che le URL delle immagini provengano tutte da domini attendibili, sei a posto con questa soluzione. Tuttavia, nel mio scenario, gli utenti possono inserire qualunque URL vogliano. Ciò significa che potrebbero creare il proprio sito che richiede l'autenticazione di base, e quindi quando jQuery viene eseguito per impostare l'attributo src sull'immagine creata, all'utente viene presentata una finestra di dialogo nome utente/password, che ovviamente è un rischio enorme.

Answer 1

Si può provare a caricarlo in un elemento img nascosta:

$('<img />').attr('src', url).load(function() { 
    alert('url contains an image'); 
}).error(function() { 
    alert('url is no image'); 
}); 

Answer 2

è sufficiente verificare se la stringa che hanno fornito termina con .jpg, .png, .gif ecc. se termina con un'estensione del genere come un'immagine. se non proprio, è un normale URL.

Answer 3

Prova questa:

Usa AJAX per caricare l'URL quindi chiamare getResponseHeader() per ottenere il tipo di contenuto.

In jQuery:

$.ajax({ 
    url: "www.example.com/SomeImage.jpg", 
    success: function(output, status, xhr) { 
    if(xhr.getResponseHeader("Content-Type")== "image/jpeg") { 
     // insert image into page 
    } 
    else { 
     // render url text 
    } 
    } 
}); 

Answer 4

È possibile ottenere le informazioni di intestazione utilizzando le chiamate Ajax utilizzando XMLHttpRequestObject.open("HEAD", url); e XMLHttpRequestObject.getAllResponseHeaders(); ma questo funziona solo con il proprio dominio o il la con Access-Control-Allow-Origin: intestazione set.

JSONP utilizza il tag script e sono abbastanza sicuro che non possa ottenere alcuna informazione di intestazione.

Answer 5

è possibile creare un oggetto JavaScript Image si provare a caricare tutti i link come questo:

myImageObject = new Image(); 

// handle an URL 
myImageObject.onload = function(e) { 
    alert('it is an image'); 
} 

myImageObject.src = 'http://www.google.bg/images/srpr/logo3w.png'; 

jsFiddle example