I'm using rackspace to host my image files that are drawn on an html5 canvas object. Because of an HTML security feature when saving a canvas I have to use CORS (Cross Origin Resource Headers) to make save work.
I have tested my code on Chrome, IE with Chrome Frame, and Firefox, and none of them give me a security error after I added to the image request headers:
Access-Control-Allow-Origin: *
and I have added the following attribute to all the images drawn on to the canvas
crossOrigin = "anonymous"
However, for some reason Safari still gives a security error.
SECURITY_ERR: DOM Exception 18: An attempt was made to break through the security policy of the user agent.
Any thoughts as to why this is happening on safari(desktop 5.1.7, and ipad) versions? I have checked the documentation and everything I have read says that Safari 4+ supports CORS?
Safari 5.2 in beta solves the problem. So it looks like Safari does not yet support cors for images in released versions. The same goes for iOS safari
Related
I am developing a react app that loads images from a public s3 bucket, this has been working consistently for months. Today I upgraded to google chrome 76 and instead of loading the images it just returns a blank.
The same effect was seen on a number of machines.
Interestingly the request for the image returns 200 but there's no image shown. If I visit the S3 url link manually the image is visible.
I was wondering if it could have anything to do with this forum post and new security measures introduced in the new version of chrome?
Here's a snippet of the content security policy we have for image requests
<meta
http-equiv="Content-Security-Policy"
content="img-src * 'self' blob: data:;"
/>
Is there anything I can do to get these images loading again?
I have got to the root of this and it seems like this was a CORB issue. Which must have been updated slightly in the new v76 release.
What was happening is that, when we were uploading the images to S3, we weren't explicitly setting the Content-Type header in the upload request. S3 then was incorrectly deriving the Content-Type as application/x-www-form-urlencoded. So when we tried to GET the images and load them into an img tag, Chrome saw this as invalid (understandably) and then blocked them.
Interestingly, the images have been loading in with the wrong content type fine up until now and I wasn't shown any CORB warnings until I started uploading new images.
Useful article on CORB for developers
Stack Overflow Article that helped:
How to change content type of Amazon S3 objects
Hope this helps!
Using Firefox 45.8.0 ESR on Windows.
Trying to load https://secure.scheduleonce.com/dana
The page doesn't load, and in the network panel I see a crossed padlock icon instead of green padlock icon for this request:
OPTIONS https://cfproxy.scheduleonce.com/get-data/GetLandingPageLayout
When floating over the padlock I see the following message:
The connection used to fetch this request was not secure.
The page loads fine on Chrome / Safari / IE and even more recent version of FF.
Is there any way to debug what's wrong with that request to resource exactly ? FF doesn't give me any information as to what went wrong.
I suspect it might be related to the fact it's a preflight CORS request (the requested domain is different than that hosted page domain).
Attaching HAR file of the network : https://www.dropbox.com/s/i59k66a2w8p3ast/Archive%2017-09-10%2007-06-15.har?dl=0
Can be viewer here: (https://toolbox.googleapps.com/apps/har_analyzer)
Thanks.
Problem was with the cipher suite choice on the server.
I used this site to change it:
https://mozilla.github.io/server-side-tls/ssl-config-generator/
To support older browsers as well.
I don't know what was in FF 45.8.0 ESR that made it not respect the security of the server.
As in case of Google Chrome browser Google Chrome CSP
There are whitelisting of origins -
Currently, we allow whitelisting origins with the following schemes:
blob, filesystem, https, chrome-extension, and
chrome-extension-resource.
Is there any listing of such origins for Firefox. We are trying to write an add on for Firefox which will need to load as an iframe.
I currently get following CSP error when I am trying to load a frame.html read from my addon XPI resources. Its a frame which then loads the actual frame.
Content Security Policy: The page's settings blocked the loading of a
resource at data:text/html;
iframe with chrome-extensions:// as the path works for Chrome browser nothing like that is available for Firefox. (atleast I am unable to trace such a thing)
Please give us some suggestion if we can do a path to get iframe extension working.
On Firefox data:, blob: and filesystem: are subject to CSP. Use chrome: or resource: instead.
update:
Apparently this approach will not work with the Add-on SDK, probably due to sandbox restrictions.
I am helping migrate a legacy application. One of the requirements is we are able to handle requests for old images.
What we have is:
New site on new.com
Old site on old.com
Images to links (imported content) point to /imgs/cat.png however the actual image is hosted on old.com/assets/images/cat.png (for now).
<img src="/imgs/cat.png"/>
I setup a redirect for all png, jpg, jpeg, gif that 302's requests for new.com/imgs/(.*).(png|jpg|jpeg|gif) to http://old.com/assets/images/$1.$2
Everything works find in Chrome, Firefox and IE9 - however it was noted in IE8 the image does not render. Its possible that it has the same issue in IE7, 6 and 5.5 however I have not been able to test this.
Does anyone know why this is happening and how to fix?
I tried setting the contentType header on the response of the 302's to image/(png|jpg|jpeg|gif) and this did not have any impact.
Any insight would be appreciated.
Turns out the host that the images were served from was not a Trusted Site in IE, where as the host that served the page was. Normally youd see a popup asking if you wanted to accept an untrusted resource, however because this was a 302 redirect (original img URL was to the trusted, but 302'd to untrusted) IE never showed the popup.
Within a Cocoa application I have a webview. When Google's personalized home page loads I get the following message caught by the WebViewDelegate:
Unsafe JavaScript attempt to access frame with URL http://www.google.ca/ from frame with URL http://www.ig.gmodules.com/gadgets...
Is there a setting that I set to make this error go away? It doesn't seem to cause any actual problems, but should be resolved.
That sounds like an issue on Google's end, I don't think there's anything you can do there. It means that an iframe with www.ig.gmodules.com loaded is trying to request something from www.google.ca, which according to the browser is a cross-domain request. If Google wanted to allow that they'd need a crossdomain.xml allowing the requests.