I was wondering if it is (easily) possible to update a webpage when there is an action on another webpage.
Example: I check a checkbox and on another webpage, which is already open, there need to be a change. This must be done instantaneously and the time must be as small as possible.
I do not have any code written yet, so i can't show anything.
My first thought would be to put the result of the checkmark in a database with javascript and check the database with ajax every 10 ms on the other webpage.
But i know this will be too slow for me.
Is there a better way to do this (relatively easy)?
No, that is usually not possible without both websites coming from the same domain, and that domain establishing communication between the two Javascript sandboxes run in these two windows.
The point here is that what you describe would be called a cross-site-scripting attack (short XSS attack) and is the security nightmare of every browser developer and website admin.
Related
I'm new to HTML and coding period. I've created a basic HTML page. In that page i want to create dropdown selections that produce outputs from my SQL database. MSSQL not MySQL.
EX: If I select a table or a column from dropdown one and then input a keyword for selection box 2. I want it to produce a table that shows the information in that table/column with that keyword.
If I select a medical name from dropdown and I want it to show only medical names that are equal to Diabetes. and then show me those rows from my database to a table. How would I show that in HTMl from connecting to the database, to creating the dropdown selection linked to the database, and then being able to select the criteria for what I want to be displayed. and then showing that in a table or list format.
Thank you in advance
OK, Facu Carbonel's answer is a bit... chaotic, so since this question (suprisingly) isn't closed yet, I'll write one myself and try to do better.
First of all - this is a VERY BROAD topic which I cannot answer directly. I could give a pile of code, but walking through it all would take pages of text and in the end you'd just have a solution for this one particular problem and could start from scratch with the next one.
So instead I'll take the same path that Factu Carbonel took and try to show some directions. I'll put keywords in bold that you can look up and research. They're all pieces of the puzzle. You don't need to understand each of them completely and thoroughly from the beginning, but be aware what they are and what they do, so that you can google finer details when you need them.
First of all, you need to understand the roles of the "server side" and "client side".
The client side is the browser (Chrome, Firefox, Internet Explorer, what have you). When you type an address in the address bar (or click a link or whatever), what the browser does is it parses the whole thing and extracts the domain name. For example, the link to this question is https://stackoverflow.com/questions/59903087/sql-drop-down-selections-in-html?noredirect=1#comment105933697_59903087 and the domain part of that is stackoverflow.com. The rest of this long jibberish (it's called an "URL" by the way) is also relevant, but later.
With the domain in hand the browser then uses the DNS system to convert that pretty name into an IP address. Then it connects via network to the computer (aka "server") designated by that IP address and issues a HTTP request (HTTP, not HTML - don't mix these up, they're not the same thing).
HTTP, by the way, is the protocol that is used on the web to communicate between the server and the browser. It's like a language that they both understand, so that the browser can tell the server hey, give me the page /questions/59903087/sql-drop-down-selections-in-html. And the server then returns the HTML for that page.
This, by the way, is another important point to understand about HTTP. First the browser makes its request, and the server listens. Then the server returns its response, and the browser listens. And then the connection is closed. There's no chit-chat back and forth. The browser can do another request immediately after that, but it will be a new request.
Now, the browser is actually pretty limited in what it can do. Through these HTTP requests it gets from the server the HTML code, the CSS code and the Javascript code. It also can get pictures, videos and sound files. And then it can display them according to the HTML and CSS. And Javascript code runs inside the browser and can manipulate the HTML and CSS as needed, to respond to the user's actions. But that's all.
It might seem that the Javascript code that runs inside the browser is all powerful, but that is only an illusion as well. It's actually quite limited, and on purpose. In order to prevent bad webpages from doing bad things, the Javascript in each page is essentially limited to that page only.
Note a few things that it CANNOT do:
It cannot connect to something that doesn't use HTTP. Like an SQL server.
It can make HTTP requests, but only to the same domain as the page (you can get around this via CORS, but that's advanced stuff you don't need to worry about)
It cannot access your hard drive (well, it can if the user explicitly selects a file, but that's it)
It cannot affect other open browser tabs
It cannot access anything in your computer outside the browser
This, by the way, is called "sandboxing" - like, the Javascript code in the browser is only allowed to play in its sandbox, which is the page in which it was loaded.
OK, so here we can see, that accessing your SQL server directly from HTML/CSS/Javascript is impossible.
Fortunately, we still need to talk about the other side of the equation - the web server which responded to the browser's requests and gave it the HTML to display.
It used to be, far back in the early days of the internet, that web servers only returned static files. Those days are long gone. Now we can make the webserver return -- whatever we want. We can write a program that inspects the incoming request from the browser, and then generates the HTML on the fly. Or Javascript. Or CSS. Or images. Or whatever. The good thing about the server side is - we have FULL CONTROL over it. There are no sandboxes, no limits, your program can do anything.
Of course, it can't affect anything directly in the browser - it can only respond to the browsers requests. So to make a useful application, you actually need to coordinate both sides. There's one program running in the browser and one program running on the web server. They talk through HTTP requests and together they accomplish what they need to do. The browser program makes sure to give the user a nice UI, and the server program talks to all the databases and whatnot.
Now, while in browser you're basically limited to just Javascript and the features the browser offers you, on the server side you can choose what web server software and what programming language you use. You can use the same Javascript, or you can go for something like PHP, Java (not the same as Javasctipt!), C#, Ruby, Python, and thousands of others. Each language is different and does things its own way, but at the end of the day what it will do is that it will receive the incoming requests from the browser and generate some sort of output that the browser expects.
So, I hope that this at least gives you some starting point and outlines where to go from here.
First of all there is something that you need to know to do this, and that is the difference between a front-end and a back-end.
Html is a front-end technology, they are called like that because that's what is shown to the user and the back-end it's all mechanisms that run behind the hood.
The thing is, in your front-end you can't do things of back-end, like do querys from a database, manage sessions and that kind of thing.
For that you need a back-end running behind, like php, ruby, node.js or some technology like that.
From the html you can only call functions on the server using things like <form action="/log" method="POST"> this wold call the action /log that you should have already program on your back-end. Don't get confuse with this, there is plenty of ways to sending request to your back-end and this is just one way to do it.
For your specific case I recommend you to look up for ajax, to do the query on your database with no need of the browser to refresh after the query is made.
Some topics you need to know to understand this is:
-what's front-end and back-end and their differences.
-what is client-server architecture
-ajax
-http requests
-how to work with a back-end, doing querys to the database, making routes, etc.
-and for last, wile your server it's not open to the world with your own domain name, what is localhost and how to use it.
I hope that this clarify a bit this, that is no easy thing, but with a bit of research and practice you will accomplish!
I know what autocomplete attribute is and how to use it, but I don't get the point of it!
I mean, why should I set autocomplete='off' as a developer?
Is there any security benefits in there? or something?
Yes, it's a security feature. Imagine this scenario:
Your website fell victim to a XSS attack (e.g. somebody was able to implant a piece of javascript in your page without your knowledge)
Your website also has username/password fields, and when a user enters the page, the malicious script immediately takes the values and sends them off to the attacker's server.
Granted, this is not strictly mitigated by disabling auto-complete, but at least it prevents userdata from being stolen just by somebody with saved data loading the page. It requires them to at least type in their credentials.
Also there is the rather obvious component of somebody gaining physical access to your machine and then being able to auto-complete their way into your accounts.
This all goes back to some of my original questions of trying to "index" a webpage. I was originally trying to do it specifically in java but now I'm opening it up to any language.
Before I tried using HTML unit and other methods in java to get the information I needed but wasn't successful.
The information I need to get from a webpage I can very easily find with firebug and I was wondering if there was anyway to duplicate what firebug was doing specifically for my needs. When I open up firebug I go to the NET tab, then to the XHR tab and it shows a constantly updating page with the information the server is updating. Then when I click on the request and look at the response it has the information I need, and this is all without ever refreshing the webpage which is what I am trying to do(not to mention the variables it is outputting do not show up in the html of the webpage)
So can anyone point me in the right direction of how they would go about this?
(I will be putting this information into a mysql database which is why i added it as a tag, still dont know what language would be best to use though)
Edit: These requests on the server are somewhat random and although it shows the url that they come from when I try to visit the url in firefox it comes up trying to open something called application/jos
Jon, I am fairly certain that you are confusing several technologies here, and the simple answer is that it doesn't work like that. Firebug works specifically because it runs as part of the browser, and (as far as I am aware) runs under a more permissive set of instructions than a JavaScript script embedded in a page.
JavaScript is, for the record, different from Java.
If you are trying to log AJAX calls, your best bet is for the serverside application to log the invoking IP, useragent, cookies, and complete URI to your database on receipt. It will be far better than any clientside solution.
On a note more related to your question, it is not good practice to assume that everyone has read other questions you have posted. Generally speaking, "we" have not. "We" is in quotes because, well, you know. :) It also wouldn't hurt for you to go back and accept a few answers to questions you've asked.
So, the problem is?:
With someone else's web-page, hosted on someone else's server, you want to extract select information?
Using cURL, Python, Java, etc. is too painful because the data is continually updating via AJAX (requires a JS interpreter)?
Plain jQuery or iFrame intercepts will not work because of XSS security.
Ditto, a bookmarklet -- which has the added disadvantage of needing to be manually triggered every time.
If that's all correct, then there are 3 other approaches:
Develop a browser plugin... More difficult, but has the power to do everything in one package.
Develop a userscript. This is much easier to do and technologies such as Greasemonkey deal with the XSS problem.
Use a browser macro technology such as Chickenfoot. These all have plusses and minuses -- which I won't get into.
Using Greasemonkey:
Depending on the site, this can be quite easy. Â The big drawback, if you want to record data, is that you need your own web-server and web-application. But this server can be locally hosted on an XAMPP stack, or whatever web-application technology you're comfortable with.
Sample code that intercepts a page's AJAX data is at: Using Greasemonkey and jQuery to intercept JSON/AJAX data from a page, and process it.
Note that if the target page does NOT use jQuery, the library in use (if any) usually has similar intercept capabilities. Or, listening for DOMSubtreeModified always works, too.
If you're using a library such as jQuery, you may have an option such as the jQuery ajaxSend and ajaxComplete callbacks. These could post requests to your server to log these events (being careful not to end up in an infinite loop).
Client has a dating site and would like to have a popup (either a nice javascript overlay or a new browser window popup. we're flexible.) displayed to users when another user is visiting their page.
I'm familiar with push technology and Comet but it's quite challenging to implement this and may place serious strain on a server with over 100,000 unique visitors per day.
I'm wondering if there is a way of faking this, perhaps by not being accurate to the second. I can't really think of any way.
This is a classic LAMP environment.
Anyone?
EDIT: what about this: placing an iframe on the page that refreshes every few seconds and at each page load it checks in the db if a visitor has been logged on this profile page. if so, it shows a message. the message would be visible but the background of the iframe would blend in with the background of the site and be invisible. if the message fades in and out, it would look like a JS box "popping up".
The only way to "fake" comet is via polling of some sort, which is always a possibility. An iframe, xhr, or jsonp request are all possibilities for performing said polling.
You might be better off purchasing a pre-built comet server (I'll recommend, of course, the one I helped build, WebSync for IIS/ASP.NET). If you're worried about the load, you could check out our On-Demand version where we'll host it for you.
Regardless, WebSync (or whatever other pre-packaged product you might check out) would scale to a hundred thousand users a day without much of a problem, and would potentially be more efficient than polling, since it would only hit your database when new users arrived, rather than every couple seconds; that said, if you keep the "check for new users" query simple enough, and a few seconds of delay is OK, the polling idea would be the "simpler" solution.
Check out http://en.wikipedia.org/wiki/Web_Sockets if you want to do real push. This isn't widely supported in browsers yet, but there are plenty of JavaScript and Flash libraries that provide it already.
Or a cheaper way is to record in your DB each page view.
Then when any user makes a web request, check in the DB if anybody has visited their page since their last web request.
If so, pop up your dialog.
This second way wouldn't popup anything if the user just left their browser sitting there, but if they were actively interacting with the site, it would achieve your goals very easily.
I would start with this second simpler solution, which is very easy to implement. If your client wants it more interactive, you can provide solutions and tradeoffs/costs for various options.
Gather statistics as to how many visitors that user's website gets per day, and then subdivide that, so that it's a percentage chance that the user will be told there is a user on his site (even if there actually isn't), based within the timeframe he's at the part where he can receive the popup. I think this is the closest you are going to get without having some sort of notification being sent.
You could do this to minimize server usage if you wanted push:
When a user visits a website, check and see if the person who would be getting the notification is online and capable of being notified, and if so, THEN do all the push stuff, otherwise forget it.
I am working on an application that will have online and offline components and would like to get some opinions on how I am planning to do this. Feel free to give me some tough love if this is a ridiculous idea as I would like to learn as much as possible with this :o)
Here are is an outline for what I am trying to accomplish...
Client portion does basic CRUD, but forms may change depending on what is in the online database.
Client portion can be used online or offline.
Client portion should be fairly easy to move from one machine to the next (ie I'd rather not have to set up a database on each client).
Server portion does not need to be synched in real time.
I'm considering making the client portion a series of HTML forms that read from and write to cookies. The forms will be generated using JS based on what is in the cookies. For example, a cookie may store things like a list of values that will be used in a select box on the form. When the forms are submitted they will write to cookies. The forms could be used to submit data that will likely change how the form is generated next time it is loaded... for example, I may have a form that will allow me to enter options that will be included in another form's select box.
The server portion will read these cookies, update the database and then update the cookies so that the forms are appropriately generated next time.
Does this sound nuts? Would I be better off looking in to something like Google Gears? Any tips, advice or ideas would be greatly appreciated!
Thanks in advance :o)
Unless the online/offline thing is what will distinguish your application, I'd let Gears handle this. The general advice is to focus your effort on the parts of the functionality that distinguishes you, and let libraries handle the rest—assuming they handle it in a way that is acceptable for your app.