回头再说:Uploadify跨域上传原理

   

《 回头再说：jQuery跨域原理 》一文提到浏览器的同源策略以及使用JsonP的方式实现跨域;在评论中金色海洋提出了一个问题:

 

我最近在用 uploadify + ashx 来做文件上传的功能。都测试成功了，但是发现我可以提交到其他的网站里面。

我是在本地测试了。两个网站，IP地址相同，使用端口来区分。

一个端口是8001，另一个是8002 。

两个网站都有上传文件的程序，我发现，如果我把8001端口的站点的

'script': '/_CommonPage/UploadHandler.ashx',

改成

'script': 'http://192.168.0.1:8002/_CommonPage/UploadHandler.ashx',

居然也能够成功上传文件，传到了8002对应的网站里面。

我不知道如果换成域名了，是否也是可以往不同的域名里上传文件？

如果是的话，是不是很危险？如何来验证呢？ 

 

 我给出的错误解释

         看到金色海洋的问题之后,我下载下来Uploadify源码看了一下,然后非常草率的给出了一个解释,点击这里;对于这个错误的解释,园友mx1700提出了质疑;于是下班回家之后,我开始动手模拟金色海洋的环境,试图一探究竟; 

 

Uploadify工作机制

       我在VS2010里面新建了一个webApplication,在页面上使用Uploadify,页面代码如下:   

    

    

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery.uploadify.v2.1.0.js" type="text/javascript"></script>
    <script src="Scripts/swfobject.js" type="text/javascript"></script>
    <script type="text/javascript">
       // <![CDATA[
        var id = "55";
        var theString = "asdf";
        $(document).ready(function () {
            $('#fileInput').uploadify({
                'uploader': 'uploadify.swf',
                'script': 'http://www.b.com:84/Uploader.ashx',
                'scriptData': { 'id': id, 'foo': theString },
                'cancelImg': 'cancel.png',
                'auto': true,
                'multi': true,
                'fileDesc': 'Image Files',
                'fileExt': '*.jpg;*.png;*.gif;*.bmp;*.jpeg',
                'queueSizeLimit': 90,
                'sizeLimit': 4000000,
                'buttonText': 'Choose Images',
                'folder': '/uploads',
                'onAllComplete': function (event, queueID, fileObj, response, data) {

                }
            });
        });
   // ]]></script>

   <input id="fileInput" name="fileInput" type="file" />

 

        通过单步调试，我发现页面上会通过swfobject.js动态加载一个Flash,我们在页面上操作的实际上是Flash.  jQuery的作用是页面、Flash、目标服务器之间的黏合剂。它定义用户上传操作在不同时机的响应函数.而在这里 我所认为“发送数据上传文件”的函数，只不过是一个用来检查服务器上是不是已经存在同名文件的函数;由于这个检查有可能是跨域，所以 Uploadify间接使用了jQuery的JsonP跨域解决方案.

        通过排除,我们能有一个基本的判断：文件上传是在Flash里面完成的.那么Flash里面做了什么呢?还好有uploadify.fla文件,使用Flex Builder打开这个文件来看,果然如此，很多朋友没有Flex Builde,这里贴出完整代码;可以看到,

// Upload each file
function uploadFile(file:FileReference, index:int, ID:String, single:Boolean):

    实际的上传操作，而上传不同时机使用的很多函数都是定义在jquery.uploadify.v2.1.0.min.js文件里面.

/*
Uploadify v2.1.0
Release Date: August 24, 2009

Copyright (c) 2009 Ronnie Garcia, Travis Nickels

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
 */

import flash.external.ExternalInterface;
import flash.net.*;
import flash.events.*;
import flash.display.*;
import com.adobe.serialization.json.JSON;

 // Align the stage to the top left and don't scale it
 stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

 // Create all the variables
 var param:Object = LoaderInfo(this.root.loaderInfo).parameters;
 var fileRefSingle:FileReference    = new FileReference();
 var fileRefMulti:FileReferenceList = new FileReferenceList();
 var fileRefListener:Object = new Object();
 var fileQueue:Array        = new Array();
 var fileItem:Object        = new Object();
 var activeUploads:Object   = new Object();
 var errorArray:Array       = new Array();
 var counter:Number        = 0;
 var filesSelected:Number  = 0;
 var filesReplaced:Number  = 0;
 var filesUploaded:Number  = 0;
 var filesChecked:Number   = 0;
 var errors:Number         = 0;
 var kbs:Number            = 0;
var allBytesLoaded:Number = 0;
var allBytesTotal:Number  = 0;
var allKbsAvg:Number      = 0;
var allowedTypes:Array;
var scriptURL:URLRequest;
var variables:URLVariables;
var queueReversed:Boolean = false;

// For debugging, alert any value to javascript
function debug(someValue) {
    ExternalInterface.call('alert("' + someValue + '")');
}

// Trigger a javascript event
function $trigger(eventName:String, ... args):void {
    // Add parenthesis
    function p(s:String):String {
        return ('('+s+')');
    }
    // Add quotes
    function q(s:String):String {
        return ('"'+s+'"');
    }
    var list:Array = [q(eventName)]; //Add the event to the array
    if (args.length > 0) list.push(JSON.encode(args)); // Add arguments to the array as a JSON object
    ExternalInterface.call(['jQuery'+p(q('#'+param.uploadifyID)), p(list.join(','))].join('.trigger')); // Trigger the event
}

// Random string generator for queue IDs
function generateID(len:Number):String {
    var chars:Array = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
    var ID:String = '';
    var index:Number;
    for (var n:int = 0; n < len; n++) {
        ID += chars[Math.floor(Math.random() * 25)];
    }
    return ID;
}

// Load the button image
function setButtonImg():void {
    if (param.buttonImg) {
        var btnLoader:Loader    = new Loader();
        var btnImage:URLRequest = new URLRequest(param.buttonImg);
        browseBtn.addChild(btnLoader);
        btnLoader.load(btnImage);
    }
    if (!param.hideButton && !param.buttonImg) {
        browseBtn.empty.alpha = 1;
    }
}
setButtonImg();

// Hide or show the button
function hideButton(hideValue:Boolean):void {
    if (hideValue) {
        browseBtn.empty.alpha = 0;
    } else {
        browseBtn.empty.alpha = 1;
    }
}

// Set the text on the button
function setButtonText():void {
    if (param.buttonText) {
        browseBtn.empty.buttonText.text = unescape(param.buttonText);
    }
}
setButtonText();

// This is important for clicking the button correctly
browseBtn.buttonMode = true;
browseBtn.useHandCursor = true;
browseBtn.mouseChildren = false;

// Set the size of the button
function setButtonSize():void {
    if (param.hideButton) {
        browseBtn.width  = param.width;
        browseBtn.height = param.height;
    }
    // Set the size of the button on the page
    ExternalInterface.call('jQuery("#' + param.uploadifyID + '").attr("width",' + param.width + ')');
    ExternalInterface.call('jQuery("#' + param.uploadifyID + '").attr("height",' + param.height + ')');
}
setButtonSize();

// Setup the rollover animation
if (param.rollover) {
    browseBtn.addEventListener(MouseEvent.ROLL_OVER, function (event:MouseEvent):void {
        event.currentTarget.y = -param.height;
    });
    browseBtn.addEventListener(MouseEvent.ROLL_OUT, function (event:MouseEvent):void {
        event.currentTarget.y = 0;
    });
    browseBtn.addEventListener(MouseEvent.MOUSE_DOWN, function (event:MouseEvent):void {
        event.currentTarget.y = -(param.height * 2);
    });
}

// create the scriptData variable if it doesn't exist
if (!param.scriptData) {
    param.scriptData = '';
}

// Limit the file types
function setAllowedTypes():void {
    allowedTypes = [];
    if (param.fileDesc && param.fileExt) {
        var fileDescs:Array = param.fileDesc.split('|');
        var fileExts:Array = param.fileExt.split('|');
        for (var n = 0; n < fileDescs.length; n++) {
            allowedTypes.push(new FileFilter(fileDescs[n], fileExts[n]));
        }
    }
}
setAllowedTypes();

// Set or get the variables
function uploadify_updateSettings(settingName:String, settingValue) {
    if(settingValue == null) {
        if (settingName == 'queueSize') {
            return fileQueue.length;
        }
        return param[settingName];
    } else {
        param[settingName] = settingValue;
        if(settingName == 'buttonImg') setButtonImg();
        if(settingName == 'buttonText') setButtonText();
        if(settingName == 'fileDesc' || settingName == 'fileExt') setAllowedTypes();
        if(settingName == 'width' || settingName == 'height') setButtonSize();
        if(settingName == 'hideButton') hideButton(settingValue);
        return true;
    }
}

// Browse for Files
browseBtn.addEventListener(MouseEvent.CLICK, function():void {
    if (objSize(activeUploads) == 0) { // Don't browse if it's uploading
        if (!allowedTypes) {
            (!param.multi) ? fileRefSingle.browse() : fileRefMulti.browse();
        } else {
            (!param.multi) ? fileRefSingle.browse(allowedTypes) : fileRefMulti.browse(allowedTypes);
        }
    }
});

// Get the size of an object
function objSize(obj:Object):Number {
    var i:int = 0;
    for (var item in obj) {
        i++;
    }
    return i;
}

// Get actual folder path
function getFolderPath():String {
    var folder:String = param.folder;
    if (param.folder.substr(0,1) != '/' && param.folder.substr(0,4) != 'http') {
        folder = param.pagepath + param.folder;
        var folderParts:Array = folder.split('/');
        for (var i = 0; i < folderParts.length; i++) {
            if (folderParts[i] == '..') {
                folderParts.splice(i - 1, 2);
            }
        }
        folder = folderParts.join('/');
    }
    return folder;
}

// Get the array index of the item in the fileQueue
function getIndex(ID:String):Number {
    var index:int;
    for (var n:Number = 0; n < fileQueue.length; n++) {
        if (fileQueue[n].ID == ID) {
            index = n;
        }
    }
    return index;
}

// Check if a file with the same name is already in the queue
function inQueue(fileName:String):Object {
    var obj:Object = new Object();
    obj.testResult = false;
    if (fileQueue.length > 0) {
        for (var n = 0; n < fileQueue.length; n++) {
            if (fileQueue[n].file.name == fileName) {
                obj.size       = fileQueue[n].file.size;
                obj.ID         = fileQueue[n].ID;
                obj.arrIndex   = n;
                obj.testResult = true;
            }
        }
    }
    return obj;
}

// When selecting a file
function fileSelectSingleHandler(event:Event):void {
    // Check if the filename already exists in the queue
    fileItem = new Object();
    fileItem.file = FileReference(event.target);
    uploadify_clearFileUploadQueue(true);
    var ID:String = generateID(6);
    fileItem.ID = ID;
    fileQueue.push(fileItem);
    filesSelected = 1;
    allBytesTotal = fileItem.file.size;
    $trigger('uploadifySelect',ID,fileItem.file);
    $trigger('uploadifySelectOnce',{
        'fileCount'     : fileQueue.length,
        'filesSelected' : filesSelected,
        'filesReplaced' : filesReplaced,
        'allBytesTotal' : allBytesTotal
    });
    filesSelected = 0;
    filesReplaced = 0;
    if (param.auto) {
        if (param.checkScript) { 
            uploadify_uploadFiles(null, false);
        } else {
            uploadify_uploadFiles(null, true);
        }
    }
}

function fileSelectMultiHandler(event:Event):void {
    var ID:String = '';
    for (var n:Number = 0; n < fileRefMulti.fileList.length; n++) {
        fileItem = new Object();
        fileItem.file = fileRefMulti.fileList[n];
        // Check if the filename already exists in the queue
        var queueTest:Object = inQueue(fileRefMulti.fileList[n].name);
        if (queueTest.testResult) {
            allBytesTotal -= queueTest.size;
            allBytesTotal += fileItem.file.size;
            fileItem.ID    = fileQueue[queueTest.arrIndex].ID;
            fileQueue[queueTest.arrIndex] = fileItem;
            filesReplaced++;
        } else {
            if (fileQueue.length < param.queueSizeLimit) {
                ID = generateID(6);
                fileItem.ID = ID;
                fileQueue.push(fileItem);
                filesSelected++;
                allBytesTotal += fileItem.file.size;
                $trigger('uploadifySelect',ID,fileItem.file);
            } else {
                $trigger('uploadifyQueueFull',param.queueSizeLimit);
                break;
            }
        }
    }
    $trigger('uploadifySelectOnce',{
        'fileCount'     : fileQueue.length,
        'filesSelected' : filesSelected,
        'filesReplaced' : filesReplaced,
        'allBytesTotal' : allBytesTotal
    });
    filesSelected = 0;
    filesReplaced = 0;
    if (param.auto) {
        if (param.checkScript) { 
            uploadify_uploadFiles(null, false);
        } else {
            uploadify_uploadFiles(null, true);
        }
    }
}
fileRefSingle.addEventListener(Event.SELECT, fileSelectSingleHandler);
fileRefMulti.addEventListener(Event.SELECT, fileSelectMultiHandler);

// This function should run during upload so flash doesn't timeout
function uploadCounter(event:Event):void {
    counter++;
}

// Start the upload
function uploadify_uploadFiles(ID:String, checkComplete:Boolean):void {
    if (!queueReversed) {
        fileQueue.reverse();
        queueReversed = true;
    }
    if (param.script.substr(0,1) != '/' && param.script.substr(0,4) != 'http') param.script = param.pagepath + param.script;
    scriptURL = new URLRequest(param.script);
    variables = new URLVariables();
    (param.method.toUpperCase() == "GET") ? scriptURL.method = URLRequestMethod.GET : scriptURL.method = URLRequestMethod.POST;
    if (param.scriptData != '') variables.decode(unescape(param.scriptData));
    if (param.fileExt) variables.fileext = unescape(param.fileExt);
    variables.folder = unescape(getFolderPath());
    scriptURL.data = variables;
    if (param.checkScript && !checkComplete) {
        var fileQueueObj:Object = new Object();
        if (ID) {
            var index:int = getIndex(ID);
            if (fileQueue[index].file) {
                fileQueueObj[fileQueue[index].ID] = fileQueue[index].file.name;
            }
            $trigger('uploadifyCheckExist',param.checkScript,fileQueueObj,param.folder,true);
        } else {
            for (var n:Number = fileQueue.length - 1; n > -1; n--) {
                if (fileQueue[n]) {
                    fileQueueObj[fileQueue[n].ID] = fileQueue[n].file.name;
                }
            }
            $trigger('uploadifyCheckExist',param.checkScript,fileQueueObj,param.folder,false);
        }
    } else {
        if (ID && fileQueue[getIndex(ID)].file) {
            uploadFile(fileQueue[getIndex(ID)].file, getIndex(ID), ID, true);
        } else {
            for (n = fileQueue.length - 1; n > -1; n--) {
                if (objSize(activeUploads) < parseInt(param.simUploadLimit)) {
                    if (!activeUploads[fileQueue[n].ID] && fileQueue[n].file) {
                        uploadFile(fileQueue[n].file, n, fileQueue[n].ID, false);
                    }
                } else {
                    break;
                }
            }
        }
    }
}

function queueIsNotEmpty(item:*, index:int, array:Array):Boolean {
    return (item.file != '');
}

// Upload each file
function uploadFile(file:FileReference, index:int, ID:String, single:Boolean):void {
    var startTimer:Number      = 0;
    var lastBytesLoaded:Number = 0;
    var kbsAvg:Number          = 0;
    
    function fileOpenHandler(event:Event) {
        startTimer = getTimer();
        $trigger('uploadifyOpen',ID,event.currentTarget);
    }
    
    function fileProgressHandler(event:ProgressEvent):void {
        var percentage:Number = Math.round((event.bytesLoaded / event.bytesTotal) * 100);
        if ((getTimer()-startTimer) >= 150) {
            kbs = ((event.bytesLoaded - lastBytesLoaded)/1024)/((getTimer()-startTimer)/1000);
            kbs = int(kbs*10)/10; 
            startTimer = getTimer();
            if (kbsAvg > 0) {
                kbsAvg = (kbsAvg + kbs)/2;
            } else {
                kbsAvg = kbs;
            }
            allKbsAvg = (allKbsAvg + kbsAvg)/2;
        }
        allBytesLoaded += (event.bytesLoaded - lastBytesLoaded);
        lastBytesLoaded = event.bytesLoaded;
        $trigger('uploadifyProgress',ID,event.currentTarget,{
            'percentage'     : percentage,
            'bytesLoaded'    : event.bytesLoaded,
            'allBytesLoaded' : allBytesLoaded,
            'speed'          : kbs
        });
    }
    
    function fileCompleteHandler(event:DataEvent):void {
        if (kbsAvg == 0) {
            kbs = (file.size/1024)/((getTimer()-startTimer)/1000);
            kbsAvg = kbs;
            allKbsAvg = (allKbsAvg + kbsAvg)/2;
        }
        
        allBytesLoaded -= lastBytesLoaded;
        allBytesLoaded += event.currentTarget.size;
        
        $trigger('uploadifyProgress',ID,event.currentTarget,{
            'percentage'     : 100,
            'bytesLoaded'    : event.currentTarget.size,
            'allBytesLoaded' : allBytesLoaded,
            'speed'          : kbs
        });
        $trigger('uploadifyComplete',ID,{
                'name'             : event.currentTarget.name,
                'filePath'         : getFolderPath() + '/' + event.currentTarget.name,
                'size'             : event.currentTarget.size,
                'creationDate'     : event.currentTarget.creationDate,
                'modificationDate' : event.currentTarget.modificationDate,
                'type'             : event.currentTarget.type
            },
            escape(event.data),{
            'fileCount' : (fileQueue.length-1),
            'speed'     : kbsAvg
        });
        filesUploaded++;
        fileQueue.splice(getIndex(ID),1);
        delete activeUploads[ID];
        if (!single) {
            uploadify_uploadFiles(null, true);
        }
        event.currentTarget.removeEventListener(DataEvent.UPLOAD_COMPLETE_DATA, fileCompleteHandler);
        if (!fileQueue.some(queueIsNotEmpty) && objSize(activeUploads) == 0) {
            $trigger('uploadifyAllComplete',{
                'filesUploaded'  : filesUploaded,
                'errors'         : errors,
                'allBytesLoaded' : allBytesLoaded,
                'speed'          : allKbsAvg
            });
            resetVars();
        }
    }
    
    // Add all the event listeners
    file.addEventListener(Event.OPEN, fileOpenHandler);
    file.addEventListener(ProgressEvent.PROGRESS, fileProgressHandler);
    file.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, fileCompleteHandler);
    
    // Reset all the numbers
    function resetVars() {
        filesUploaded  = 0;
        errors         = 0;
        allBytesLoaded = 0;
        allBytesTotal  = 0;
        allKbsAvg      = 0;
        filesChecked   = 0;
        queueReversed  = false;
    }
    
    // Handle all the errors
    file.addEventListener(HTTPStatusEvent.HTTP_STATUS, function(event:HTTPStatusEvent):void {
        if (errorArray.indexOf(ID) == -1) {  
            $trigger('uploadifyError',ID,event.currentTarget,{
                'type' : 'HTTP',
                'info' : event.status
            });
            finishErrorHandler(ID);
        }
    });
    file.addEventListener(IOErrorEvent.IO_ERROR, function(event:IOErrorEvent):void {
        if (errorArray.indexOf(ID) == -1) {
            $trigger('uploadifyError',ID,event.currentTarget,{
                'type' : 'IO',
                'info' : event.text
            });
            finishErrorHandler(ID);
        }
    });
    file.addEventListener(SecurityErrorEvent.SECURITY_ERROR, function(event:SecurityErrorEvent):void {
        if (errorArray.indexOf(ID) == -1) { 
            $trigger('uploadifyError',ID,event.currentTarget,{
                'type' : 'Security',
                'info' : event.text
            });
            finishErrorHandler(ID);
        }
    });
    
    // Common routines used by all errors
    function finishErrorHandler(ID:String) {
        errorArray.push(ID);
        fileQueue[getIndex(ID)].file = '';
        delete activeUploads[ID];
        if (!single) {
            uploadify_uploadFiles(null, true);
        }
        errors++;
        if (!fileQueue.some(queueIsNotEmpty)) {
            if (root.hasEventListener(Event.ENTER_FRAME)) {
                root.removeEventListener(Event.ENTER_FRAME, uploadCounter);
            }
            $trigger('uploadifyAllComplete',{
                'filesUploaded'  : filesUploaded,
                'errors'         : errors,
                'allBytesLoaded' : allBytesLoaded,
                'speed'          : allKbsAvg
            });    
            resetVars();
        }
    }
    
    if (param.sizeLimit && file.size > parseInt(param.sizeLimit)) {
        if (errorArray.indexOf(ID) == -1) { 
            $trigger('uploadifyError',ID,file,{
                'type' : 'File Size',
                'info' : param.sizeLimit
            });
            finishErrorHandler(ID);
        }
    } else {
        file.upload(scriptURL, param.fileDataName);
        activeUploads[ID] = true;
    }
}

function uploadify_cancelFileUpload(ID:String, single:Boolean, clearFast:Boolean):void {
    var index:int = getIndex(ID);
    var fileObj:Object = new Object();
    if (fileQueue[index].file) {
        fileObj = fileQueue[index].file;
        fileQueue[index].file.cancel();
        allBytesTotal -= fileQueue[index].file.size;
    }

    fileQueue.splice(index,1);

    if (activeUploads[ID]) {
        delete activeUploads[ID];
        uploadify_uploadFiles(null, true);
        if (root.hasEventListener(Event.ENTER_FRAME) && objSize(activeUploads) == 0) {
            root.removeEventListener(Event.ENTER_FRAME, uploadCounter);
        }
    }

    $trigger('uploadifyCancel',ID,fileObj,{
        'fileCount'     : (fileQueue.length),
        'allBytesTotal' : allBytesTotal
    },clearFast);
}

// Cancel all uploads
function uploadify_clearFileUploadQueue(clearFast:Boolean):void {
    if (!queueReversed) {
        fileQueue.reverse();
        queueReversed = true;
    }
    for (var n:Number = fileQueue.length - 1; n >= 0; n--) {
        uploadify_cancelFileUpload(fileQueue[n].ID, false, clearFast);
    }
    if (root.hasEventListener(Event.ENTER_FRAME)) {
        root.removeEventListener(Event.ENTER_FRAME, uploadCounter);
    }
    $trigger('uploadifyClearQueue');
    filesUploaded  = 0;
    errors         = 0;
    allBytesLoaded = 0;
    allBytesTotal  = 0;
    allKbsAvg      = 0;
    filesChecked   = 0;
    queueReversed  = false;
}

// Create all the callbacks for the functions
ExternalInterface.addCallback('updateSettings', uploadify_updateSettings);
ExternalInterface.addCallback('startFileUpload', uploadify_uploadFiles);
ExternalInterface.addCallback('cancelFileUpload', uploadify_cancelFileUpload);
ExternalInterface.addCallback('clearFileUploadQueue', uploadify_clearFileUploadQueue);

       现在我们能够得出这样一个结论：Uploadify本质上是一个基于Flash的jQuery上传插件.那么它到底能不能跨域呢?这里我们要考虑两个安全模型.一个是浏览器的同源策略，jQuery与目标服务器的交互是过Jsonp方式来实现回避浏览器的同源策略。还有一个就是Flash的安全沙箱,分析之前我们还是先完成金色海洋想要的实验.

 

环境准备

       我们在IIS中部署两个站点,既然是验证跨域我们为这两个站点绑定主机头;

   站点A:www.a.com 端口83 站点B:www.b.com 端口84

  

   修改Host文件（文件位置c:\Windows\System32\drivers\etc\hosts）

 

127.0.0.1 www.a.com

 

127.0.0.1 www.b.com

   注意：为了避免偶然因素的影响，后面每一次修改之后我都会重启IIS,使用新的浏览器窗口进行测试。

1. 首先验证两个站点是否正常运行：站点A使用'script': 'http://www.a.com:83/Uploader.ashx', 站点B使用'script': 'http://www.b.com:84/Uploader.ashx',即当前域页面上传到当前域.测试通过
2. 将站点A上传的目标服务域修改成站点B，即修改'script': 'http://www.b.com:84/Uploader.ashx'，测试结果见下面的截图

 

 

    3.看到上面的Security Error了么,我们通过在站点B下面添加一个crossdomain.xml,该文件的内容如下：

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

 

   添加了这个文件之后，站点A上传文件到站点B成功！

Uploadify跨域原理

      上面通过添加了crossdomain.xml之后就实现了跨域上传文件，关键点在于Flash的安全沙箱策略；Flash安全策略简单讲：同一个域的属于同一个沙箱，同一个沙箱的可以互相访问.如果要访问另外一个沙箱的内容就要在另外一个沙箱定义信任,这种信任策略就定义在crossdomain.xml中。在我们的实验中就是在站点B的策略文件crossdomain.xml中定义了对站点A的信任，只不过我偷懒让站点B信任所有外部域名的访问。

     对于crossdomain.xml还有两点细节：1.这个文件的要放在站点的根目录下而且文件名固定 2.跨域访问端口在1024以下必须要通过策略文件来定义信任关系。换句话说端口大于等于1024隐式开放访问权限。策略文件的详细说明请点击这里查看。

 

总结   

    对于金色海洋的问题解答：之所以你可以上传到另外一个端口的站点时因为IP一样，如果是上传到另外一个域名下，需要再目标服务器的根目录下添加Flash安全策略文件.

     Uploadify本质上是一个基于Flash的jQuery上传插件.跨域上传的情况牵扯到两个安全模型,一个使浏览器的同源策略，一个使是Flash的安全沙箱策略;我们组合使用jQuery的Jsonp和策略文件实现了跨域上传.

     好吧,就到这里,周末愉快

 

     测试文件下载：Web1.rar crossdomain.xml