Share
U hebt zojuist een geweldige Flash-app gemaakt die afbeeldingen en xml laadt vanuit een ander domein. Wanneer u het uit de IDE test, werkt het perfect, maar als u het online zet, krijgt u een van die gevreesde beveiligingsschrijffout-fouten. Wat te doen?
In deze snelle tip laat ik u zien hoe u een eenvoudige PHP-proxy maakt om afbeeldingen en xml overal te laden, zonder fouten!
Geïsoleerde wolken (gebruikt in perview-pictogram) door vibes35 beschikbaar op GraphicRiver.
De Flash-speler heeft een paar verschillende typen beveiligingssandboxen: afgelegen, Lokaal-met-bestandssysteem, lokaal-met-netwerk, en Lokaal-vertrouwd. Elk heeft zijn eigen set regels en de Flash-speler bepaalt welke van de sandbox-typen worden toegewezen wanneer de SWF wordt geopend. Wanneer een bestand in ontwikkeling is, wijst de IDE automatisch een vertrouwd sandbox-type toe. Dit is de reden waarom het bij het maken en testen van uw project goed werkt, maar het breekt wanneer het op internet wordt gepubliceerd.
Deze beveiligingssandboxregels worden geïmplementeerd om te voorkomen dat hackers en kwaaddoeners toegang krijgen tot gegevens die ze waarschijnlijk niet mogen gebruiken. Om dit voor ons eigen [legale] gebruik te verkrijgen, gebruiken we de hulp van een PHP-bestand.
Hieronder proberen we een afbeelding te laden en de inhoud in de Loader te plaatsen als een bitmap, zonder hulp van buitenaf. Als het doeldomein geen crossdomain.xml-bestand heeft dat ons toestemming geeft (de meeste sites geven geen anonieme rechten), krijgen we een foutmelding.
Zien? Het werkt helemaal niet. Dit is de code die het gebruikt:
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); functie loadImage (e: MouseEvent): void txt_status.text = ""; req = nieuwe URLRequest (imgPath.text); loader = new Loader (); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, loadComplete); loader.load (verplicht, nieuwe LoaderContext (true)); function loadComplete (e: Event): void try var img: Bitmap = new Bitmap (); img = loader.content als bitmap; // Hier is de fout opgetreden catch (error: Error) txt_status.text = error.message.toString ();
PHP! PHP heeft niet dezelfde beperkingen als Flash, omdat het een scriptingtaal aan de serverzijde is - in tegenstelling tot Flash, wat een client-side technologie is. Dit stelt ons in staat om het als een "middelste man" te gebruiken om inhoud naar ons domein te retourneren. Het PHP-bestand zal voor de Flash-speler verschijnen, ongeacht het type bestand dat we terugzenden. Omdat het PHP-bestand gegevens naar ons domein retourneert, kunnen we de inhoud laden die we willen, terwijl we ons houden aan de beveiligingsregels van de Flash-speler ...!!
Hoewel PHP het ophalen van gegevens afdekt, hebben we ook een bestand met interdomeinbeleid nodig. We zullen dat eerst maken om het uit de weg te ruimen.
Als u dit nog niet weet, is een bestand met interdomeinbeleid een XML-bestand dat de aanvragende client in principe vertelt: "ja, u kunt de inhoud van mijn domein lezen" of "nee, raak mijn dingen niet aan!"
(Meer informatie in deze snelle tip.) Hier zijn enkele voorbeelden uit de echte wereld:
De eerste staat alle aanvragen toe van een yahoo-subdomein zoals films.yahoo.com. De tweede is hetzelfde, behalve dat het ook aanvragen toestaat van elk subdomein van maps.yahooapis.com en yui.yahooapis.com. Het derde voorbeeld is interessant omdat het leestoegang verleent tot elk domein door het * jokerteken te gebruiken.
Nu we weten hoe ze eruit zien, laten we er zelf een maken. We hebben het nodig om de Flash-speler te vertellen dat het goed is om gegevens uit ons eigen domein te lezen.
Maak een nieuw xml-bestand in de hoofdmap van uw website en noem deze "crossdomain.xml". Zodra u dit hebt gedaan, kopieert u de onderstaande XML-code en vervangt u 'www.uwdomein.nl' door uw eigen domeinnaam.
Hiermee wordt leesrechten toegekend voor verzoeken uit uw domein en subdomeinen. Nogmaals, dit bestand zou zich moeten bevinden in jouw website root.
Laten we een basis maken voor onze PHP-proxy. We sturen het pad van het bestand dat we willen openen via de GET-methode, vanuit Flash. Maak een map met de naam "LoaderTest" in de hoofdmap van uw website en maak een nieuw PHP-bestand aan in die map met de naam "proxy.php". Voeg de volgende code toe aan het PHP-bestand:
Wat onze code tot nu toe doet:
Accentsconagua
$ filename gelijk aan de url variabele in onze querystringIs dat niet opmerkelijk eenvoudig? Omdat we "text / xml" als inhoudstype aan de header hebben toegevoegd, zullen onze gegevens door de proxy.php als XML worden weergegeven. Laten we het uittesten.
Ga in de adresbalk naar het proxy.php-bestand dat u op uw website hebt gemaakt en voeg na "/proxy.php" "? Url = http: //feeds.feedburner.com/flashtuts-summary" toe. De volledige URL zou er ongeveer zo uit moeten zien:
"Http://www.example.com/LoaderTest/proxy.php?http://feeds.feedburner.com/flashtuts-summary"
Als je alles goed hebt gedaan tot nu toe, zou je moeten kijken naar een Activetuts + RSS-feed!
Omdat we willen dat ons proxy.php-bestand meer retourneert dan alleen tekst, moeten we het toevoegen. Om het juiste kopteksttype te retourneren, laten we de proxy de bestandsextensie-informatie ophalen met behulp van de pathinfo () functie en stel dat gelijk aan een variabele genaamd $ ext. Daarna kunnen we de bestandsextensie evalueren en het juiste pad van actie voor dat bestandstype bepalen. Voor de evaluatie gebruiken we een switch-instructie.
We willen alleen afbeeldingen en tekst retourneren, daarom heb ik een aantal algemene afbeeldingstypen toegevoegd aan onze switch-instructie. In het geval van de extensie "jpg" is de eerste stap het toevoegen van het juiste kenmerk voor het inhoudstype dat bij dat type bestand hoort. Daarna worden de gegevens uit het bestand gelezen. De gevallen "gif" en "png" bevatten dezelfde functionaliteit.
Omdat we afbeeldingen willen retourneren en sms'en, moeten we werken in een zaak waarin we die tekst kunnen retourneren. Het probleem is, dat tekst zoals rss feeds, xml, etc. misschien niet altijd een extensie heeft zoals de afbeeldingen. Wat als ze dynamisch worden gegenereerd? Als we op zoek zouden gaan naar een concrete bestandsextensie, dan zouden we het gemakkelijk mis kunnen krijgen in het geval van dynamische XML en het zou de informatie niet correct teruggeven. De oplossing is gewoon om onze originele code te laten verschijnen voor het retourneren van tekst / xml (in de vorige stap) naar de standaard geval! Omdat de rest die we proberen terug te sturen een bekende extensie heeft, kunnen we aannemen dat we proberen een tekst / xml-type terug te zetten als er geen bestandsextensie wordt gevonden.
Alright! Het moment van de waarheid ... testtijd. Je kunt proberen om afbeeldingen van het web te laden, maar we proberen hetzelfde beeld als voorheen te laden in stap 1. Hier is het formaat nogmaals:
http://www.example.com/LoaderTest/proxy.php?url=http://s3.envato.com/files/358820.jpg
En natuurlijk moet je het vervangen www.example.com met uw domein. Je zou het volgende resultaat moeten zien:
Wat je ook opviel, is dat je de bron van deze pagina niet kunt zien. Zoals ik eerder al zei, is PHP een server-side scriptingtaal, zodat we het niet als html kunnen bekijken. Alles wat we zien is de data die is voorgelezen door de PHP-code. Dit is hoe we de inhoud in Flash krijgen ... we laden de PHP-pagina net als elk ander bestand!
Hieronder ziet u een eenvoudig codevoorbeeld van hoe u de gegevens naar de flits brengt met behulp van de 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 = nieuwe URLRequest (proxy + "http://s3.envato.com/files/358820.jpg"); loader = new Loader (); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, loadComplete); loader.load (verplicht, nieuwe LoaderContext (true)); functie loadComplete (e: Event): void var img: Bitmap = new Bitmap (); img = loader.content als bitmap; img.smoothing = true; addChild (img);
Hoewel het mogelijk is om afbeeldingen van externe domeinen te laden zonder het gebruik van een proxy, is het wanneer u in Flash direct toegang probeert te krijgen tot die geladen inhoud dat u de beveiligingssandboxfouten krijgt. Ik heb Flash-apps gezien die de lader gewoon aan het podium toevoegen en het werkt; Als u echter geen toestemming hebt om toegang te krijgen tot de bestandsgegevens, verliest u veel opties voor het manipuleren ervan.
Als u volledige controle wilt hebben over de inhoud die u in Flash laadt van externe bronnen (die geen open bestand met meerdere domeinen hebben), moet u een soort proxy gebruiken. Zelfs iets als het toepassen van vloeiend maken op een geladen afbeelding vereist toegang tot de inhoud van de lader.
Dus dat is alles wat er is! Ik hoop dat dit ertoe bijdraagt dat veel van jullie in de toekomst veel hoofdpijn vermijden! Bedankt voor het kijken!
