Suggerimento rapido utilizzo di un proxy PHP per caricare asset in Flash

Quindi, hai appena creato un'app impressionante Flash che carica immagini e xml da un altro dominio. Quando lo provi dall'IDE funziona perfettamente, ma quando lo metti online, ottieni uno di quegli errori di violazione della sandbox di sicurezza temuti. Cosa fare?

In questo suggerimento rapido, ti mostrerò come creare un semplice proxy PHP per caricare immagini e xml da qualsiasi luogo, senza errori!

Nuvole isolate (utilizzate nell'icona di perview) di vibes35 disponibili su GraphicRiver.


Passo 1: Capire il problema

Flash Player ha alcuni tipi di sandbox di sicurezza diversi: a distanza, locale con file system, locale con collegamento in rete, e locale affidabile. Ognuno ha il proprio set di regole e il player Flash determina quale dei tipi di sandbox assegnare quando viene aperto il file SWF. Quando un file è in sviluppo, l'IDE assegna automaticamente un tipo di sandbox affidabile. Questo è il motivo per cui durante la creazione e il test del progetto, funzionerà correttamente, ma si interrompe quando viene pubblicato sul Web.

Queste regole di sicurezza sandbox sono messe in atto per impedire a hacker e malfattori di accedere a dati a cui probabilmente non dovrebbero accedere. Per ottenere da questo per i nostri usi [legali], impieghiamo l'aiuto di un file PHP.

Di seguito, proviamo a caricare un'immagine e a trasmettere il contenuto all'interno del Loader come bitmap, senza alcun aiuto esterno. Se il dominio di destinazione non ha un file crossdomain.xml che ci autorizza (la maggior parte dei siti non concede autorizzazioni anonime), verrà visualizzato un errore.

Vedere? Non funziona affatto. Ecco il codice che lo alimenta:

 import flash.display.Loader; import flash.net.URLRequest; import flash.events.Event; import flash.events.MouseEvent; import flash.system.LoaderContext; import flash.system.Security; var loader: Loader; var req: URLRequest; btn_load.addEventListener (MouseEvent.CLICK, loadImage); function loadImage (e: MouseEvent): void txt_status.text = ""; req = new URLRequest (imgPath.text); loader = new Loader (); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, loadComplete); loader.load (req, new LoaderContext (true));  function loadComplete (e: Event): void try var img: Bitmap = new Bitmap (); img = loader.content come Bitmap; // Ecco dove si verifica l'errore catch (errore: errore) txt_status.text = error.message.toString (); 

Passo 2: Capire la soluzione

PHP! PHP non ha le stesse restrizioni di Flash perché è un linguaggio di scripting lato server, a differenza di Flash, che è una tecnologia lato client. Questo ci consente di usarlo come "intermediario" per restituire il contenuto al nostro dominio. Il file PHP apparirà al lettore Flash come qualsiasi tipo di file che stiamo restituendo. Poiché il file PHP restituisce i dati al nostro dominio, possiamo caricare i contenuti che vogliamo mantenendo le regole di sicurezza del Flash Player ... schweet!!

Anche se PHP copre il recupero dei dati, avremo anche bisogno di un file di criteri tra domini. Lo faremo prima per toglierlo di mezzo.


Passaggio 3: implementazione di un file dei criteri di dominio incrociato

Se non lo sai già, un file di criteri interdominio è un file XML che in pratica dice al cliente richiedente, "sì, puoi leggere il contenuto del mio dominio" o "no, non toccare le mie cose!"

(Maggiori informazioni in questo suggerimento rapido.) Ecco alcuni esempi del mondo reale:

  • http://www.yahoo.com/crossdomain.xml
  • http://developer.yahoo.com/crossdomain.xml
  • http://pipes.yahooapis.com/crossdomain.xml

Il primo consente qualsiasi richiesta da un sottodominio yahoo come movies.yahoo.com. Il secondo è lo stesso, tranne che consente anche richieste da qualsiasi sottodominio maps.yahooapis.com e yui.yahooapis.com. Il terzo esempio è interessante perché garantisce l'accesso in lettura a qualsiasi dominio usando il carattere jolly *.

Ora che sappiamo come sono, creiamo il nostro. Avremo bisogno che comunichi al lettore Flash che è possibile leggere i dati dal nostro dominio.

Crea un nuovo file xml nella radice del tuo sito web e chiamalo "crossdomain.xml". Dopo averlo fatto, copia il codice xml qui sotto e sostituisci "www.yourdomainhere.com" con il tuo nome di dominio.

      

Ciò garantisce il permesso di leggere le richieste provenienti dal tuo dominio e dai suoi sottodomini. Ancora una volta, questo file dovrebbe risiedere nel tuo radice del sito Web.


Passaggio 4: al codice!

Creiamo una base per il nostro PHP Proxy. Invieremo il percorso del file a cui vogliamo accedere tramite il metodo GET, da Flash. Crea una cartella denominata "LoaderTest" nella radice del tuo sito web e crea un nuovo file PHP in quella cartella denominata "proxy.php". Aggiungi il seguente codice al file PHP:

 

Cosa fa il nostro codice finora:

  1. Imposta una variabile chiamata $ filename uguale al url variabile nella nostra querystring
  2. Aggiunge la dichiarazione del tipo di contenuto "text / xml" all'intestazione del nostro file
  3. Legge i dati grezzi del file che abbiamo richiesto

Non è molto semplice? Dato che abbiamo aggiunto "text / xml" come tipo di contenuto all'intestazione, il nostro proxy.php renderà i dati come xml. Proviamoci.

Nella barra degli indirizzi, vai al file proxy.php che hai creato sul tuo sito web, e dopo "/proxy.php" aggiungi "? Url = http: //feeds.feedburner.com/flashtuts-summary". L'intero URL dovrebbe essere simile a questo:

"Http://www.example.com/LoaderTest/proxy.php?http://feeds.feedburner.com/flashtuts-summary"

Se hai fatto tutto correttamente fino a questo punto, dovresti vedere un feed di Activetuts + RSS!


Passaggio 5: aggiunta di più funzionalità

Dal momento che vogliamo che il nostro file proxy.php restituisca qualcosa di più del semplice testo, dovremo aggiungerlo. Per restituire il tipo di intestazione corretto, faremo in modo che il proxy recuperi le informazioni sull'estensione del file utilizzando il comando pathinfo () funzione e imposta quella uguale a una variabile chiamata $ ext. Successivamente, possiamo valutare l'estensione del file e decidere il percorso corretto di azione per quel tipo di file. Per la valutazione, utilizzeremo una dichiarazione switch.

Vogliamo solo restituire immagini e testo, quindi ho aggiunto alcuni tipi di immagini generali alla nostra istruzione switch. Nel caso dell'estensione del file "jpg", il primo passaggio consiste nell'aggiungere l'attributo del tipo di contenuto corretto relativo a quel tipo di file. Successivamente, vengono letti i dati del file. I casi "gif" e "png" contengono funzionalità identiche.

Dal momento che vogliamo restituire le immagini e testo, avremo bisogno di lavorare in un caso per la restituzione di quel testo. Il problema è che il testo come feed RSS, xml, ecc. Potrebbe non avere sempre un'estensione di file come fanno le immagini. Cosa succede se sono generati dinamicamente? Se dovessimo cercare un'estensione di file concreta, potremmo facilmente sbagliare nel caso di xml dinamico e non restituirebbe correttamente le informazioni. La soluzione è solo di inserire il nostro codice originale per restituire testo / xml (nel passaggio precedente) nel file predefinito Astuccio! Poiché tutto il resto che stiamo cercando di restituire avrà un'estensione di file nota, se non viene trovata alcuna estensione di file, allora possiamo supporre che stiamo tentando di restituire un tipo text / xml.

 

Passaggio 6: testare il proxy completato

Tutto apposto! Il momento della verità ... tempo di prova. Puoi provare a caricare le immagini che desideri dal Web, ma proveremo a caricare la stessa immagine di prima, nel passaggio 1. Ecco di nuovo il formato:

http://www.example.com/LoaderTest/proxy.php?url=http://s3.envato.com/files/358820.jpg

E ovviamente, dovrai sostituire www.example.com con il tuo dominio. Dovresti vedere il seguente risultato:

Inoltre, qualcosa di interessante che noterai è che non puoi visualizzare la fonte di questa pagina. Come ho detto prima, PHP è un linguaggio di scripting lato server, quindi non possiamo vederlo come html. Tutto quello che stiamo vedendo sono i dati che sono stati letti dal codice PHP. Ecco come otteniamo il contenuto in Flash ... carichiamo la pagina PHP come qualsiasi altro file!


Passaggio 7: inserimento dei dati in Flash

Di seguito è riportato un semplice esempio di codice su come portare i dati in flash utilizzando il proxy.

 import flash.display.Loader; import flash.net.URLRequest; import flash.events.Event; import flash.system.LoaderContext; var loader: Loader; var req: URLRequest; var proxy: String = "http://www.YOUR-WEBSITE-HERE.COM/LoaderTest/proxy.php?url="; req = new URLRequest (proxy + "http://s3.envato.com/files/358820.jpg"); loader = new Loader (); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, loadComplete); loader.load (req, new LoaderContext (true)); function loadComplete (e: Event): void var img: Bitmap = new Bitmap (); img = loader.content come Bitmap; img.smoothing = true; addChild (img); 

Passaggio 8: alcune note

Mentre è possibile caricare immagini da domini remoti senza l'uso di un proxy, è quando si tenta di accedere direttamente a quel contenuto caricato in flash che si otterranno gli errori sandbox di sicurezza. Ho visto le app Flash che aggiungono il caricatore sul palco e funzionano; tuttavia, se non hai il permesso di accedere ai dati del file, perdi molte opzioni per manipolarlo.

Se si desidera avere il controllo totale sul contenuto caricato in Flash da fonti esterne (che non dispongono di un file di criteri di dominio incrociato aperto), sarà necessario utilizzare una sorta di proxy. Anche qualcosa come applicare il livellamento a un'immagine caricata richiede l'accesso al contenuto del caricatore.


Conclusione

Quindi questo è tutto quello che c'è da fare! Spero che questo aiuti molti di voi a evitare molti mal di testa in futuro! Grazie per la visione!


Lettura suggerita

  • Suggerimento rapido: utilizzo di Google App Engine come server proxy
  • Suggerimento rapido: una guida ai file di criteri di dominio incrociato