I am attempted to use Caman.js and load images from Amazon S3. Caman.js is a JS library for producing image effects and it works by creating a copy of the image to a canvas object and doing various pixel manipulations to the data. It looks like canvas has some security details in place to limit the ability of javascript to access the pixel data when that data is coming from a foreign server unless that server passes along some security credentials in the request, or Cross-Origin Resource Sharing (CORS).
I've never encountered CORS before, am trying to learn about it, but I can't seem to get this working. From what I can understand, in order to avoid this error which appears in Chrome:
Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SECURITY_ERR: DOM Exception 18
You need to set a CORS file on your Amazon bucket. Here's the CORS file I'm using:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
This does not seem to have any effect. Are these CORS files cached by Amazon or should I expect it to take effect immediately? -- update: I tried 8 hours later and it still is not working so I assume caching is not the issue.
It seems like the CORS file specified above should allow everything through, no? I've looked through the Chrome documentation on CORS and Google but I can't seem to find any good answers. Has anyone dealt with this issue before?
Thanks!
Kevin
Update: Here's the Response Headers I get from the image request to Amazon:
Date:Thu, 18 Oct 2012 04:52:40 GMT
ETag:"9848ce610c994521295d8aa38b47bab9"
Last-Modified:Thu, 18 Oct 2012 04:19:45 GMT
Server:AmazonS3
x-amz-id-2:Govue0tJg5MLYedr/l7T2RU5RApXLZBwJ8p507hS+sLGqxYojRnVKqj4jRHRZsZ6
x-amz-request-id:F4FF5B669C3156D2
Even though, this is 4 month old question, i would like to help others who fetched S3, CORS and HTML canvas issues by putting here a reference to a working solution.
Amazon S3 will send Cross-Origin headers only if was explicitly asked for (see CORS specs). It means that the client must ask for them explicitly in the HTTP request. The expected behavior is that the client will specify the host-name inside the "Origin: host-name" header in the request, and the server will check if it should share the resources with the specific origin name. What is important to understand here, if your client is a Web-Browser, it will not send this header for no reason.
This is the way how the Cross-Domain ajax requests works. Recently support added for some other resources like fonts and images.
Images:
HTML5 added Cross-Origin support for images in HTML tags and Javascript... Use the crossOrigin attribute on images and the browser will fetch the resource as a Cross-Origin resource (it will add the Origin header to the HTTP request) link to the original post.
The crossorigin attribute is a CORS settings attribute. Its purpose is
to allow images from third-party sites that allow cross-origin access
to be used with canvas.
read more on MDN
i also fetched similar issue, if you can rely on HTML5 support on the client side, use that solution!
Related
I called https://graph.microsoft.com/beta/deviceAppManagement/mobileApps/<id>/<LOBType>/contentVersions/<content_version_id>/files, and received the azureStorageUri from it, but when I try to upload something into it (splitting the file into chunks), I always get 403 CORS not enabled.
I add $comp=block&blockid=<base64 block id> to the received uri.
My header is:
'x-ms-block-type': 'BlockBlob'
The exact error I receive is:
<Error>
<Code>CorsPreflightFailure</Code>
<Message>CORS not enabled or no matching rule found for this request.
RequestId:ce3ea3a7-f01e-0068-24b5-2c0795000000
Time:2018-08-05T12:10:00.6698414Z</Message>
<MessageDetails>No CORS rules matches this request</MessageDetails>
</Error>
Seeing as I always get the CORS issue, I tried enabling it by following this page, but, when making the request, again I receive the same CORS error.
I'm running it in my browser, if it's any help.
I'm kinda stuck and don't know how to proceed now. I'd be happy for any help. Thanks! :)
Edit: When I make the same request via Postman, it works just fine.
I'm kinda stuck and don't know how to proceed now
If you want to send a cross-origin request successfully, the request must match the CORS configuration including the request origin, headers & response headers. By default, CORS is disabled for each service. You could add the CORS setting for storage service. We could get more information about CORS from this article.
Note: CORS is not supported for Premium Storage accounts.
We could set it from Azure portal.
You can also use the wildcard character '*' to allow all origin domains to make requests via CORS.
I have a link to an mp3 on amazon s3 (the aws mp3 is set to public)
The audio player runs fine.
But when I try to make a visualizer, as soon as I connect to the audioplayer there is a CORS error. I don't understand why this should be so.
I have been using the MDN sample for analyserNode as the basis
https://developer.mozilla.org/en/docs/Web/API/AnalyserNode
<audio id="audio-player-console" src="${AWS_songUrl}" autoplay>
<p>Your browser does not support this audio player </p>
</audio>
Just to clarify, so long as no attempt to connect for analyserdata, the audioplayer runs the tracks without problem.
If I add crossorigin="anonymous" to the audio tag then I get nothing at all and the audio player won't play the track
<audio id="audio-player-console" src="${AWS_songUrl}" crossorigin="anonymous" autoplay>
<p>Your browser does not support this audio player </p>
</audio>
My AWS CORS configuration after 'make public' has been set
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
Here is where I try to connect the audio tag to the audiocontext for a visualizer, which is one it starts failing the CORS check
canvasCtx = visualizerCanvas.getContext("2d")
audioCtx = new (window.AudioContext || window.webkitAudioContext)()
var audioSrc = audioCtx.createMediaElementSource(aPlayer)
var analyser = audioCtx.createAnalyser()
audioSrc.connect(analyser)
analyser.fftSize = 2048
var bufferLength = analyser.frequencyBinCount
var dataArray = new Uint8Array(bufferLength)
analyser.getByteTimeDomainData(dataArray)
I just don't know what I can do. I have set the AWS config to public, allow all origins and all headers
I eventually figured out what to do after hours and hours of research and experimenting. There is very little documentation, as of this writing, available online showing how to do this. I hope people will find this helpful.
Understanding CORS:
CORS is an acronym for Cross Origin Resoruce Sharing. CORS is a new standard for sharing/accessing information between different domains. CORS basically is a method of using server headers to tell the browser if it is permitted to access or interact with a specific file on another server. While you can load most things without worrying about CORS (like images, audio, videos, and even other web pages), interaction with these elements requires special permission from the server. In my case, I was attempting to read frequencies from an audio file on another server. In this instance, I was attempting to access information which required authorization from special headers on the server.
Browser support is very good but, if you are supporting older browsers, you may want to see support tables here (http://caniuse.com/#search=cors)
What I did:
Enabled the use of .htaccess (I think you can accomplish the same thing with apache2.conf or 000-default.conf but .htaccess files are much easier to edit and maintain). These files are used to set headers and settings for apache. I enabled the use of .htaccess files by going to /etc/apache2/ and edited apache2.conf. Make sure your entry matches the following:
<Directory /var/www/>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
I set the headers in my .htaccess file to allow access from Codepen. Create a .htaccess file in the same directory as the file you want to share. You only want to share what you have to or you might create a security risk. Type this in your .htaccess file:
Header set Access-Control-Allow-Origin: "http://websiteWantingToAccessYourFile.com".
Save your file.
Restart Apache with this command sudo service apache2 restart. Enter your password if prompted.
With the audio, I added the crossorigin="anonymous" attribute. You can read more about CORS settings (crossorigin) here (https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) I imagine you can set this with ajax and xhr requests.
Different versions of apache may have different file names or standards. Check to make sure this is correct for your version. I am running Apache 2.4.18 on my Ubuntu server.
Please tell me if this can be improved. I have spent a lot of time understanding this but I am not an expert. Post your questions or suggestions in the comments. :)
Whenever I set the crossorigin attribute on an image firefox don't render the image.
<img crossorigin="anonymous">
I'm using fabric.js wich sets this attribute for me via JavaScript. I need to be able to render cross origin images. It works fine in Chrome and even IE. It seams as if Firefox previously have had some problems with CORS and I'm not sure if it's related, but I can seem to find any solutions to the problem.
Since I am using a PHP proxy I have set the the headers:
header("Access-Control-Allow-Origin: *");
This works fine in Chrome and even IE.
So do any of you know why the image is not displayed; not even in the img tag? I've sent a bug report but in the mean time maybe someone knows a workaround?
Long shot here, not certain if this will help you at all.
Perhaps Firefox needs certain headers to load cross-origin data/images?
In case you work in apache/unix environment, you can try to add the following in your htaccess, and see if it helps you in any way.
# Send the CORS header for images when browsers request it.
#
# https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
# https://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
<FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$">
SetEnvIf Origin ":" IS_CORS
Header set Access-Control-Allow-Origin "*" env=IS_CORS
</FilesMatch>
</IfModule>
</IfModule>
In case you need to "read" image data from another domain, make sure they issue cors headers
I could be wrong, but in my experience FabricJS does not set the crossOrigin attribute. In my app, I'm setting this manually. But maybe I'm doing it wrong...
One other thought is that I believe the attribute is case sensitive - the 'O' should be capitalized. In your example above it is all lower case.
Mozilla (the maker of Firefox) has a very detailed explanation on how to use this as well.
https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
Lastly, as has been said elsewhere, including the point #andrew is highlighting, the domain that serves the image needs to set the Access-Control-Allow-Origin header. If this is not set by the server that hosts the image, your canvas will always be tainted. If you control that server, then follow #andrew's suggestion (for Apache) or other examples for other server platforms and ensure the header is set. You can verify it is set via the network panel of the developer tools or a packet sniffer.
Please let us know what you find to be the solution to this - CORS can be tricky and confusing, particularly in Fabric and Canvas, and more solutions on the web to the solutions is very helpful to those that need some guidance.
I have correctly setup S3 ( I believe so !! ) because other images, and webfonts are correctly loading from S3. However, in my HTML design, I have this -
<svg><use xlink:href="assets/img/i.svg#i-facebook"></use></svg>
Somehow, it is not loading on all browsers ( I have tested on Chrome and Firefox ). On chrome it gives a error atleast, firefox dismisses it silently.
I have just found one similar resource - https://github.com/jonathantneal/svg4everybody/issues/16.
How to get past this issue.
After a number of days looking into this, there is NO SOLUTION to this in the way we imagine that SVG <use> tag should work with CORS.
It is a feature that browser developers are waiting for from the SVG Working Group.
Generally speaking this is normally because Cross-Origin Resource Sharing (CORS) has not been enabled on your S3 bucket.
You can find a walk-through to enable it here. Check the part headed with "How Do I Enable CORS on My Bucket?".
the following code fixes the problem
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod> <!-- optional line -->
<MaxAgeSeconds>3000</MaxAgeSeconds> <!-- optional line -->
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
the easiest way could be https://s3browser.com/ , Buckets > CORS configuration ..paste the XML code, that's it
I keep getting "Resource interpreted as other but transferred with MIME type text/javascript.", but everything seems to be working fine. This only seems to be happening in Safari 4 on my Mac.
I was advised to add "meta http-equiv="content-script-type" content="text/javascript" to the header, although that did nothing.
The most common way to get the error is with the following code:
<img src="" class="blah" />
A blank url is a shortcut for the current page url, so a duplicate request is made which returns content type html. The browser is expecting an image, but instead gets html.
i received this error due tu a missing element which a jquery plugin tried to call via js var btnChange i commented the none needed (and non existent) images out and the warning (google chrome dev tools) was fixed:
$(mopSliderName+" .sliderCaseRight").css({backgroundImage:"url("+btnChange.src+")"});
The (webkit-based) browser is issuing a warning that it has decided to ignore the mimetype provided by the webserver - in this case text/javascript - and is applying a different mimetype - in this case "other".
It's a warning which users can typically ignore, but a developer might find useful when looking for clues to a problem. For this example it might explain why some javascript wasn't being executed.
Your web server is sending the content with a certain MIME type. For example, a PNG image would be sent with the HTTP header Content-type: image/png. Configure your web server or script to send the proper content type.
It does cause issues if your are calling a javascript that adds functionality, it is likely to fail, as it does for me. No real answers yet.
I was getting this error due to a script with bad permissions bringing up a HTTP 403 error. I gave it read and execute rights across the board and it worked.
There is a setting for the Apache MIME module where it misses adding the type for javascript, to resolve it, simply open the .htaccess file OR httpd.conf file, add the following lines
<IfModule mod_mime.c>
AddType text/javascript .js
</IfModule>
Restart the apache server, issue will be resolved.