Sfat rapid Folosirea unui proxy PHP pentru a încărca active în Flash

Deci, tocmai ați creat o aplicație minunată Flash care încarcă imagini și xml dintr-un alt domeniu. Când îl testați din IDE funcționează perfect, dar atunci când o puneți online, veți obține una dintre aceste erori de încălcare a securității sandbox-ului. Ce sa fac?

În acest sfat rapid, vă voi arăta cum să creați un simplu proxy PHP pentru a încărca imagini și xml de oriunde, fără erori!

Nori izolați (utilizați în pictograma perview) de vibes35 disponibil pe GraphicRiver.


Pasul 1: Înțelegerea problemei

Playerul Flash are câteva tipuri diferite de securitate: la distanta, locale cu sistem de fișiere, locale cu rețele-, și locală de încredere. Fiecare dintre ele are un set propriu de reguli și playerul Flash determină care dintre tipurile de sandbox-uri să le atribui când SWF este deschis. Când un fișier este în curs de dezvoltare, IDE atribuie automat un tip de nisip de încredere. Acesta este motivul pentru care atunci când creați și testați proiectul dvs., acesta va funcționa bine, totuși se rupe atunci când este publicat pe web.

Aceste reguli de securitate ale sandbox-urilor sunt puse în aplicare pentru a împiedica hackerii și răufăcătorii să acceseze date pe care probabil că nu ar trebui să le acceseze. Pentru a obține acest lucru pentru propriile noastre [juridice] utilizări, folosim ajutorul unui fișier PHP.

Mai jos, încercăm să încărcăm o imagine și să aruncăm conținutul în Loader ca bitmap, fără niciun ajutor extern. Dacă domeniul vizat nu are un fișier crossdomain.xml care ne dă permisiunea (majoritatea site-urilor nu dau permisiuni anonime), atunci vom primi o eroare.

Vedea? Nu funcționează deloc. Iată codul care o alimentează:

 import flash.display.Loader; import flash.net.URLRequest; importul flash.events.Event; importul flash.events.MouseEvent; import flash.system.LoaderContext; import flash.system.Security; var încărcător: încărcător; var req: URLRequest; btn_load.addEventListener (MouseEvent.CLICK, loadImage); funcția loadImage (e: MouseEvent): void txt_status.text = ""; req = noua adresă URLRequest (imgPath.text); încărcător = încărcător nou (); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, loadComplete); loader.load (req, noul LoaderContext (true));  funcția loadComplete (e: Event): void try var img: Bitmap = nou Bitmap (); img = loader.content ca bitmap; // Aici apare eroarea catch (error: Error) txt_status.text = error.message.toString (); 

Pasul 2: Înțelegerea soluției

PHP! PHP nu are aceleași restricții ca și Flash, deoarece este o limbă de scripting pe partea de server - spre deosebire de Flash, care este o tehnologie bazată pe client. Acest lucru ne permite să-l folosim ca un "om de mijloc" pentru a returna conținutul domeniului nostru. Fișierul PHP va apărea în playerul Flash ca fiind orice tip de fișier pe care îl întoarcem. Deoarece fișierul PHP returnează date domeniului nostru, putem încărca conținutul pe care îl dorim, respectând încă regulile de securitate ale playerului Flash ... schweet!!

Chiar dacă PHP acoperă recuperarea datelor, vom avea nevoie, de asemenea, de un fișier de politică între domenii. Vom face mai întâi să o scoatem din cale.


Pasul 3: Implementarea unui fișier de politică cross-domain

Dacă nu știți deja, un fișier de politică cu domenii intermediare este un fișier XML care spune clientului solicitant, "da, puteți citi conținutul domeniului meu" sau "nu, nu atingeți lucrurile mele!"

(Mai multe informații în acest sfat rapid.) Iată câteva exemple din lumea reală:

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

Primul permite orice solicitări de la un subdomeniu yahoo, cum ar fi movies.yahoo.com. Al doilea este același, cu excepția faptului că permite, de asemenea, solicitări de la orice subdomeniu maps.yahooapis.com și yui.yahooapis.com. Cel de-al treilea exemplu este interesant, deoarece permite accesul citit la orice domeniu folosind * wildcard.

Acum, când știm cum arată, să ne creăm propriul nostru. Vom avea nevoie să spună jucatorului Flash că este în regulă să citească date din propriul domeniu.

Creați un nou fișier xml în rădăcina site-ului dvs. web și denumiți-l "crossdomain.xml". Odată ce ați făcut acest lucru, copiați codul xml de mai jos și înlocuiți "www.yourdomainhere.com" cu propriul nume de domeniu.

      

Aceasta acordă permisiunea de citire pentru solicitările venite din domeniul dvs. și subdomeniile acestuia. Încă o dată, acest fișier ar trebui să se afle în dvs. rădăcină de site.


Pasul 4: Porniți la Cod!

Să creăm o bază pentru Proxy-ul nostru PHP. Vom trimite calea fișierului pe care dorim să îl accesăm prin metoda GET, din Flash. Creați un folder numit "LoaderTest" în rădăcina site-ului dvs. web și creați un nou fișier PHP în acel folder numit "proxy.php". Adăugați următorul cod în fișierul PHP:

 

Ce face codul nostru până acum:

  1. Setează o variabilă numită $ filename egal cu URL-ul variabilă în șirul de interogare
  2. Adăugă declarația de tip "text / xml" de conținut în antetul fișierului nostru
  3. Citește datele brute ale fișierului pe care l-am solicitat

Nu este remarcabil de simplu? Deoarece am adăugat "text / xml" ca tip de conținut în antet, proxy.php va afișa datele ca xml. Hai să încercăm.

În bara de adrese, navigați la fișierul proxy.php pe care l-ați creat pe site-ul dvs. Web și după "/proxy.php" adăugați "? Url = http: //feeds.feedburner.com/flashtuts-summary". Întregul URL ar trebui să pară similar cu acesta:

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

Dacă ați făcut totul corect în acest moment, ar trebui să vă uitați la un feed Activetuts + RSS!


Pasul 5: Adăugarea de funcționalități suplimentare

Deoarece vrem ca fișierul nostru proxy.php să se întoarcă mai mult decât textul, va trebui să adăugăm la acesta. Pentru a returna tipul corect de antet, vom face ca proxy-ul să preia informațiile despre extensia fișierului utilizând PathInfo () funcția și setul care este egal cu o variabilă numită $ ext. După aceasta, putem evalua extensia de fișier și putem decide calea de acțiune corectă pentru tipul de fișier respectiv. Pentru evaluare, vom folosi o declarație de comutare.

Vrem doar să returnez imagini și text, așa că am adăugat câteva tipuri de imagini generale în instrucțiunea noastră de comutare. În cazul extensiei de fișiere "jpg", primul pas este adăugarea atributului de tip de conținut corect referitor la tipul respectiv de fișier. După aceasta, datele din fișier sunt citite. Cazurile "gif" și "png" conțin funcții identice.

De vreme ce vrem să întoarcem imagini și text, va trebui să lucrăm într-un caz pentru returnarea acelui text. Problema este că textul, cum ar fi rss feeds, xml etc., ar putea să nu aibă întotdeauna o extensie de fișier ca imaginile. Ce se întâmplă dacă acestea sunt generate dinamic? Dacă ar fi să căutăm o extensie de fișier concret, atunci am putea greși cu ușurință în cazul unui xml dinamic și nu ar returna corect informațiile. Soluția este doar să afișăm codul original pentru returnarea textului / xml (în pasul anterior) în Mod implicit caz! Deoarece tot ceea ce încercăm să ne întoarcem va avea o extensie de fișier cunoscută, dacă nu se găsește o extensie de fișier, atunci putem presupune că încercăm să întoarcem un tip text / xml.

 

Pasul 6: Testați proxy-ul completat

În regulă! Momentul adevărului ... timpul testului. Puteți încerca să încărcați orice imagini pe care doriți să le faceți de pe web, dar vom încerca să încărăm aceeași imagine ca înainte, în pasul 1. Iată formatul din nou:

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

Și, desigur, va trebui să le înlocuiți www.example.com cu domeniul dvs. Ar trebui să vedeți următorul rezultat:

De asemenea, ceva interesant pe care îl veți observa este că nu puteți vedea sursa acestei pagini. Așa cum am menționat mai devreme, PHP este o limbă de scripting de la server, deci nu o putem vedea ca html. Tot ce vedem sunt datele care au fost citite de codul PHP. Acesta este modul în care obținem conținutul în Flash ... încărcăm pagina PHP la fel ca orice alt fișier!


Pasul 7: Aducerea datelor în Flash

Mai jos este un exemplu de cod simplu pentru a aduce datele în bliț utilizând proxy-ul.

 import flash.display.Loader; import flash.net.URLRequest; importul flash.events.Event; import flash.system.LoaderContext; var încărcător: încărcător; var req: URLRequest; var proxy: String = "http://www.YOUR-WEBSITE-HERE.COM/LoaderTest/proxy.php?url="; req = noua adresă URLRequest (proxy + "http://s3.envato.com/files/358820.jpg"); încărcător = încărcător nou (); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, loadComplete); loader.load (req, noul LoaderContext (true)); funcția loadComplete (e: Eveniment): void var img: Bitmap = Bitmap nou (); img = loader.content ca bitmap; img.smoothing = true; addChild (img); 

Pasul 8: Unele note

În timp ce este posibilă încărcarea imaginilor din domeniile de la distanță fără utilizarea unui proxy, atunci când încercați să accesați direct conținutul încărcat în flash, veți primi erorile de securitate ale casetei de securitate. Am văzut aplicații Flash care doar adaugă încărcătorul pe scenă și funcționează; cu toate acestea, dacă nu aveți permisiunea de a accesa datele fișierelor, veți pierde multe opțiuni pentru a le manipula.

Dacă doriți să aveți un control total asupra conținutului pe care îl încărcați în Flash din surse externe (care nu au un fișier de politică deschisă pe mai multe domenii), va trebui să utilizați un fel de proxy. Chiar și ceva ca aplicarea netezii unei imagini încărcate necesită acces la conținutul încărcătorului.


Concluzie

Deci, asta e totul! Sper că acest lucru îi ajută pe mulți să evitați multe dureri de cap în viitor! Multumesc pentru vizualizare!


Sugestii de lectură

  • Sfat rapid: utilizând Google App Engine ca server proxy
  • Sfat rapid: Un ghid pentru fișierele de politică Cross Domain
Cod