I want to have a form on my page take user input, a URL to be precise, and once that field is complete, have the script go to the destination URL that was entered (in the background), and display all images on that page in a thumbnail view for the user to select. I have been able to get it to work using php but want a client side solution. Any suggestions?
JavaScript is restricted by the same origin policy. It will not be able to read the other site unless it supports CORS. Other option is to use a local proxy [serverside langauge] on your domain to fetch the content.
Client side solution would be tricky. Most browser don't allow cross-domain AJAX calls.
Take a look at http://en.wikipedia.org/wiki/Same_origin_policy
Related
We want to get the html content of a page on another domain. The following considerations are present:
1- The login page has a I am not a robot recaptcha.
2- The load of page in iFrame is restricted.
3- Could not use jQuery get or load methods because of cross domain restrictions.
With these limitations is it possible to develop a crawler or even use some client side codes to get data?
Thanks
Actually.. NO
But you can take the help of a backend server.
Let the server download the page and send it to the client.
This would solve problems related to CORS restrictions.
Coming to the captcha part, if the page operations are restricted by the captcha, then again there aren't much you can do. If it was that easy, the captcha wouldn't be used in the first place.
I'm attempting to create an app with Node.js (using http.createServer()) which will be a single page application with requests for data via XMLHttpRequest. To do this I need to be able to differentiate between a user navigating to my domain, and AJAX requests and requests generated by the browser for linked resources.
If the request is from the user I always want to return the index.html page which will handle requesting content but if the request is browser generated or AJAX and is for CSS, Javascript or other linked files I want to serve those files. Is there any way to detect this?
Looking at the request headers for the different file types I saw the referer header appeared when the request for content was generated by the page. I figured that was the solution I was looking for but that header is also set when a user clicks on a link to the page making it useless.
The only other thing which seems to change is the accept header which could sort of work but might not be a catch all solution. Any user requests always seem to have text/html as the preferred return type regardless of which url was entered. I could detect that but I'm pretty sure AJAX requests for html files would also have that accept header which would cause problems.
Is there anything I'm missing here (any headers or properties I can look for)?
Edit: I do not need the solution to protect files and I don't care about users bypassing it with their own requests. My intention is not to hide files or make them secure, but rather to keep any data that is requested within the scope of the app.
For example, if a user navigates to http://example.com/images/someimage.jpg they are instead shown the index.html file which can then show the image in a richer context and include all of the links and functionality to go with it.
TL/DR: I need to detect when someone is trying to access the app to then serve them the index page and have that send them the content they want. I also need to detect when the browser has requested resources (JS, CSS, HTML, images, etc) needed by the app to be able to actually return the resource not the index file.
In terms of HTTP protocol there are NO difference between a user-generated-query and a browser-generated-query.
Every query is just... a query.
You can make a query with a command line, with a browser, you can click a link, send some ascii text via telnet, request a proxy which will make the query for you, the server goal is never to identify how the query was requested by the user.
See for example a request made by a user on a reverse proxy cache, this query will never reach your server (response comes from the cache), the first query made to build this response could have been made by a real user or by a browser.
In terms of security trying to control that the user is never requesting data by-himself cannot be done by detecting that the query is a real human click (and search google for clickjacking if you want to be afraid). Every query that a browser can make can also be played by the user, every one, you have no way to prevent that.
Some browsers plugins are even doing pre-fetching, detecting links on the page and making the request before you do it yourself (if it's a GET query).
For ajax, some libraries like JQuery will add an X-Requested-With: XMLHttpRequest header, and this is used on most framework to detect ajax mode.
But it is more robust to depend on a location policy for that (like making your ajax queries with a /format/ajax, which could also be used on other ways (like /format/json, /format/html, or /format/csv).
Spending time on a location policy based routing is certainly more usefull.
But one thing can make a difference, POST queries are not indempotent, it means the browser cannot make a POST query without a real user interaction, because a POST query may alter the state of the session or the state of the server data (but js can make POST queries, this is just a default behavior of browsers). The browser will never automatically retrieve a POST query, so you could make a website where all users interactions are POST queries (via forms or via some js altering link clicks to send POST ajax queries instead). But I'm not that's your real goal.
Not technically an answer to the question but I found a simple solution which does what I want: prefix all app based requests with a subdomain eg. http://data.example.com/. It's then really simple to check the host header for that subdomain: if present send the resource else send the index page.
I am currently looking into a couple of possibilities for a microsite that I am building. The microsite sits on a different domain to the main site, and we want to use some of the forms from the main site. However we don't the user to see the main sites thank you page for a form submission.
My question is, is it possible to submit the form on the microsite to the action of the main sites form, so essentially I am wanting to submit a form that is set on http://domain1.com to http://domain2.com.
Will I able to this due to cross-site scripting etc?
You are fighting with http://en.wikipedia.org/wiki/Same_origin_policy.
Possible solution will be using a local proxy like http://developer.yahoo.com/javascript/howto-proxy.html
Using plain AJAX this is not possible, no.
You'd need to use a local proxy of some kind to achieve this. The form should submit it's data to a server side script on the same domain. That script should submit the data (using cURL or the like) to the remote location and give any response back to the form.
What you are trying to do is possible, but with some restrictions. Newer browser support cross domain ajax using the x-access-control-allow-origin etc. headers.
You could also use cross domain messaging (see CORS). To get backwards compatibility with older browsers, easyXDM is an option.
Another option is to build a hidden iframe, create a form, and send the data there using a normal for with action pointing to the other domain.
Remember though that Cross Site Request Forgery may be a problem. How do you stop other sites from posting to that same url.
You should be able to do this by placing the link to the action of mainsite in the microsite form. Also you can achive it via ajax, by sending call to the url of the mainsite and fetching results.
What would be a good way to upload the html content of the current page viewed in the browser to another server from a bookmarklet?
Assuming this url is on a server that requires authentication, so I want to avoid fetching the page on the sever side, but rather would like to see if it's possible to get the contents and upload them directly from within the browser.
Thanks in advance for any suggestions
Elisha
Considering that you are most probably going to have a situation in which the page being viewed in the browser is on a different domain from the domain you want to send the data to, an AJAX request will definitely fail (due to Cross-Domain restrictions). So doing this server side would be your best bet.
Retrieve location.href with XHR into string
Create FORM with desired cross-site action
POST data to server
?????
PROFIT!
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.