AS で別ドメインの画像を読み込むときの注意点

ActionScript を使って外部ドメインの画像を読み込むときの注意点を調べてみた。

AS3 で調べたけど、AS2 でもセキュリティの機構自体は同じ（だと思う）。

読み込み方

Loader クラスを使えば外部ドメインの画像をロードできる。

var loader:Loader = new Loader();
var req:URLRequest = new URLRequest("http://www.example.com/sample.gif");
loader.load(req);
addChild(loader);

画像形式は PNG、GIF、JPEG のみ。BMP はダメ。アニメーション GIF の場合は１フレーム目しか描画されない。

読み込み完了したことを知るためには、contentLoaderInfo プロパティの complete イベントを監視すればよい。ファイルが存在しなかったり、ファイル形式が不正だった場合は ioError イベントが発生する。ioError を listen していない場合には例外が投げられる。

loader.contentLoaderInfo.addEventListener("complete", completeHandler);
loader.contentLoaderInfo.addEventListener("ioError", ioErrorHandler);

読み込んだ画像は、回転・拡大したり、透明度を変えたり、フィルタをかけたりすることが可能だ。以下の例を見ていただきたい。

この例では、mixi のロゴを img.mixi.jp のドメインから動的に読み込んでいる。ColorMatrixFilter で紫色に変色させ、DisplacementMapFilter でマウスの上を歪ませている。

ソースはこちら (77行)。（歪ませる部分は miscellaneous [ActionScript 3.0] DisplacementMapFilterで虫眼鏡効果を参考にさせてもらいました）

セキュリティサンド ボックス侵害への対応

外部ドメインから画像を読み込んで、いろいろできるのは分かっていただけただろうか。だが、１つできないことがある。BitmapData.draw() を使って BitmapData に転写しようとすると、セキュリティサンドボックス侵害の例外が発生するのだ。

セキュリティサンドボックス侵害 : BitmapData.draw:http://localhost/ImageLoader1.swf は http://img.mixi.jp/img/basic/common/mixilogo001.gif にアクセスできません。ポリシーファイルが必要ですが、このメディアがロードされたとき、checkPolicyFile フラグが設定されませんでした。

同様に、Loader で読み込んだ音声ファイルを SoundMixer.computeSpectrum() しようとしたときにも例外が発生する。

このように、外部ドメインからロードしたメディアに対して、ピクセルデータやオーディオデータに直接アクセスすることは許可されない。表示・再生はできるのに、そのメディアを構成するデータを見ることはできない、というわけだ。

対処法は以下の２通り。

1. crossdomain.xml が用意されている場合

画像が置いてあるドメインのクロスドメインポリシーファイル（いわゆる crossdomain.xml）で、アクセスが許可されている場合、データとしてアクセスできる。

(追記) AS2 では crossdomain.xml があっても、BitmapData.draw() できないらしい。

例えば、Flickr のようなサービスでは、全てのドメインからのアクセスを認める設定が記述されている。

<?xml version="1.0" ?> 
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
  <allow-access-from domain="*" secure="true" /> 
</cross-domain-policy>

一方、mixi にも crossdomain.xml はあるのだけど、現時点では任意のドメインからのアクセスは許可されていない。

<?xml version="1.0" ?> 
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
  <allow-access-from domain="*.mixi.jp" secure="true" /> 
</cross-domain-policy>

では、実際にロード時に crossdomain.xml を読み込ませてみよう。といっても２箇所修正するだけだ。

// LoaderContextを準備
var context:LoaderContext = new LoaderContext(true);

var loader:Loader = new Loader();
var req:URLRequest = new URLRequest("http://www.example.com/sample.gif");
loader.load(req, context); // 第２引数に context を渡す
addChild(loader);

LoaderContext の checkPolicyFile を true にするところがポイント。これ以外に、Security.loadPolicyFile() メソッドを使って、事前に読み込んでおく方法もある。loadPolicyFile() を使うと、crossdomain.xml 以外の URL からクロスドメインポリシーファイルを読み取ることができる。

crossdomain.xml が存在しない場合、もしくは許可されなかった場合にも、画像はロードされる。ロードした段階では例外も発生しない。BitmapData.draw() しようとした段階になって初めて例外が出るので注意が必要だ。

では、どうやって許可されたかを調べるかというと、実際に試してみて例外を拾うのが一番簡単。

loader.contentLoaderInfo.addEventListener("complete", function(event:*):void{
    var bmd:BitmapData = new BitmapData(loader.width, loader.height);
    try{
        bmd.draw(loader);
    }
    catch(e:SecurityError){
        trace(e.toString());
    }
});

もう１つの方法として、loader.contentLoaderInfo.childAllowsParent で調べることもできる。

loader.contentLoaderInfo.addEventListener("complete", function(event:*):void{
    if(loader.contentLoaderInfo.childAllowsParent) {
        // あとはお好きに
    }
});

どちらでもお好きな方を。

具体例を１つ。

assets2.twitter.com から動的に twitter のロゴを読み取って getPixel している。ロゴの上にマウスを持っていくと、マウスの下の色が表示される。ソースはこちら (44行)。

（追記）twitter.com の crossdomain.xml の制約が強化されて、getPixel 出来なくなりました。

Firebug の Net タブを見れば、crossdomain.xml とロゴを拾ってきていることが確認できるだろう。

2. crossdomain.xml が用意されていない場合

諦めろ。もしくは、自鯖に proxy となる CGI を設置するしかない。

おまけ

その他、注意点、気づいたことなど。

crossdomain.xml が用意されているサイトでも、BitmapData として扱う必要がなければ普通に load したほうがよい。リクエストするファイルが少なくなる分、処理が早くなる
今回は Loader で別ドメインの画像を読み取る話だったが、別ドメインの SWF を読み取るときにはもう少し複雑になる。ApplicationDomain や System.allowDomain() が関係してくる。
Loader でロードするときには、Cookie も一緒に投げられる。例えば、http://mixi.jp/logout.pl を踏ませることで、mixi からログアウトさせることも可能だし、自分のプロフィールページを開かせて足跡帳を作ることも可能。とはいえ、<img src> で踏ませるのと同じことなので、Flash だから危険、という問題でもない。
URLLoader で別ドメインのデータを読み取るときには、必ず crossdomain.xml がチェックされる。URLLoader 自体がデータを読み取るものだから、と考えると納得のいく仕様だろう。