I'm a newbie in web programming.
I'm now kind of stuck and lost.
Lets say that I have a content server (video). A client request a video from the server and a html page display the video on the client's web browser. At the same time, some data from the client have to be send to ANOTHER computer, which act as network monitor - lets say it has a database where the data will be stored into.
My questions are:
1.Let say that i'm using javascript to grab the data (i.e IP address), how do I send that data to the network monitor ? Or if it is not possible, is there any other method?
2.How do I build the network monitor?
I really need some hints and tips to kick start and to make sure that I learn the correct things. Any useful links will also be appreciated.
Thanks! =D
You can send data to any server you want using a form and submit it to the url you set with action.
<html>
<head></head>
<body>
<form action="http://the-other-server.com" method="post" target="theIframe">
<input type="hidden" name="data" value="{your:'data_here'}" />
</form>
<iframe name="theIframe" style="display:none"></iframe>
<script>
document.getElementsByTagName('FORM')[0].submit();
</script>
</body>
</html>
But the SOP prevents you to read the information from another server(with a different protocol, sub-domain, domain or port). For instance get the response of your POST above.
To read the content of another domain you need to use a technique called JSONP
EDIT: Or if you target modern browsers (> IE8), you can use parent.postMessage from an iframe of another origin to exchange string data with the main page.
And finally if you have to support older browsers, you can still use the window.name Transport hack passing data through the window.name property of an iframe
Related
Firstly I am a newbie and I want a code for Fetching html string from another webpage and use it in my own webpage let me explain briefly by Dummy Examples.
Mysite.com/A.html
<body>
<!---My Script Goes here--->
</body>
XYZ.COM/B.html Another site
<body>
<form id="Form1" action="https://test.com/" method="Post">
Some Text or Something Else</form>
</body>
I want to get or extract action attributes value I.e. https://test.com of XYZ.com/B.html by Script of Mysite.com/A.html page with using only javascript. So I can render it by my use.
Plz help I am frustrated of this.
<form> is for forms, not for fetching. If you wanna show some webpages inside your webpage, use <iframe> If however you wanna fetch strings of another website. Then you'll have to learn something called Web Scrapping, or Web Crawler.
1, post, you just can set you from action to https://test.com/B.html, when submit the form data will post to test.com and page will redirect to as well
2, Fetching html string, by default user can't read the data from other domain. if test.com no own by you, you need hack the test.com web server, add the HTTP header named: Access-Control-Allow-Origin
see https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
BTW: if you just want get the text for you self, you just can use tool for post the data by HTTP protocol, then read the response, for example:
POST /B.html HTTP/1.1
Host: test.com
Content-Type: application/x-www-form-urlencoded
...
I've read quite a few posts here asking roughly the same thing, but usually the person asking has access to the remote site and can use the methods available to achieve this. My situation is a bit different, and I just wanted to see if it was possible before spending time and effort trying to get it to work.
The site that I am trying to access is remote, I have no access to it in anyway, and it's only accessible from a computer logged into OpenVPN.
The tool that I am writing is trying to get the results of a form submit from the remote site. I don't want to parse the results or modify it in anyway. I just want to display the page with the Post Data sent. The remote site uses AJAX for the form submit.
It's code is as such:
<form name="MyForm" action="response_normal.php" method="post" onsubmit="xmlhttpPost('response_ajax_v2.php', 'MyForm', 'response', '<img src=\'pleasewait.gif\'>'); return false;">
Upon submitting on that page, three values are sent:
site : radio1
search : 000000000000
submit : Search Site
Is it possible at all for me to simply send that post data to the page and display it? I am hoping to do this in an iframe - since I can't do it server side due to VPN restrictions.
Since the computer you're accessing your offsite server from is on the VPN that has access to the remote system (and assuming this remote system is under your control), you could have the offsite server return some JavaScript that AJAX-pulls the data–in this case, a full HTML page–it needs from the remote system using a JSONP-like strategy.
I have used this technique for some small projects in the past.
From there, you are free to do with the data what you will–modify it, return it as is, or otherwise.
Personally, I would avoid the use of frames if possible. Of course, when strapped for time, nothing is off limits ;)
However, if the remote system IS NOT under your control (and they don't have a kickass CORS cross-access policy), your only option is, as you said in the body of your question, frames. Here is an example:
<!-- If the remote system is NOT under your control, it CANNOT respond with the X-Frame-Options header set to SAMEORIGIN or DENY! -->
<iframe id="inlineframe" src="http://www.randomwebsite.com" frameborder="0" scrolling="auto" width="800" height="300" marginwidth="5" marginheight="5" ></iframe>
//Depending on the JS you put here, you may get some "unsafe Javascript" warnings from certain browsers
~function()
{
var frame = document.getElementById('inlineframe'),
ref = frame.contentWindow ? frame.contentWindow.document : frame.contentDocument;
// ref is now a reference to the document of the content within the iframe
// You can now do your getElementById/getElementByTagName etc. and otherwise
// manipulate the response as you please.
console.log(ref);
}();
A working example can be found here: http://jsfiddle.net/FTudJ/
The contents of the iframe should be the submitted results of the remote page, or whatever the remote server responds with. If you're not looking to modify anything, then you don't even need the Javascript component.
The key will be the URL you specify as the source of the iframe. Now, if the remote system doesn't support GET requests for form submissions (in your example code I see a "POST" method), coupled with the fact that you have no control over it and your offsite system can't access it in any way, your only other options are:
Instead of supplying the form's submission URL directly, simply supply the form's typical access URL to the iframe. From there, use JavaScript to populate the form with the necessary values, and then submit the form within the iframe as if you were the user. From there, you can scrape the results back into JavaScript or simply display them as is.
Find a way to get your offsite server into the VPN network so that it may communicate with the remote system on your behalf. Of course, if that were easy, I guess you would have done that first!
Redirect your users to the remote site–possibly using a frameset + banner frame like Google used to do, let them do what they need to do there, and then tell them to come back when they're finished.
--
I see that you're using PHP. As long as the server that is executing the PHP has access to the VPN that has access to this remote system–all over traditional HTTP–a simple curl call from the server-side should suffice, as you can use AJAX to pass through the results to the client.
These links may be of some assistance:
http://php.net/manual/en/book.curl.php
What is cURL in PHP?
http://php.net/manual/en/curl.examples-basic.php
Post data and retrieve the response using PHP Curl?
My company has a setup as follows:
subdomain1.domain1.com
subdomain2.domain1.com
subdomain3.domain1.com
subdomain4.domain1.com
subdomain5.domain1.com
subdomain6.domain1.com
subdomain1.domain2.com
subdomain2.domain2.com
subdomain3.domain2.com
subdomain4.domain2.com
subdomain5.domain2.com
subdomain6.domain2.com
On each site, bearing in mind there can be a hundred sites per subdomain, users can log in. We, as developers, have to test frontends across several browsers, but some work may only be required on a section once logged in.
I have written a userscript which enables us to save a username and password (and other details which I cannot mention because of confidentiality). The script checks to see if the user account exists by filling in the login form and clicking the submit button. If not, it registers for us - thus automating the registration process.
Sharing cookies between subdomains on the same domain is easy. If I am on subdomain1.domain1.com I can save a cookie which can be retrieved by subdomain2.domain1.com. However, I would also like to save these for domain2. I do not appear to be able to get this to work.
I can see two solutions from here - either:
1) attach an iFrame using the userscript, which loads a site on domain2. This then uses the querystring to decide what to set to what, or;
2) use a form with method="POST", and simply post to a file on each domain.
Either way will be resource intensive, particularly if the cookies are updated each time a cookie changes. We also have URL masking in place. So we'd also have to take into account sites like abc.clientdomain1.com, abc.clientdomain2.com etc.
Does anyone know of an easier way to do achieve this?
This answer is a slightly different version of my answer on the question "Set cookie on multiple domains with PHP or JavaScript".
Do what Google is doing. Create a PHP (or any other server language file) file that sets the cookie on all 3 domains. Then on the domain where the login is going to be set, create a HTML file that would load the PHP file that sets cookie on the other 2 domains. Example:
<html>
<head></head>
<body>
Please wait..........
<img src="http://domain2.com/setcookie.php?user=encryptedusername"/>
<img src="http://domain3.com/setcookie.php?user=encryptedusername"/>
</body>
</html>
Then add an onload callback on body tag. The document will only load when the images completely load that is when cookies are set on the other 2 domains. Onload Callback :
<head>
<script>
function loadComplete(){
window.location="http://domain1.com";//URL of domain1
}
</script>
</head>
<body onload="loadComplete()">
Now cookies are set on the three domains.
Source
Create a common domain specifically for your cookies and use it as a getter/setter API.
http://cookie.domain.com/set/domain1
http://cookie.domain.com/get/domain1
http://cookie.domain.com/set/domain2
http://cookie.domain.com/get/domain2
and so on.
Include a script tag from domain2 that sets the cookie using a username and hashed password:
<script type="text/javascript" src="http://domain2.com/cookie_login_page.php?username=johnsmith&hash=1614aasdfgh213g"></script>
You can then check to ensure that the hashed passwords match (one way).
Key points:
Make the hashes in the URL time sensitive by appending a timestamp that will be agreed upon by the server (for example, 16:00, 16:10, etc) before hashing the string. If you're using HTTPS this is less of an issue.
If your passwords are already hashed, it wont hurt to double-hash the passwords assuming the salts are the same on both servers.
Sample PHP code:
src:
<script type="text/javascript" src="/cookie_login_page.php?username=<?php echo $username; ?>&hash=<?php echo md5($password . date('H')); ?>"></script>
dest:
<?php
$password = get_password($_GET['username']);
if($_GET['hash'] == md5($password . date('H')) {
// set the cookie
}
For security reasons, sites cannot set or retrieve cookies on other domains. Scripting the form submit via javascript is likely the easiest to do, and will still store the cooikes you need in the browser cache.
As stated by others, you can't access cookies across domains. However, if you have control of the server code, you can return information in the body, and allow your client to read and store that information per server.
In my case, I'm connecting a single client to multiple servers, maintaining an authenticated connection to each one. I need to know when the session for each one is going to expire, so the authentication service returns the cookie, plus it modifies the body of the response to send the relevant data back, so that I can read that data and set my own cookies.
By doing this, I can manually track what I need. Won't work in every scenario, but might for some like me.
I need to redirect a user to an external site though a POST request.
The only option I figured out is to do it submit a form through JavaScript.
Any ideas?
It's not quite clear what you mean, so let's take a few scenarios:
User should POST form to a server other than your own
Easy, just specify the target as the form action:
<form action="http://someotherserver.com" method="post">
User should be redirected after a successful POST submit
Easy, accept and process the POST data as usual, then respond with a 302 or 303 redirect header.
User should POST data to your server and, after validation, you want to POST that data to another server
Slightly tricky, but three options:
Your server accepts the POST data and while the user waits for a response, you establish a connection to another server, POSTing the data, receiving a response, then return an answer to the user.
You answer with a 307 redirect, which means the user should attempt the same request at another address. Theoretically it means the browser should POST the same data to another server. I'm not quite sure how well supported this is, but any browser understanding HTTP1.1 should be able to do it. AFAIA it's not used that often in practice.
PS: The specification says that a 307 POST redirect needs to be at least acknowledged by the user. Alas, apparently no browser is sticking to the spec here. IE simply repeats the request (so it works for your purposes), but Firefox, Safari and Opera seem to discard the POST data. Hence, this technique is unfortunately unreliable.
Use technique #1 combined with hidden form fields, adding one step in between.
See here for a list of all HTTP redirection options: http://en.wikipedia.org/wiki/Http_status_codes#3xx_Redirection
Javascript is the only way (to do it automatically). You simply can't redirect a POST request via standard http methods. Are you sure that GET isn't an option here?
Just set HTML form's action URL to the particular external site.
Here's an SSCCE, just copy'n'paste'n'run it:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2604530</title>
</head>
<body>
<form action="http://stackoverflow.com/questions/2604530/answer/submit" method="post">
<textarea name="post-text"></textarea>
<input type="submit" value="Post Your Answer">
</form>
</body>
</html>
You'll see that Stackoverflow has good CSRF protection ;)
Using a form is probably your only option as links, HTTP redirects and <meta http-equiv="refresh" > will only cause the browser to load another URL using the GET method.
You don't necessarily have to use JavaScript to submit a form though. If some user interaction is acceptable you could use a form with some <input type="hidden"> fields and let the user press the submit button.
You may also want to ensure that the page you're redirecting to doesn't already accept GET parameters. Some scripts accept both GET and POST indiscriminately.
Here's the problem:
1.) We have page here... www.blah.com/mypage.html
2.) That page requests a js file www.foo.com like this...
<script type="text/javascript" src="http://www.foo.com/jsfile.js" />
3.) "jsfile.js" uses Prototype to make an Ajax request back to www.foo.com.
4.) The ajax request calls www.foo.com/blah.html. The callback function gets the html response and throws it into a div.
This doesn't seem to work though, I guess it is XSS. Is that correct?
If so, how can I solve this problem? Is there any other way to get my html from www.foo.com to www.blah.com on the client without using an iframe?
It is XSS and it is forbidden. You should really not do things that way.
If you really need to, make your AJAX code call the local code (PHP, ASP, whatever) on blah.com and make it behave like client and fetch whatever you need from foo.com and return that back to the client. If you use PHP, you can do this with fopen('www.foo.com/blah.html', 'r') and then reading the contents as if it was a regular file.
Of course, allow_remote_url_fopen (or whatever it is called exactly) needs to be enabled in your php.ini.
There is a w3c proposal for allowing sites to specify other sites which are allowed to make cross site queries to them. (Wikipedia might want to allow all request for articles, say, but google mail wouldn't want to allow requests - since this might allow any website open when you are logged into google mail to read your mail).
This might be available at some point in the future.
As mentioned above JSONP is a way around this. However, the site that you are requesting the data from needs to support JSONP in order for you to use on the client. (JSONP essentially injects a script tag into the page, and provides a callback function that should be called with the results)
If the site you are making a request to does not support JSONP you will have to proxy the request on your server. As mentioned above you can do this on your own server or what I have done in the past is use a http://www.jsonpit.com, which will proxy the request for you.
One option is to implement a proxy page which takes the needed url as a parameter. e.g. http://blah.com/proxy?uri=http://foo.com/actualRequest
JSONP was partially designed to get around the problem you are having
http://ajaxian.com/archives/jsonp-json-with-padding
JQuery has it in their $.getJSON method
http://docs.jquery.com/Ajax/jQuery.getJSON
The method shown above could become a large security hole.
Suggest you verify the site name against a white list and build the actual URI being proxied on the server side.
For cross domain hits this is a good working example and now is considered as some what "standard" http://www.xml.com/pub/a/2005/12/21/json-dynamic-script-tag.html.
there are other ways as well, for eg injecting iframes with document.domain altered
http://fettig.net/weblog/2005/11/28/how-to-make-xmlhttprequest-connections-to-another-server-in-your-domain/
I still agre that the easy way is calling a proxy in same domain but then it's not truly client side WS call.