DOM7000: Access Denied. Resource access is restricted for cross-origin URL: 'blob:8532AB80-9128-4075-B4F7-D4F2991C2B80'.


  • I had been using a way for users to upload images from their local computer to my server (DB). But now I'm adding the possibility to shrink the image a little bit, so if the users selects (via FileOpenPicker) a huge image, I would scale it down a bit before showing it in a img element and upload it to the server (on user request).

    After doing that, I get the warning from the subject in the JavaScript Console when I want to set the img.src property via URL.createObjectURL as I've always done it. Also, when i try to upload the file I get a "Access denied" error.

    Could somebody please help? Here's a little code snippet.

    var pixelData, newFile;
    								.then(function (origin) {
    									return Windows.Graphics.Imaging.BitmapDecoder.createAsync(origin);
    								}.bind(this)).then(function (bitmapDecoder) {
    									var bitmapTransform = new Windows.Graphics.Imaging.BitmapTransform();
    									bitmapTransform.scaledHeight = 768;
    									bitmapTransform.scaledWidth = 1024;
    									return bitmapDecoder.getPixelDataAsync(Windows.Graphics.Imaging.BitmapPixelFormat.rgba8, Windows.Graphics.Imaging.BitmapAlphaMode.straight, bitmapTransform, Windows.Graphics.Imaging.ExifOrientationMode.respectExifOrientation, Windows.Graphics.Imaging.ColorManagementMode.doNotColorManage);
    								}.bind(this)).then(function (data) {
    									pixelData = data;
    									var fileName = this.maximumUploadSize + '_' + file.name;
    									return Windows.Storage.ApplicationData.current.temporaryFolder.createFileAsync(fileName, Windows.Storage.CreationCollisionOption.replaceExisting);
    								}.bind(this)).then(function (aux) {
    									newFile = aux;
    									Windows.Storage.AccessCache.StorageApplicationPermissions.futureAccessList.add(newFile, newFile.name);
    									return newFile.openAsync(Windows.Storage.FileAccessMode.readWrite);
    								}.bind(this)).then(function (destination) {
    									return Windows.Graphics.Imaging.BitmapEncoder.createAsync(Windows.Graphics.Imaging.BitmapEncoder.pngEncoderId, destination);
    								}.bind(this)).then(function (encoder) {
    									encoder.setPixelData(Windows.Graphics.Imaging.BitmapPixelFormat.rgba8, Windows.Graphics.Imaging.BitmapAlphaMode.premultiplied, 1024, 768, 96, 96, pixelData.detachPixelData());
    									return encoder.flushAsync();
    								}.bind(this)).then(function () {
    								}.bind(this), function (error) {

    and this is the code of the internalSet function, the one that actually sets the src property

    this.image = file;
    				if (file) {
    					this.imgTag.src = URL.createObjectURL(this.image, { oneTimeOnly: true });



    Wednesday, December 18, 2013 3:17 PM

All replies

  • This isn't an area which I familiar with, so please excuse the question if obvious and/or dumb:  why does is the prefix "blob:" necessary?  This is what seems to be causing the problem.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Thursday, December 19, 2013 1:28 PM
  • No problem, the blob prefix is returned by the URL.createObjectURL function... which is a nativa WinJS function (not mine).

    Also, it works just fine if I use the same image the user selected. The problem appears when I go thru all those promises to shrink the image and try to set the new one to the src.

    Please let me know if there's anything else I can add to help you help me :)


    Thursday, December 19, 2013 2:48 PM