Start a new topic

Enabling CORS for streamed images?

I am using images streamed from Kinvey in my Canvas and because the images are loaded from different domain (kinvey) my canvas becomes tainted.


How can I enable CORS for those images?


(Not sure if this is related http://devcenter.kinvey.com/html5/guides/files#Specifyingcustomheaders but I don't understand it.)


Thanks



Daniel, 


We are looking into this for you, however we haven't been able to reproduce this issue for you yet and have been looking into it for the past 3 days.


If the server which is hosting these images is correctly configured with CORS headers, then you shouldn't run into this issue.


From the link that you shared above about tainted canvas:  "You must have a server hosting images with the appropriate Access-Control-Allow-Origin header." -- Where Kinvey is not responsible for sharing the image, your web-host would be responsible for CORS compliance.


Thanks,

Hi Damien


I wrote "I am using images streamed from Kinvey". Kinvey is the server. The URL of the image looks like https://baas.kinvey.com/blob/kid1592/xxx


see http://devcenter.kinvey.com/html5/guides/files#Streaming


Thanks

Daniel,


We do not store images on Kinvey at all, which is probably where your confusion arises from.  All files are stored on Google Cloud Storage.  If you hit the REST api within the console with the path that you just linked, you will get back an object with metadata linking you to where your image resides among other things.  The download url returned is a temporary url signed by google.  


Here's an example I wrote for you on how you might display an image in a non-canvas setting (to show how to resolve the url):


   

<img src="#" alt="This image is going to load" id="Dog"/>

<script type="text/javascript">
    var KINVEY_DEBUG = true;
    var promise = Kinvey.init({
        appKey    : '<App-ID>',
        appSecret : '<App-Secret>'
    });
    promise.then(function (activeUser) {
        var image = document.getElementById('Dog');
        var promise = Kinvey.File.stream('fae3f768-6699-4844-a19f-b1b811ab24a5');
        promise.then(function (response) {
            url = response._downloadURL;
            console.log("url: " + url);
            image.setAttribute('src', url);
        });
    });

    </script>

 

Please let me know if you have any additional questions.  




Daniel,


Let me know if Damien's solution has helped resolve your issue, else we will be happy to help further.


Thanks,

Pranav

Kinvey Support


1 person likes this
Login or Signup to post a comment