I'm using HTML5 canvas and the .toDataURL() function through KineticJS's .toDataURL() method. The canvas uses images that my users uploaded to the site, which are stored on a different machine and subdomain farm1.domain.com.
Problem: When .toDataURL() is called, I get the error
SECURITY_ERR: DOM Exception 18
Is there a way around this? I also get the same problem if the user access the page via domain.com and the image is hosted at www.domain.com.
Attempt:
I added the following lines to httpd.conf within virtualhost and restarted the apache service.
Header add Access-Control-Allow-Origin "http://www.domain.com"
Header add Access-Control-Allow-Origin "http://domain.com"
Header add Access-Control-Allow-Origin "http://farm1.domain.com"
I still get the same error when accessing image hosted on www.domain.com from page on domain.com! Is there a way around this in KineticJS?
You will need to add the Access-Control-Allow-Origin headers to the images you are loading, not to the page which is loading them. For details on this header, and on CORS in general, you may want to read "CORS isn't just for XHR", which specifically discusses this issue.
There is no way around this error. Images loaded in a canvas from a different domain will raise this error as currently implemented by every browser. In your case the images should be stored in the same domain and you would not be getting exceptions.
Related
I'm trying to utilize IPFS to load static content, such as images and javascript libraries, on a dynamic site loaded on the http protocol.
For example https://www.example.com/ is a normal web 2.0 page, with an image reference here https://www.example.com/images/myimage.jpg
When the request is made on myimage.jpg, the following header is served
x-ipfs-path: /ipfs/QmXXXXXXXXXXXXXXXXX/images/myimage.jpg
Which then gets translated by the IPFS Companion browser plugin as:
https://127.0.0.1:8081/ipfs/QmXXXXXXXXXXXXXXXXX/images/myimage.jpg
The problem being, is that it has directed to an SSL page on the local IP, which won't load due to a protocol error. (changing the above from https to http works)
Now, if I were to request https://www.example.com/images/myimage.jpg directly from the address bar, it loads the following:
http://localhost:8081/ipfs/QmYcJvDhjQJrMRFLsuWAJRDJigP38fiz2GiHoFrUQ53eNi/images/myimage.jpg
And then a 301 to:
http://(some other hash).ipfs.localhost:8081/images/myimage.jpg
Resulting in the image loading successfully.
I'm assuming because the initial page is served over SSL, it wants to serve the static content over SSL as well. I also assume that's why it then uses the local IP over https, rather than localhost in the other route.
My question is, how do I get this to work?
Is there a header which lets IPFS companion to force it to load over http? If so, I'm assuming this would cause browser security warnings due to mixed content. I have tried adding this header without luck: X-Forwarded-Proto: http
Do I need to do something to enable SSL over 127.0.0.1, connecting this up with my local node? If so, this doesn't seem to be the default setup for clients, and worry that all the content will show broken images if they do not follow some extra steps.
Is it even possible to serve static content over IPFS from non-IPFS pages?
Any hints appreciated!
Edit: This appears to effect the Chrome engine and and Firefox.
Looks like a configuration error on your end.
Using IPFS Companion with default settings on a clean browser profile works as expected.
Opening: https://example.com/ipfs/bafybeigdyrzt5sfp7udm7hu76uh7y26nf3efuylqabf3oclgtqy55fbzdi redirects fine to http://localhost:8080/ipfs/bafybeigdyrzt5sfp7udm7hu76uh7y26nf3efuylqabf3oclgtqy55fbzdi which then redirects to unique Origin based on the root CID: http://bafybeigdyrzt5sfp7udm7hu76uh7y26nf3efuylqabf3oclgtqy55fbzdi.ipfs.localhost:8080/
You use custom port (8081), which means you changed the Gateway address in ipfs-companion Preferences at some point.
Potential fix: go there and make sure your "Local gateway" is set to http://localhost:8081 (instead of https://).
If you have http:// there, then see if you have some other extension or browser setting forcing https:// (check if this behavior occurs on a browser profile, and then add extensions/settings one by one, to identify the source of the problem).
I actually don't know the right title for this question, because of I've found many similars but still couldn't figure the solution out.
My problem is that (on Chrome) the website I've working on remain showing console log: XMLHttpRequest cannot load http://resource.domain.com/file.css. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.my-site-url.tld' is therefore not allowed access.
I've tried to allow that resources via .htaccess files using this code.
<FilesMatch "\.(jpg|jpeg|png|gif|js|css)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin http://wp.com,http://ajax.googleapis.com,http://fonts.googleapis.com,http://zor.fyre.co
Header set Access-Control-Allow-Credentials true
</IfModule>
</FilesMatch>
Doesn't work. I've also tried php and jsonp version.
Anyone please help me to fix this issue.
Additional info:
Lately, in inspect elements > Networks > Headers section, I found this message:
Your issue most likely stems from the fact that you are trying to load content from an external domain, which is prohibited in a normal json call hence the No 'Access-Control-Allow-Origin' error. The technique you may need is known as JsonP. I would link the documentation; however, it really can depend on the javascript framework you are using. I recommending reviewing this post for a walk-through on how to invoke this behaviour via normal JS. https://stackapps.com/questions/891/how-to-call-the-api-via-jsonp-in-plain-old-javascript
Hope this helps!
I've got some issues regarding images and secure access to the cloud (S3, in this case).
I do want to have direct access to avoid stressing my server so I do have two options:
1.) Generate a signed url on my server and send it back to client to load from
2.) Generate an Authorization-Header sent within the request from the client
Now, 1. & 2. work just fine, however, I am in trouble regarding images in html.
For 1.), images will be re-requested each time as the url changes every time and thus renders caching useless.
For 2.), caching would work as the url'd stay constant though I've seeked the net to figure how to add a custom http request header to image request including my security token without luck.
So, what options are left for me? How do others resolve that issue?
thanks
Alex
I am using the following example of a map in my webpage. (obtained from an answer in this other question) The source code of both is practically the same, but I can't make the titles of the locations in the sidebar to appear in the page hosted in the client server. (they can be viewed in the original page)
¿Do you know if here is any problem of compatibility or if I can add any extra code to make it work?
This is the example page:
http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmltest_linktoB.html?filename=http://www.geocodezip.com/xmlProxy060215.asp?https%3A%2F%2Fmaps.google.com%2Fmaps%2Fms%3Fhl%3Den%26ie%3DUTF8%26oe%3DUTF8%26authuser%3D0%26msa%3D0%26output%3Dkml%26msid%3D216330649072490208011.0004daf6e6bfde8dd857d
This is the page in the client server (I only removed the example buttons, but even with them the information is not showing):
http://www.vitrocar.com.mx/orchard/media/map.html?filename=http://www.geocodezip.com/xmlProxy060215.asp?https%3A%2F%2Fmaps.google.com%2Fmaps%2Fms%3Fhl%3Den%26ie%3DUTF8%26oe%3DUTF8%26authuser%3D0%26msa%3D0%26output%3Dkml%26msid%3D216330649072490208011.0004daf6e6bfde8dd857d
Using a proxy on my server:
http://www.geocodezip.com/xmlProxy060215.asp
Defeats the purpose and will not work. You need to have the proxy on your server.
The proxy is used to overcome the cross-domain restriction on XmlHttprequest (XmlHttpRequest is used by geoxml3 to access the remote KML, it can only access XML in the same domain as the website).
I have the same problem with this post context.getImageData() on localhost?, but instead of localhost I am working on a https site so this provokes the problem with the canvas. It there a solution for this case?
These problems arise when you are trying to get data from images loaded across different domains.
One way to solve this (if you are the one in control of serving the images) is by enabling CORS (Cross-Origin Resource Sharing). What this does is basically add an Access-Control-Allow-Origin header to the served image.
You can read all about it in http://www.w3.org/TR/cors/. Your use case is described specifically in http://www.w3.org/TR/cors/#use-cases, section "Not tainting the canvas element".
There is a great resource for understanding how to enable CORS in http://enable-cors.org/. If you're running an apache instance, the easiest way is to use a .htaccess file to enable the headers.
However, if you are not in control of the served images, then you may need to ask permission to use them and probably copy them to your own server.