Is there any way to crop a photo using client side JavaScript only?
When I tried searching for such a tool, the JavaScript part always uses DHTML to simply allow the user to select which area of an image to crop and then sends that information to a server side script (e.g. ASP, PHP) to actually perform the crop.
I realize that JavaScript can't create files or request them, however I think workarounds should be possible. As far is input, I want the JavaScript file to take in a URL of an image. This is simple and you can easily create an <image> element to display it. As far as output, I was hoping for a data URI solution.
Several solutions exist, however, when I try using them (http://jsfiddle.net/sfjsfid/skm6V/1/), I get the error:
Uncaught Error: SECURITY_ERR: DOM Exception 18
The reason this happens is because the specification states that this error must be generated when you request an image from a different domain than where the page is hosted.
Is there any other way to have a pure client side JavaScript solution of cropping images which can come from a different domain?
If I try using a data uri instead of an image from a different domain (http://jsfiddle.net/VX2z2/), it works correctly. However, to be able to use a URL to an image as the input, I would need to convert it to a data URI somehow. Using a canvas won't work because of the security issues I have already discussed. Even if I find a web service which I could use, it wouldn't work either because then I would be sending an Ajax request to an external domain, which is another security risk that is blocked by the browser.
Hosting my own version of a web service or hosting server side code is not an option.
Any other ideas? Or is the only option to accept a data uri as the input?
If you want to break the security model, you'll need to do something other than a web application -- like a Firefox extension, for example. This would give you additional privileges for making requests, even saving the image.
There's no way to work around the security model. You need server-side help to request data from a different domain and access it from JavaScript.
Related
I was embedding some large images with react query to provide a loading effect on slow connections when I encountered this CORS issue I did not understand.
I'm not getting why it's no problem for the browser to import resources from external servers when the request is performed in the HTML. For example, this is a valid image fetch: <img src={"https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.svg"}/> it gets rendered with no problem.
When performing the same fetch from javascript, you get CORS to block your response. For example: fetch("https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.svg"); will be blocked.
They are both GET requests, and inspecting the response headers on the network tab they look the exact same.
Is it a desired browser behavior? If so, how is it a safety feature?
If not, how to get around this, in order to fetch simple requests?
Is it a desired browser behavior? If so, how is it a safety feature?
Keep in mind that the image might not be generally available. It could be password protected, or on a company intranet. Consider a hypothetical popular Intranet application that has a common URL that displays internal company financial data on a graph.
When you use fetch the image data is made available to JavaScript. The JavaScript can then do whatever it likes with the image, including sending it to the person who wrote the JavaScript. That hypothetical financial data would be leaked.
When you use an <img> element, the image is just displayed in the page and the user can see it. The security problems are low and JavaScript can't access the data in the image.
Adding a crossorigin attribute to the <img> would let JavaScript access the data in it … and would also require permission from CORS before the image could be displayed.
If not, how to get around this, in order to fetch simple requests?
Grant permission with CORS or fetch the image with code that isn't running client-side in a browser.
I'm using a javascript scripting engine for a MUD i'm playing, they have a javascript client hosted on their server. I'm wanting to store some information in a database and access it from the client (or inject it somehow into the client) but I'm not seeing how I could do that.
Basically I can write javascript files into the trigger section of the website and they fire. It has Javascript and JQuery options. It does not have a database option on their end, which is why I'm trying to add it myself.
I know client side javascript has a lot of restrictions on it, so I'm not sure how far I could really go with this.
I think you might be able to do this, but it's going to be hacky.
If you're able to attach a script node to the dom, you can trigger GET requests with no origin restrictions wherever you want. You would do that to your own backend.
You would have to throw away all good practices and use GET requests with a lot of query params so send data to that (your) backend.
You would have to write the backend so that it does whatever you want with the data, e.g. store it in the db.
You would have to make sure you return valid js to the client, even if it's only to dismiss it.
Alternatively...
you could load an iframe to a site you control, and change the iframe src with the data, and then do with the data whatever you want (like sending it to some bakcend of yours properly) in your site (that's loaded in the iframe) by detecting changes in the url...
I am writing a JavaScript application where I plan on host the code on a CDN. Now I plan to include this code to my clients' sites. However, I have a problem, I want to use AJAX to communicate between the client and the server. Now, from my understanding of XSS, this is not possible.
Ex:
User visits site.com, where a script tag's source is pointing to a file on cdn.somedomain.com
The script on cdn.somedomain.com fires an event.
This event will communicate with a PHP. I know it is possible for the script from cdn.somedomain.com to request documents on site.com. However, is it possible to send data back to a PHP file on cdn.somedomain.com?
Thanks for helping an entrepenuer! :D
The short is I think this is possible, but it depends on a couple of things. The same origin policy is a weird thing in that it won't allow cross domain reads, but will allow cross domain writes.
I think a way you could accomplish your goal is by making a GET request (minimally by creating an iframe, img, or whatever else that pulls a src) or possibly even using AJAX. If your goal is to only send data, then that should be fine. However, if you want to read this data back then I think that'll be a little less straight forward. I can't really answer that right now - especially without knowing more details about your system setup.
Sounds like a weird use of a cdn. Normally cdns serve static assets, so you wouldnt put a php file there. In fact the cdn wouldnt normally run dynamic server side code at all.
You can address the problem in several ways. Newer browsers support CORS and cross domain ajax. The cdn would then have to use the Access-control-* headers. You could also look at something like easyXDM, which works in older browsers.
I just want to know how to get images from other web page and show in my website.
Case flow is:
Type some page URL in text box and submit
Collect all images in that web page (not in entire site) and show them in my webpage
So, you need to get images from page, and the input data is thh address of that page. Well, you have two solutions:
I. If this is functionality for your site which others will use, then plain JavaScript is not enough, because browser's privacy policies block getting such data from other pages. What you need in this case is to send the URL to a script on your server, which will download that page, parse it for s and return you the list of image srcs.
How exactly to do this is a pretty complicated question, for it depends on your site's serever-side programming language. Anyway such functionality would consist of client side javascript using AJAX techniques and server site script (e.g. php). Client script which is pretty much straight-forward.
On client side your js has to:
1. Get desired URLs
2. Send them to server
3. Wait for server's response (which contains srcs of images on desired page)
4. Create img tags with srcs which you got from server script
Keywords for this to google are, for example, AJAX, XmlHttpRequest and JSONP (sorry if you already know that :)
On server side your (php|ruby|python|perl|brainfuck) has to:
1. Get page URL from javascript code at step 2
2. Download a page by that url
3. Parse it looking for img tags and their srcs
4. Send list of srcs (in XML, JSONP or any other form) back to client
II. If you need to get images from other pages only for your personal use, you can write an extension for your browser. This way doesn't require any server side scripts.
If you want do scrape other websites with javascript, you should create a server side script which can act as proxy or you can use YQL.
Here's my answer for cross domain ajax call with YQL,
Cross Domain Post method ajax call using jquery with xml response
First of all check for Copyright. Copy only if the image is provided by the owner for free use. Also read and understand the license of usage.
If the image is free to use as stated by the owner under license then download the image and then use it. Also, please don't forget to keep copy of the license and the website url from where you downloaded the image.
Download and then use is suggested so that if tomorrow the other website shuts down then your website remains unaffected.
Last but not the least, try to design/ shoot your own images. Even if they are not as good as others at least they are genuine.
I'm working on an online app to manipulate images.
It works fine when doing it with local files (on the server) but as soon a I try it with another source it breaks.
The reason for this seems to be a security limitation, qoute from whatwg:
Whenever the getImageData() method of the 2D context of a canvas element whose origin-clean flag is set to false is called with otherwise correct arguments, the method must raise a SECURITY_ERR exception.
So I wonder can I get around this somehow?
The images will all come from a google API, and I really want to skip saving the images if i can.
Thanks.
Since you probably don't have access to the server(s) where the source images are being pulled from, your best bet is to proxy the files through your server.
Essentially, you send an AJAX request to your server with the URL of the image you want data from. Your server receives the request and asks for the image on your behalf. When it obtains the file, it then base64 encodes it and sends the data back to you. Since the image data is just a string, you can create an image object out of it and manipulate it via a canvas without worrying about the originating domain.
If you're willing to use jQuery, there's a great plugin that will do exactly this located here: http://www.maxnov.com/getimagedata/
I've used this particular plugin before with excellent results. I will note that you should (must) host the proxy server code on your own server. You can use the author's appspot account, but it's limited to some number of queries per day and frequently runs out. The author explains how to host the proxy code yourself here: http://www.maxnov.com/getimagedata/#using-your-own-server