Hurtig Tips Bruk en PHP-proxy for å laste inn eiendeler til Flash

Så, du har nettopp opprettet en fantastisk Flash-app som laster bilder og xml fra et annet domene. Når du tester det fra IDE, fungerer det perfekt, men når du legger det på nettet, får du en av de fryktede sikkerhetssandboksbruddsfeilene. Hva å gjøre?

I denne Quick Tip, vil jeg vise deg hvordan du lager en enkel PHP-proxy for å laste bilder og xml fra hvor som helst, feilfri!

Isolerte skyer (brukt i perview-ikon) av vibes35 tilgjengelig på GraphicRiver.


Trinn 1: Forstå problemet

Flash-spilleren har noen forskjellige sikkerhetssandboks typer: fjern, lokal-med-filsystem, lokal-med-nettverk, og lokal-klarert. Hver har sitt eget sett med regler, og Flash-spilleren avgjør hvilken av sandkassetyper som skal tilordnes når SWF åpnes. Når en fil er i utvikling, tilordner IDE automatisk en pålitelig sandboxtype. Dette er grunnen til at når du oppretter og tester prosjektet ditt, fungerer det bra, men det bryter når det blir publisert på nettet.

Disse sikkerhetssandboksreglene er satt på plass for å forhindre hackere og ondskapere fra å få tilgang til data som de sannsynligvis ikke skal få tilgang til. For å få ved dette for våre egne [juridiske] bruksområder, bruker vi hjelp av en PHP-fil.

Nedenfor prøver vi å laste inn et bilde og kaste innholdet i Loader som en bitmap, uten hjelp utenfor. Hvis måldomenet ikke har en crossdomain.xml-fil som gir oss tillatelse (de fleste nettsteder gir ikke anonyme tillatelser), så får vi en feil.

Se? Det virker ikke i det hele tatt. Her er koden som driver det:

 importer flash.display.Loader; importere flash.net.URLRequest; importere flash.events.Event; importer flash.events.MouseEvent; importer flash.system.LoaderContext; importere flash.system.Security; var loader: Loader; var req: URLRequest; btn_load.addEventListener (MouseEvent.CLICK, loadImage); funksjon loadImage (e: MouseEvent): void txt_status.text = ""; req = ny URLRequest (imgPath.text); Loader = Ny Loader (); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, loadComplete); loader.load (req, ny LoaderContext (true));  funksjon loadComplete (e: Event): void try var img: Bitmap = ny Bitmap (); img = loader.content som Bitmap; // Her er hvor feilen oppstår fangst (feil: Feil) txt_status.text = error.message.toString (); 

Trinn 2: Forstå løsningen

PHP! PHP har ikke de samme begrensningene som Flash fordi det er et server-side skriptspråk - i motsetning til Flash, som er en klient-side teknologi. Dette tillater oss å bruke det som en "mellommann" for å returnere innhold til vårt domene. PHP-filen vil vises til Flash-spilleren for å være hvilken type fil vi returnerer. Siden PHP-filen returnerer data til vårt domene, kan vi laste inn innholdet vi vil ha, mens du fortsatt overholder Flash-spillernes sikkerhetsregler ... schweet!!

Selv om PHP dekker datainnhenting, trenger vi også en kryssdomenepolicyfil. Vi gjør det først for å få det ut av veien.


Trinn 3: Implementere en fil med kryssdomener

Hvis du ikke allerede vet, er en kryssdomenepolicyfil en XML-fil som i utgangspunktet forteller den forespørgende klienten, "Ja, du kan lese domenets innhold," eller "Nei, rør ikke mine ting!"

(Mer informasjon i denne raske tipsen.) Her er noen ekteeksempler:

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

Den første tillater eventuelle forespørsler fra et yahoo-underdomener, for eksempel movies.yahoo.com. Den andre er den samme, bortsett fra at den også tillater forespørsler fra noen maps.yahooapis.com sub-domene, og yui.yahooapis.com. Det tredje eksemplet er interessant fordi det gir leseadgang til et hvilket som helst domene ved å bruke * wildcard.

Nå som vi vet hvordan de ser ut, la oss lage vår egen. Vi trenger det for å fortelle Flash-spilleren at det er greit å lese data fra vårt eget domene.

Opprett en ny xml-fil i roten til nettstedet ditt, og oppgi navnet "crossdomain.xml". Når du har gjort det, kopier du bare xml-koden under og erstatter "www.yourdomainhere.com" med ditt eget domenenavn.

      

Disse tilskuddene leser tillatelse til forespørsler som kommer fra domenet ditt og dets underdomener. Igjen, denne filen skal ligge i din Nettstedrot.


Trinn 4: Gå til koden!

La oss lage et grunnlag for vår PHP-proxy. Vi sender stien til filen vi vil ha tilgang til via GET-metoden, fra Flash. Opprett en mappe med navnet "LoaderTest" i roten til nettstedet ditt, og opprett en ny PHP-fil i den mappen med navnet "proxy.php". Legg til følgende kode i PHP-filen:

 

Hva vår kode gjør så langt:

  1. Angir en variabel som heter $ filnavn lik den url variabel i vår søkestreng
  2. Legger til "tekst / xml" innholdstype deklarasjonen til overskriften til filen vår
  3. Leser ut de rå dataene til filen vi ba om

Er det ikke så enkelt? Siden vi har lagt til «tekst / xml» som innholdstype til toppteksten, vil vår proxy.php gjengi dataene som xml. La oss teste det ut.

I adressefeltet navigerer du til proxy.php-filen du opprettet på nettstedet ditt, og etter "/proxy.php" legger du til "? Url = http: //feeds.feedburner.com/flashtuts-summary". Hele nettadressen skal se ut som dette:

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

Hvis du har gjort alt riktig til dette punktet, bør du se på en Activetuts + RSS-feed!


Trinn 5: Legge til mer funksjonalitet

Siden vi vil at vår proxy.php-fil skal returnere mer enn bare tekst, må vi legge til det. For å returnere riktig header type, vil vi få proxyen hente filutvidelsesinformasjonen ved å bruke pathinfo () funksjon og sett som tilsvarer en kalt variabel $ ext. Deretter kan vi evaluere filtypen og bestemme den riktige banen for den aktuelle filtypen. For evalueringen bruker vi en bryteretning.

Vi ønsker bare å returnere bilder og tekst, så jeg har lagt til noen generelle bildetyper i vår svarserklæring. I tilfelle av filtypen "jpg" er det første trinnet å legge til det riktige innholdstypenattributtet som gjelder denne typen fil. Deretter leses dataene fra filen. "Gif" og "png" tilfellene inneholder identisk funksjonalitet.

Siden vi ønsker å returnere bilder og tekst, må vi jobbe i et tilfelle for å returnere den teksten. Problemet er at den teksten som rss feeds, xml, etc. kanskje ikke alltid har en filtillegg som bildene gjør. Hva om de blir dynamisk generert? Hvis vi skulle lete etter en konkret filtillegg, kunne vi lett få feil i tilfelle av dynamisk xml, og det ville ikke returnere informasjonen riktig. Løsningen er bare å pope vår opprinnelige kode for å returnere tekst / xml (i forrige trinn) inn i misligholde sak! Siden alt annet vi prøver å returnere, har en kjent filtillegg, hvis det ikke finnes filtypenavn, kan vi anta at vi forsøker å returnere en tekst / XML-type.

 

Trinn 6: Test den fullførte proxyen

Ok! Sanntidens øyeblikk ... testtid. Du kan prøve å laste inn noen bilder du vil ha fra nettet, men vi prøver å laste det samme bildet som før, i trinn 1. Her er formatet en gang til:

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

Og selvfølgelig må du erstatte www.example.com med domenet ditt. Du bør se følgende resultat:

Også noe interessant som du vil legge merke til er at du ikke kan se kilden til denne siden. Som nevnt tidligere, er PHP et skriptspråk på server-siden, så vi kan ikke se det som html. Alt vi ser er dataene som ble lest ut av PHP-koden. Slik får vi innholdet til Flash ... vi laster PHP-siden akkurat som alle andre filer!


Trinn 7: Ta dataene til Flash

Nedenfor er et enkelt kodeeksempel på hvordan å bringe dataene til flash ved hjelp av proxyen.

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

Trinn 8: Noen notater

Mens det er mulig å laste bilder fra eksterne domener uten bruk av en proxy, er det når du prøver å få direkte tilgang til det lastede innholdet i flash, slik at du får feil i sikkerhetssandboksen. Jeg har sett Flash-apper som bare legger til loader til scenen, og det fungerer; Men hvis du ikke har tillatelse til å få tilgang til fildataene, mister du mange alternativer for å manipulere det.

Hvis du vil ha full kontroll over innholdet du laster inn i Flash fra eksterne kilder (som ikke har en åpen kryssdomenepolicyfil), må du bruke en slags proxy. Til og med noe som å bruke utjevning til et lastet bilde krever tilgang til lasterinnholdet.


Konklusjon

Så det er alt der er til det! Jeg håper dette hjelper mange av dere, unngår mange hodepine i fremtiden! Takk for visning!


Forslag til lesing

  • Hurtig Tips: Bruke Google App Engine som proxy server
  • Rask tips: En guide til krypteringspolitikkfiler