Cross domain uploading of files with CKEditor Image/Preview/File Upload

Sometimes your web site is located on one server and file content (files for downloading, images) on another. In this case it might be a good decision to separate CKEditor and uploader.

In other words you will use CKEditor + DOKSoft Image (or Preview or File) Upload plugins on one server and upload script on another. Also you will get the uploaded files stored on the same server where uploader script is located on, so all your URLs to images/files linked to external server.

The only problem you will get is browsers security limitations. In this article you will see how to easily configure the plugins to be compatible with current browsers.

Affected plugins:

Supported browsers:

  • IE8+
  • FF3.5+
  • Chrome 6+
  • Safari 4+

Technical details

Skip this chapter if you need just to configure the plugins. But this information can let you understand cross domain mechanism deeper.

Some time ago all browsers had no ability to manage cross domain calls by security reasons and just declines such calls. But due to industry needs all they were upgraded and now allow to make such calls if they are compatible with browser's security restrictions.

When your browser (we hope you are using modern browser) wants to execute AJAX call (DOKSoft plugins upload images exactly via AJAX calls) it adds a HTTP header:

Origin: http://yourwebsite_with_ckeditor.com

to the request. Then it reads a response and allows it to be read by your script (DOKSoft Image/File Upload plugins in our case) only if the response' headers have a header:

Access-Control-Allow-Origin: http://yourwebsite_with_ckeditor.com

or

Access-Control-Allow-Origin: *

If this reqirements are satisfied you get crossdomain working OK, in other case you get HTTP error.

Step-by-step solution

We will show you how to configure the plugins using the example. We will use two sample web sites:

http://yourwebsite_with_ckeditor.com - the web site where CKEditor is located on.

Full path to CKEditor is: http://yourwebsite_with_ckeditor.com/path/ckeditor/

http://yourwebsite_with_uploader.com - the web site where DOKSoft Uploader will be located on.

We desribe PHP uploader installation case:

  1. Install plugin on yourwebsite_with_ckeditor.com using according installation manual on our web site (you do not need to copy doksoft_uploader folder to ckeditor/plugins in case of cross domain uploads.
  2. Copy doksoft_uploader to yourwebsite_with_uploader.com. For example to http://yourwebsite_with_uploader.com/scripts/doksoft_uploader.
  3. Configure location of external upload script editing the file http://yourwebsite_with_ckeditor.com/path/ckeditor/config.js. Add this line:
    config.doksoft_uploader_url = 'http://yourwebsite_with_uploader.com/scripts/doksoft_uploader/uploader.php';
  4. Edit file http://yourwebsite_with_uploader.com/scripts/doksoft_uploader/config.php to set images URL and allow cross domain uploading:
    $config['BaseUrl'] = 'http://yourwebsite_with_uploader.com/scripts/doksoft_uploader/userfiles';
    $config['AllowExternalWebsites'] = 'http://yourwebsite_with_ckeditor.com'; // you can use '*' value also

That's all! Your CKEditor's DOKSoft image tools must fully work with external files or images uploader.