Loaderは、InteractiveObjectを継承しているので、MouseEventは受け取れるはずです。それに、Loaderにスタティックな画像(jpegやpngなど)を読み込んだ際には、LoaderにMouseEvent.CLICKのイベントリスナーを設定すれば、イベント拾えるんですよね。

これは以前、fla.la » クロススクリプティングで紹介した

ロード元swfファイルのDisplayObjectツリーと、ロードしたswfファイルのDisplayObjectツリー間のイベント伝達フロー

が関係してきます。

そこでAdobe ActionScript 3.0 * クロススクリプトを読んでみますと、以下の記述があります。

1. 親オブジェクトを所有する SWF ファイルは、ソースオブジェクトを所有する SWF ファイルのドメインを信頼するために、Security.allowDomain() メソッドを呼び出す必要があります。
2. ソースオブジェクトを所有する SWF ファイルは、親オブジェクトを所有する SWF ファイルのドメインを信頼するために、Security.allowDomain() メソッドを呼び出す必要があります。

つまり読み込んだexample.com/hoge.swfからexample.net/fugo.swfを読み込んで、イベント伝達を可能にするためには、お互いのドメインを引数にしたSecurity.allowDomain()を実行する必要があるということになります。

サンプルソース

サンプルをwonderflに上げておきました。中央付近に表示されるキャラクターにMouseEvent.CLICKイベントのリスナーを登録していますが、クリックしても反応しません。

キャプチャーフェーズ、ターゲットフェーズ、バブリングフェーズすべてのフェーズでイベントが発生していないことがポイントです。

そこで、上部にある「Security.allowDomain()」というボタンをクリックしたあとで、キャラクターをクリックすると反応することが分かると思います。

なお、http://asmple.com/work/avatar3.swfでは以下のSecurity.allowDomain()が記述してあります。

Security.allowDomain("wonderfl.net");
Security.allowDomain("swf.wonderfl.net");

AdobeのFlash Playerデベロッパーセンターにある以下の記事が参考になります。

より安全なSWF Webアプリケーション

クロススクリプティングとは

fla.la » crossdomain.xmlでも紹介した通り、Flash Playerのセキュリティに関しては、AdobeのActionScript3のドキュメントのFlash Player セキュリティに詳しく掲載されています。

ではクロススクリプティングとはどんな操作を指すのかまとめてみます。

• Loaderクラスのcontent変数を通じて、ロードしたswfファイルを参照するオブジェクトを取得する
• ロードしたswfファイル内に定義されたプロパティにアクセスする
• ロードしたswfファイル内に定義されたメソッドを実行する
• ロードしたswfファイル内に定義されたクラスを参照する
• BitmapDataクラスのdrawメソッドを通じて、ロードしたswfファイルのピクセルをBitmapDataクラスのインスタンスへコピーする
• ロード元swfファイルのDisplayObjectツリーと、ロードしたswfファイルのDisplayObjectツリー間を移動する
• ロード元swfファイルのDisplayObjectツリーと、ロードしたswfファイルのDisplayObjectツリー間のイベント伝達フロー

フローを確認

外部リソースをロードするswfを main.swf、外部リソースをresource.swfとします。

同一ドメインから外部リソースをロードする

swfのドメインをswf.example.comとすると、フローは以下のようになります。

同一ドメインのswfでクロススクリプティング

1. http://swf.exapmle.com/main.swfへアクセス
2. main.swfを受け取る
3. main.swfからhttp://swf.exapmle.com/resource.swfをロードする
4. resource.swfを受け取る
5. resource.swfに定義されている変数、メソッド、クラスにアクセスする

同一ドメイン内のswfファイルを扱う際には、簡単ですね。

別ドメインから外部リソースをロードする

main.swfからresource.swfをロードする2つの方法を紹介します。

• Loaderを使う
• URLLoaderを使う

Loaderを使う場合

外部リソースに対してクロススクリプティングを行う際には、外部リソースにおいて、ロード元のswfのドメインからのアクセスの許可が必要です。

resource.swf内では以下の記述が必要です。

Security.allowDomain("swf.example.com");

フローは以下のようになります。

別ドメインのswfでクロススクリプティング Loader

1. http://swf.exapmle.com/main.swfへアクセス
2. main.swfを受け取る
3. main.swfからhttp://other.exapmle.net/resource.swfをロードする
4. resource.swfを受け取る
5. resource.swfでSecurity.allowDomain(“swf.example.com”);を確認
6. resource.swfに定義されている変数、メソッド、クラスにアクセスする

URLLoaderを使う場合

基本的に、外部リソースに対してクロススクリプティングを行う際には、外部リソースにおいて、ロード元のswfのドメインからのアクセスの許可が必要です。

但し、URLLoaderを使い、ロードしたURLLoaderインスタンスのdataプロパティをLoaderインスタンスのloadBytesメソッドに渡す事で、外部リソースに対してクロススクリプティングが可能です。

これは、LoaderインスタンスのloadBytes()メソッドでは、ロードされた SWF ファイルが常にロード元 SWF ファイルのセキュリティドメインに配置されるためです。

その際、URLLoaderインスタンスのloadメソッドは、データのロードにあたるので、外部リソースのドメインに配置したポリシーファイルにおいてロード元のドメインが許可されている必要があります。

http://other.example.net/crossdomain.xmlの内容の一例は以下のようになります。

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<site-control permitted-cross-domain-policies="master-only"/>
<allow-access-from domain="swf.example.com" />
</cross-domain-policy>

フローは以下のようになります。

別ドメインのswfでクロススクリプティング URLLoader

1. http://swf.exapmle.com/main.swfへアクセス
2. main.swfを受け取る
3. http://other.example.net/crossdomain.xmlへアクセス
4. crossdomain.xmlを受け取る
5. main.swfからhttp://other.exapmle.net/resource.swfをロードする
6. resource.swfを受け取る
7. resource.swfに定義されている変数、メソッド、クラスにアクセスする

ロードのサンプル

ここでサンプルとして、以下のようなpublicメソッドを持つ簡易アバターを作成しました。

簡易アバターのURLは以下となります。
avatar1.swfとavatar2.swfはまったく同じ機能をもったswfですが、下記の記述はavatar2.swfにしかありません。

Security.allowDomain("fla.la");

つまり、avatar2.swfはfla.laドメインに配置されたswfからパブリックメソッドを実行出来ます。

では、LoaderとURLLoaderでこれらの簡易アバターをロードしたのち、クロススクリプティングで操作するコードを紹介します。

Loaderを使う際のサンプルコード

以下をドキュメントクラスとするswfをfla.laドメインへ配置するとします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

package  
{
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.net.URLLoader;
 
	/**
	 * 外部リソースをLoaderでロードしてからメソッドにアクセス
	 * @author naoto koshikawa
	 */
	public class CrossScript1 extends Sprite
	{
		//----------------------------------------------------------------------
		//  methods
		//----------------------------------------------------------------------
		//------------------------------
		//  public methods
		//------------------------------
		/**
		 * constructor
		 */
		public function CrossScript1() 
		{
			var avatar:*;
 
			var loader:Loader = new Loader();
			loader.contentLoaderInfo.addEventListener(
				Event.COMPLETE, 
				function(event:Event):void
				{
					avatar = loader.content; // avatar1.swfだとここでエラー
					addChild(avatar);
					avatar.play();
				}
			);
			loader.load(new URLLoader("http://asmple.com/work/avatar2.swf"));
		}	
	}	
}

32行目の処理は、Loaderクラスのcontent変数を通じて、ロードしたswfファイルを参照するオブジェクトを取得することに該当するので、外部リソースのswfでSecurity.allowDomain()メソッドの処理が必要となります。

30
31
32
33
34
35

				function(event:Event):void
				{
					avatar = loader.content; // avatar1.swfだとここでエラー
					addChild(avatar);
					avatar.play();
				}

URLLoaderを使う

以下をドキュメントクラスとするswfをfla.laドメインへ配置するとします。URLLoaderを使う場合はavatar1.swfでもavatar2.swfでもロードした後に、アニメーションを開始することが可能です。
但し、http://asmple.com/crossdomain.xmlにて以下の記述が必要となります。

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<site-control permitted-cross-domain-policies="master-only"/>
<allow-access-from domain="fla.la" />
</cross-domain-policy>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

package  
{
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.net.URLLoader;
	import flash.net.URLLoaderDataFormat;
	import flash.net.URLRequest;
 
	/**
	 * 外部リソースをURLLoaderでロードしてからメソッドにアクセス
	 * @author naoto koshikawa
	 */
	public class CrossScript2 extends Sprite
	{
		//----------------------------------------------------------------------
		//  methods
		//----------------------------------------------------------------------
		//------------------------------
		//  public methods
		//------------------------------
		/**
		 * constructor
		 */
		public function CrossScript2() 
		{
			var avatar:*;
 
			var loader:Loader = new Loader();
			loader.contentLoaderInfo.addEventListener(
				Event.COMPLETE, 
				function(event:Event):void
				{
					avatar = loader.content;
					addChild(avatar);
					avatar.play();
				}
			);
 
			var urlLoader:URLLoader = new URLLoader();
			urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
			urlLoader.addEventListener(
				Event.COMPLETE, 
				function(event:Event):void
				{
					loader.loadBytes(urlLoader.data);
				}
			);
			urlLoader.load(new URLRequest("http://asmple.com/work/avatar1.swf"));
		}	
	}	
}

動くサンプル

別ドメインの外部リソースのメッソドにアクセスする例を紹介します。

Loaderを用いた実例

• http://fla.la/swf/cross_script3.swf

から、先ほども紹介した

• http://asmple.com/work/avatar1.swf
• http://asmple.com/work/avatar2.swf

をロードします。先の例に照らし合わせると、cross_script3.swfがmain.swfでavatar1.swf, avatar2.swfがresource.swfとなります。

以上を踏まえて、以下のサンプルを触ってみて下さい。ロードするswfを選択してloadボタンをクリックするとswfがロードされます。ロードされたswfの周りに配置されたup, right, down, leftの各ボタンはswfに定義されたメソッドを実行します。

実行すると分かるように、avatar1.swfをロードした後に、up, right, down, leftの各ボタンをクリックするとSecurityErrorが発生しますが、avatar2.swfではロードされたswfがアニメーションを開始します。

URLLoaderを用いた実例

まったく同じサンプルですが、LoaderではなくURLLoaderを用いて外部リソースをロードしています。

• http://fla.la/swf/cross_script4.swf

から

• http://asmple.com/work/avatar1.swf
• http://asmple.com/work/avatar2.swf

をロードします。先の例に照らし合わせると、cross_script4.swfがmain.swfでavatar1.swf, avatar2.swfがresource.swfとなります。

こちらの例では、avatar1.swfでもアバターの操作が出来る事と、avatar1.swf, avatar2.swfをロードする際に

• http://asmple.com/crossdomain.xml

をリクエストしていることが確認出来ると思います。

firefoxをお使いの方は、Live HTTP Headersやfirebugを使うと簡単に確認出来ます。

crossdomain.xmlを取得する様子をfirebugで確認

crossdomain.xmlのロードはキャッシュするので、ロードの確認の際にはブラウザのキャッシュをクリアしてからお試し下さい。

おまけ(wonderflの例)

wonderflに投稿したswfは同一ドメイン swf.wonderfl.net に存在するため、crossdomain.xml も allowDomain も 使わずに他の投稿をロードして使うことが出来ます。

ただし、以下のようにブログパーツとして貼り付ける場合はwonderfl.netドメインのswfファイルを利用するようなので、リソース側のswfに以下の記述が必要です。(このエントリーを書きながら気づきました)

Security.allowDomain("wonderfl.net");

ロードするswf

本エントリーの例では外部リソース resource.swfにあたります。

ロード元swf

本エントリーの例では外部リソース main.swfにあたります。

他の投稿から使うライブラリ的なswfを投稿してみんなに使ってもらうことも出来そうですね。ちなみに、

ちなみに、wonderflに投稿したswfのurlは以下のように取れます。

var swfURL:String = loaderInfo.url;

wonderflにも投稿してあります。

まとめ

別ドメインの外部リソースを扱う際には、Loaderを使うのか、URLLoaderを使うのかによって、クロススクリプティングをする際にチェックするポイントが異なります。

外部リソースのswfを扱うことで柔軟なflashアプリケーションを作成していきたいと思います。

なお本エントリーでは、ActionScript 3.0 でパブリッシュされ、Flash Player 9.0.124.0 以降で実行されるものについて考察していきます。

セキュリティドメイン

crossdomain.xmlはセキュリティドメインと非常に密接な関係があります。swfファイルのセキュリティドメインは以下のコードで確認出来ます。

trace(flash.system.Security.sandboxType);

表示される値は表1に示した、いずれかの値となるはずです。

以降、flash.system.Security.sandboxTypeの値がremote、つまりインターネット上に公開されているswfファイルを対象に話を進めていきます。もちろん、インターネット上に公開されているswfファイルをローカルに保存して実行すればremoteではなくなります。

余談

wonderflに投稿したスクリプトを見ていただくと、flash.system.Security.sandboxTypeを出力するとremoteとなることが確認出来ます。

Flash Playerのセキュリティ

AdobeのActionScript3のドキュメントにあるFlash Player セキュリティにとても詳しく記載されています。

コンテンツのロード

Flash Player セキュリティにあるとおり、以下のメソッドは、コンテンツのロードと見なされます。

flash.display.Loader.load();
flash.media.Sound.load();
flash.net.NetStream.play();

TextFieldを使った以下のような処理も、コンテンツのロードと見なされます。

var imageURL:String = "http://fla.la/wp-content/uploads/2009/08/yappaributa75x75.jpg";
var textField:TextField = new TextField();
textField.width = 100;
textField.height = 100;
textField.htmlText = ' <img src="' + imageURL + '" width="75" height="75">';

RTMPを利用したサーバを通じて送信されたコンテンツもコンテンツのロードと見なされます。
(ただしサーバの設定によって制限をかけることも可能)

これらのメソッドや処理では特に制限なくswfファイルと別のドメインから以下の種類の外部リソースを読み込むことが可能です。

• swfファイル
• イメージ(JPG, GIF, PNG)
• サウンド
• ムービー

ロードされたメディアへのデータとしてのアクセス

Flash Player セキュリティにあるとおり、以下のメソッドは、ロードされたメディアへのデータとしてのアクセスと見なされます。

flash.display.Loader.content;
flash.display.BitmapData.draw();
flash.media.SoundMixer.computeSpectrum();
flash.media.SoundMixer.stopAll();
flash.media.Sound.id3;

つまり、以下のようなシチュエーションが、ロードされたメディアへのデータとしてのアクセスとなります。

• ビットマップデータへのアクセス
  • ロードした画像を含むLoaderクラスのインスタンス変数contentにアクセス
  • ロードした画像をBitmapDataクラスのインスタンスメソッドdrawの引数に指定する
• サウンドデータへのアクセス
  • ロードした音源を再生中にSoundMixerクラスのインスタンスメソッドcomputeSpectrum()を呼び出す
  • ロードした音源を再生中にSoundMixerクラスのインスタンスメソッドstopAll()を呼び出す
  • ロードした音源を含むSoundクラスのインスタンス変数id3にアクセス
• ビデオデータへのアクセス
  • FLVファイルからロードしたビデオデータにBitmapDataクラスのインスタンスメソッドdrawの引数に指定する

データのロード

Flash Player セキュリティにあるとおり、以下のメソッドは、データのロードと見なされます。

flash.net.URLLoader.load();
flash.net.URLStream.load();

Loaderクラスのloadを使用したロードはコンテンツのロード操作と見なされるがURLLoaderのloadはコンテンツのロード操作と見なされずデータのロード操作と見なされる点に注意しましょう。

crossdomain.xmlが必要となるケースは？

• ロードされたメディアへのデータとしてのアクセス
• データのロード

において、外部リソースがswfファイルと他のドメインである場合、外部リソースの提供側で許可が必要となります。許可はcrossdomain.xmlを使って行うことになります。

なお他のドメインと見なされるのは以下のケースです。

• example.comとexample.orgは別(これは当たり前)
• chat.example.comとgame.example.comは別(サブドメインが違う)
• example.comが192.0.2.1というIPアドレスである場合、example.comと192.0.2.1は別と見なさます

全部許可最強説

FLASHのオーサリング上では問題なかったのに、webサーバに上げたとたん外部リソースとの連携まわりが動かない！そんなとき、こんなcrossdomain.xmlを置きがちです。少なくとも以前の私はそうでした。全部許可が最強なんて言ってみたりして。

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<site-control permitted-cross-domain-policies="all"/>
<allow-access-from domain="*" />
</cross-domain-policy>

でも、これって場合によっては、セキュリティリスクを伴うのです。

また、良く分からずに、下記の記述をすることもあります。

flash.system.Security.allowDomain("*");

こちらも同様に、セキュリティリスクを伴うのです。今回はcrossdomain.xmlに焦点を当てるので、flash.system.Security.allowDomain()に関してはひとまず置いておきます。

crossdomain.xmlの仕様

crossdomain.xmlの仕様はadobeのドキュメントを読みましょう。とても詳しいです。

クロスドメインポリシーファイルは、Webクライアント（Adobe Flash Playerなど）に、複数のドメイン間でのデータ処理に関する許可を付与することができる、XML形式の文書です。
アドビ デベロッパーセンター クロスドメインポリシーファイルの仕様

デフォルトでは、サーバのルートディレクトにcrossdomain.xmlを探しに行きます。example.comドメインであればhttp://example.com/crossdomain.xmlとなります。このルートディレクトリに存在するポリシーファイルをマスターポリシーファイルと呼びます。

マスターポリシーファイル以外の例えば、http://example.com/other/crossdomain.xmlを読み込みたい場合は、以下のようになります。

Security.loadPolicyFile("http://example.com/other/crossdomain.xml");

このとき以下のような順番でポリシーファイルにアクセスします。

1. http://example.com/crossdomain.xmlを読み込む
2. site-control要素のpermitted-cross-domain-policies属性を確認
3. allの場合は、http://example.com/other/crossdomain.xmlを読み込む。master-only, noneの場合は読み込まない。

(permitted-cross-domain-policies属性がby-content-type, by-ftp-filenameのケースを省略してます)

よって、別のポリシーファイルにアクセスするように指定しても、Flash Playerは必ずマスターポリシーファイルへアクセスすることに注意しましょう。

ロードされたメディアへのデータとしてのアクセスを許可する

ロードされたメディアへのデータとしてのアクセスでは、外部リソースがswfファイルと別ドメインにある場合、crossdomain.xmlの読み込みが必須となります。以下に例を示します。

flash.display.Loaderでload後にBitmapData操作したい

Loaderクラスをのloadメソッドを実行する際に、LoaderContextを指定します。LoaderContexインスタンスを作成する際には引数にtrueを与えます。こうすることでLoaderがloadメソッドを実行する際にポリシーファイルを参照するようになります。

var loader:Loader = new Loader();
var loaderContext:LoaderContext = new LoaderContext(true);
 
loader.load(new URLRequest("http://external.example.com/image.jpg"), loaderContext);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, function(event):void
{
    var bitmapData:BitmapData = BitmapData(100, 100, true, 0x000000);
    bitmapData.draw(loader); // drawの引数にする
 
    var bitmapData2:BitmapData = loader.content; // Loaderインスタンスのcontentプロパティにアクセスする
});

このとき、swfファイルがswf.example.comというドメインにあったとすると、http://external.example.com/crossdomain.xmlでは以下のように記述します。

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<site-control permitted-cross-domain-policies="all"/>
<allow-access-from domain="swf.example.com" />
</cross-domain-policy>

データのロード時のcrossdomain.xml確認フロー

データのロードでは、外部リソースがswfファイルと別ドメインにある場合、crossdomain.xmlの読み込みが必須となります。その際のフローを確認して見ます。

swfからアクセスした別のdomainのAPIにアクセスする場合

swfファイルがswf.example.comにありapi.example.comのAPIを叩く例です。具体的には、URLLoaderクラスのloadメソッドを使って、外部リソースであるapi.example.comのAPIから情報を取得するようなケースです。

フローを以下に示します。

外部データが別ドメインにある場合のcrossdomain.xml

1. swf.example.comのswfをリクエスト
2. swfを受け取る
3. api.example.comのcrossdomain.xmlを取得
4. crossdomain.xmlでswf.example.comが許可されているか確認
5. api.example.comのAPIをリクエスト
6. APIは結果を返す

このケースで必要なcrossdomain.xmlは、http://api.example.com/crossdonain.xmlとなります。内容を以下に示します。

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<site-control permitted-cross-domain-policies="master-only"/>
<allow-access-from domain="swf.example.com" />
</cross-domain-policy>

ポイントは外部リソースにアクセスする際にポリシーファイルの許可があれば、ブラウザはcookieも送信する点です。例えばこのケースでcrossdomain.xmlが以下のようである場合

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<site-control permitted-cross-domain-policies="master-only"/>
<allow-access-from domain="*" />
</cross-domain-policy>

まったく別のドメインhoge.example.orgにおいてあるswfファイルからもapi.example.comにアクセスする際、ブラウザはcookieを送信します。よって、cookieが必要なサイトの内容がhoge.example.orgにおいてあるswfファイルから見えることになりますので注意しましょう。

swfからアクセスしたAPIがリダイレクトされる場合

swfファイルがswf.example.comにありapi.example.comのAPIを叩く例です。先ほどとの違いは、api.exampl.comのAPIはレスポンスとして、example.comへのリダイレクトを返すところです。

フローを以下に示します。

外部データが別ドメインにありリダイレクトされる場合のcrossdomain.xml

1. swf.example.comのswfをリクエスト
2. swfを受け取る
3. api.example.comのcrossdomain.xmlを取得
4. crossdomain.xmlでswf.example.comが許可されているか確認
5. api.example.comのAPIをリクエスト
6. APIはリダイレクトを返す
7. api.example.netのcrossdomain.xmlを取得
8. crossdomain.xmlでswf.example.comが許可されているか確認
9. api.example.net(リダイレクト先)のAPIをリクエスト
10. APIは結果を返す

このケースで必要なcrossdomain.xmlは、http://api.example.com/crossdonain.xmlとhttp://api.example.net/crossdonain.xmlとなります。内容を以下に示します。

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<site-control permitted-cross-domain-policies="master-only"/>
<allow-access-from domain="swf.example.com" />
</cross-domain-policy>

まとめ

外部リソースを扱う際には、crossdomain.xmlを設置することになると思いますが、必要な箇所で必要な設定を心がけることが大事です。外部ドメインにある画像の表示だけであれば、crossdomain.xmlは必要でなくflash.display.Loaderクラスのloadメソッドを使う等、代替案も考えることをおすすめします。