Petite astuce Utiliser un proxy PHP pour charger des ressources dans Flash

Donc, vous venez de créer une application Flash géniale qui charge des images et du XML à partir d'un autre domaine. Lorsque vous le testez à partir de l'IDE, cela fonctionne parfaitement, mais lorsque vous le mettez en ligne, vous obtenez l'une de ces erreurs de violation de sandbox de sécurité redoutées. Que faire?

Dans cette astuce, je vais vous montrer comment créer un proxy PHP simple pour charger des images et du XML de n'importe où, sans erreur.!

Nuages ​​isolés (utilisés dans l'icône de la vue avant) par vibes35 disponible sur GraphicRiver.


Étape 1: Comprendre le problème

Le lecteur Flash dispose de plusieurs types de sandbox de sécurité: éloigné, système local avec système de fichiers, local avec réseau, et confiance locale. Chacune a son propre ensemble de règles et Flash Player détermine le type de sandbox à attribuer à l'ouverture du fichier SWF. Lorsqu'un fichier est en cours de développement, l'EDI affecte automatiquement un type de sandbox approuvé. C’est pourquoi, lors de la création et du test de votre projet, tout fonctionnera correctement, mais il se brisera une fois publié sur le Web..

Ces règles de sécurité du sandbox sont mises en place pour empêcher les pirates et les malfaiteurs d'accéder à des données auxquelles ils ne devraient probablement pas avoir accès. Pour résoudre ce problème pour nos propres utilisations [légales], nous utilisons l’aide d’un fichier PHP..

Ci-dessous, nous essayons de charger une image et de convertir le contenu du chargeur sous forme de bitmap, sans aucune aide extérieure. Si le domaine cible ne contient pas de fichier crossdomain.xml nous donnant l'autorisation (la plupart des sites ne donnent pas d'autorisations anonymes), nous obtiendrons une erreur..

Voir? Ça ne marche pas du tout. Voici le code qui l'alimente:

 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, nouveau LoaderContext (true));  function loadComplete (e: Event): void try var img: Bitmap = new Bitmap (); img = loader.content en tant que Bitmap; // Voici où l'erreur s'est produite catch (error: Error) txt_status.text = error.message.toString (); 

Étape 2: Comprendre la solution

PHP! PHP n'a pas les mêmes restrictions que Flash car c'est un langage de script côté serveur, contrairement à Flash, qui est une technologie côté client. Cela nous permet de l'utiliser comme "intermédiaire" pour renvoyer du contenu sur notre domaine. Le fichier PHP apparaîtra au lecteur Flash comme étant le type de fichier que nous retournons. Puisque le fichier PHP renvoie des données à notre domaine, nous pouvons charger le contenu que nous voulons tout en respectant les règles de sécurité de Flash Player… schweet!!

Bien que PHP couvre la récupération des données, nous aurons également besoin d'un fichier de règles inter-domaines. Nous allons le faire d'abord pour le sortir de la route.


Étape 3: implémenter un fichier de stratégie inter-domaines

Si vous ne le savez pas déjà, un fichier de stratégie inter-domaines est un fichier XML qui indique en gros au client demandeur "oui, vous pouvez lire le contenu de mon domaine" ou "non, ne touchez pas à mes données!".

(Plus d'informations dans cette astuce.) Voici quelques exemples concrets:

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

Le premier permet toutes les demandes d’un sous-domaine Yahoo tel que movies.yahoo.com. Le second est le même, sauf qu'il autorise également les demandes de tout sous-domaine maps.yahooapis.com et de yui.yahooapis.com. Le troisième exemple est intéressant car il accorde un accès en lecture à n’importe quel domaine en utilisant le caractère générique *..

Maintenant que nous savons à quoi ils ressemblent, créons notre propre. Nous en aurons besoin pour dire au lecteur Flash qu'il est correct de lire les données de notre propre domaine..

Créez un nouveau fichier XML à la racine de votre site Web et nommez-le "crossdomain.xml". Une fois que vous avez fait cela, copiez simplement le code XML ci-dessous et remplacez "www.votredomainehere.com" par votre propre nom de domaine..

      

Cela accorde une autorisation de lecture aux demandes provenant de votre domaine et de ses sous-domaines. Encore une fois, ce fichier doit résider dans votre racine du site.


Étape 4: Passons au code!

Créons une fondation pour notre proxy PHP. Nous enverrons le chemin du fichier auquel nous voulons accéder via la méthode GET, à partir de Flash. Créez un dossier nommé "LoaderTest" à la racine de votre site Web et créez un nouveau fichier PHP dans ce dossier nommé "proxy.php". Ajoutez le code suivant au fichier PHP:

 

Ce que notre code fait jusqu'ici:

  1. Définit une variable appelée $ filename égale à la url variable dans notre chaîne de requête
  2. Ajoute la déclaration de type de contenu "text / xml" à l'en-tête de notre fichier
  3. Lit les données brutes du fichier que nous avons demandé

N'est-ce pas remarquablement simple? Puisque nous avons ajouté "text / xml" comme type de contenu à l'en-tête, notre proxy.php rendra les données au format xml. Testons-le.

Dans votre barre d'adresse, accédez au fichier proxy.php que vous avez créé sur votre site Web et après "/proxy.php", ajoutez "? Url = http: //feeds.feedburner.com/flashtuts-summary". L'URL complète devrait ressembler à ceci:

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

Si vous avez tout fait correctement jusqu'à présent, vous devriez regarder un flux RSS Activetuts +!


Étape 5: Ajout de fonctionnalités supplémentaires

Puisque nous voulons que notre fichier proxy.php retourne plus que du texte, nous devrons ajouter quelque chose. Afin de renvoyer le type d’en-tête correct, nous allons demander au proxy de récupérer les informations d’extension de fichier à l’aide de la commande pathinfo () fonction et définir cet égal à une variable appelée $ ext. Après cela, nous pouvons évaluer l’extension du fichier et décider du chemin d’action correct pour ce type de fichier. Pour l'évaluation, nous utiliserons une instruction switch.

Nous souhaitons uniquement renvoyer des images et du texte. J'ai donc ajouté quelques types d'image généraux à notre instruction switch. Dans le cas de l'extension de fichier "jpg", la première étape consiste à ajouter l'attribut de type de contenu correct appartenant à ce type de fichier. Après cela, les données du fichier sont lues. Les cas "gif" et "png" ont une fonctionnalité identique.

Puisque nous voulons retourner des images et texte, nous devrons travailler dans une boîte pour retourner ce texte. Le problème est que le texte tel que flux rss, XML, etc. peut ne pas toujours avoir une extension de fichier comme le font les images. Et si elles sont générées dynamiquement? Si nous cherchions une extension de fichier concrète, nous pourrions facilement nous tromper dans le cas de XML dynamique et cela ne renverrait pas correctement les informations. La solution consiste simplement à insérer notre code original pour renvoyer text / xml (à l’étape précédente) dans défaut Cas! Comme tout ce que nous essayons de renvoyer aura une extension de fichier connue, si aucune extension de fichier n'est trouvée, nous pouvons supposer que nous essayons de renvoyer un type text / xml.

 

Étape 6: Tester le proxy terminé

Bien! Le moment de vérité… le temps de test. Vous pouvez essayer de charger les images de votre choix à partir du Web, mais nous essaierons de charger la même image qu'auparavant, à l'étape 1. Voici à nouveau le format:

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

Et bien sûr, vous devrez remplacer www.example.com avec votre domaine. Vous devriez voir le résultat suivant:

En outre, vous remarquerez que vous ne pouvez pas afficher la source de cette page. Comme je l'ai mentionné plus tôt, PHP est un langage de script côté serveur, nous ne pouvons donc pas le voir comme du HTML. Nous ne voyons que les données lues par le code PHP. Voici comment nous obtenons le contenu dans Flash… nous chargeons la page PHP comme tout autre fichier.!


Étape 7: Importation des données dans Flash

Vous trouverez ci-dessous un exemple de code simple expliquant comment importer les données en flash à l’aide du 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, nouveau LoaderContext (true)); function loadComplete (e: Event): void var img: Bitmap = new Bitmap (); img = loader.content en tant que Bitmap; img.smoothing = true; addChild (img); 

Étape 8: Quelques notes

Bien qu'il soit possible de charger des images à partir de domaines distants sans utiliser de proxy, c'est lorsque vous tentez d'accéder directement au contenu chargé en flash que vous obtenez les erreurs de sandbox de sécurité. J'ai vu des applications Flash qui ajoutent simplement le chargeur à la scène, et cela fonctionne. Cependant, si vous n'êtes pas autorisé à accéder aux données du fichier, vous perdez beaucoup d'options pour le manipuler..

Si vous souhaitez avoir un contrôle total sur le contenu que vous chargez dans Flash à partir de sources extérieures (sans fichier de stratégie inter-domaines ouvert), vous devez utiliser une sorte de proxy. Même quelque chose comme appliquer le lissage à une image chargée nécessite un accès au contenu du chargeur.


Conclusion

Donc c'est tout ce qu'il y a à faire! J'espère que cela vous aidera beaucoup à éviter de nombreux maux de tête à l'avenir! Merci d'avoir visionné!


Lecture suggérée

  • Astuce: utiliser Google App Engine en tant que serveur proxy
  • Astuce: Guide sur les fichiers de stratégie inter-domaines