HTML/CSS/JS: Can an invisible form intercept (hijack) user input? - javascript

I heard someone mention that one could theoretically position an invisible iframe on top of content and receive the input that someone wants to put in a form. How would this be possible and not get suspicion? It scares me...

Yes it is possible! It's called clickjacking, and is very real indeed. Check this out for more information: http://en.wikipedia.org/wiki/Clickjacking
Michal Zalewski, of Google, has a theoretically example (Source: Page 1, Page 2):
A malicious page in domain A may
create an IFRAME pointing to an
application in domain B, to which the
user is currently authenticated with
cookies," Zalewski said in a message
to a mailing list on Thursday. "The
top-level page may then cover portions
of the IFRAME with other visual
elements to seamlessly hide everything
but a single UI button in domain B,
such as 'delete all items,' 'click to
add Bob as a friend,' etc. It may then
provide [its] own, misleading UI that
implies that the button serves a
different purpose and is a part of
site A, inviting the user to click it.

It's not possible to do this without drawing suspicion, someone will always notice. If you're not a standard user, I would recommend you try downloading noscript (a firefox plugin). It prevents any website not on your personal whitelist from running javascript. This should alleviate a lot of your worries! I hope! I know it makes me feel better.

In the realm of possibilities, there are many stupid ideas. :-)
Theoretically, you can hijack a form and place a region that captures input. This is not a simple exercise, as you need to mimic the form or have the user step outside of the security box of the browser. It is far easier to phish with a look alike form than do this.
I see someone mentioned clickjacking, which hijacks the click event. Overall, this is different from the form capture, although it could be used to cover a button once a form was filled in. Once again, there it is similar to a phish attack, as you are hitting their site. Without this misdirection, they can't inject the JavaScript necessary to make this work.
What is your real concern? That someone can hit your site and be hijacked without another site on top? Unlikely. That people can be fooled. Well, PT Barnum taught us there is one born every day.

Related

How can I disable a website using jQuery or similar?

I have a website that has merged with another. It is a high ranking website so instead of using a redirect or similar I would like to keep the website online as is so that it does not affect SEO.
I want it so that when users visit the website it appears grayed out and a central box is shown with a message saying that the website has moved to www.newsite.com and they are not able to click any buttons etc. on the page.
Is it possible using jQuery or similar?
This is possible with jQuery modal, but to be quite honest your best bet really is to issue a permanent redirect (301) to the new site. You can likewise go to each of the major search engines and use their webmaster tools to indicate the site has moved. Your SEO ranking might dip briefly but the search engines really do recognize the fact that sites and content move these days, and the ranking won't be permanently affected.
You could do this however you like. JavaScript is probably not needed here. Create a simple modal, and style it in such a way that it looks how you have envisioned.
There are jQuery plugins to do this kind of thing, but honestly that's going to be more work to hook up and create more overhead than you would just making your own.
If you need some CSS help to accomplish this, let me know and I'll update my answer.
You can hide Everything in body and append a div and style it like an modal or something as you like
$(document).ready(function(){
node = $("<div id='modal'>Site has been Moved moved etc.. </div>")
$("body").append(node);
$("body *").not("modal").hide();
});
css
#modal{
/*style modal here */
}
Doing what you say will likely damage the SEO, however is possible with some simple css an jquery as long as the user has scripting active. CSS and HTML can achieve the majority of what you want without the need for Jquery or scripting.
A properly implemented 301 redirect will ensure google maps across and acknowledges the movements of pages from one domain to another. BUt you need to do this properly.

Best practice for tracking in page javascript interactions w/ Google Analytics

I have a question regarding best practice for a Google Analytics implementation.
I have a website that has static pages, on which there are several opportunities for javascript interaction. I'm interested in what the best practice is for tracking these interactions.
For Example: There is a button that prompts a modal where users can join a mailing list. On this modal, there is another button for users to submit their email address. I want to know how many people click the prompt button, and how many people continue to submit their email address.
To my knowledge there are two approaches on this--
Events - Trigger an event when the modal is prompted, and a second event when the information is entered and submitted.
Pageloads - Programatically trigger a pageload for each modal dialog.
If I use events, I can track the activity, but don't have access to good funneling tools when I set up conversions. There is the 'Event Funneling Report', but it doesn't give me to give the other correlation tools available with conversions.
I do have access to conversion funneling if I trigger pageloads, but the interactions are not pageloads, and I don't want to skew my other traffic metrics.
What is the best thing to do in this scenario? Thanks!
I too wish GA would expand on event tracking to allow the funnels to be more like the page view funnels. I have yet to see any real argument about why they can't.. But there's no real best practice for this other than going with the limitation you are more willing to deal with.
A couple of suggestions though:
If you go the page load route, prefix it w/ something unique e.g. "~events/..." something that wouldn't normally be a page on your site, so that you can more easily filter them out of your normal pages report. Alternatively, setup a view with a filter that excludes your virtual page name (e.g. "~events/..") so you can see your traffic without it and not have to worry about filtering it out in the reports. Alternatively, create a segment that does the same. None of this offers a perfect solution but it does somewhat help making it less crappy :/
If you go the event route, also pop a custom variable. help as far as creating a funnel but does open up looking at it through those reports.

Is automatically assigning focus bad for accessibility?

If I have a form that is the main part of a page's content, will assigning focus to the first form field via JavaScript on page load have any negative effects on accessibility?
The short answer is no it doesn't make things inaccessible but it can make it confusing. The longer answer follows. Will your users know that there going to a page with a form, and does there need to be any descriptive text you should read before filling out the form? I'm a screen reader user and it can be annoying having focused put in random fields. It's clear why your focus winds up in the Google search box so that doesn't bother me. If my focus were automatically placed in the answer edit field every time I viewed a question on Stackoverflow I would be annoyed since I'd have to force my screen reader to navigate away from the form field and to the top of the page.
It might a bit, if we've got a keyboard user (either using a screen-reader, or just a habitual keyboard user) who's expecting to be navigating the links at the top of the page on first Tab press. For screen readers, you could also consider adding WAI-ARIA to add directions if users who don't expect to be dumped into the middle of a form.
If it's much more likely that the user's going to be wanting to type in the field straight away, then I think the autofocus is worth it. But for the reason above I wouldn't use it on every page with an input field.
If you do autofocus, make sure to do it right away, in a script as soon as possible following the input element, or in future using the HTML5 autofocus attribute. Don't do it as late as window.onload. It's annoying to have clicked the focus elsewhere only to have the document belatedly finish loading and steal the focus onto another element as you type.
A lot of sites will do this, google is a good example, the only issue is when you are typing something into the address bar, or into the search input in your browser, the action of focusing the form field tends to steal focus from where you are typing. It's a small nuisance.
will assigning focus to the first form field via JavaScript on page load have any negative effects on accessibility?
I can't think of any. In between fields might irritate whatever assistive software a user might be running, but the first field - hardly. I have no experience with braille and similar clients.
Seeing as even Google do it on their front page, I don't think it can be that big a deal either way.
Quoting MDN autofocus -> accessibility considerations (retrieved 9/28/2022):
Automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments. When autofocus is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.
Use careful consideration for accessibility when applying the autofocus attribute. Automatically focusing on a control can cause the page to scroll on load. The focus can also cause dynamic keyboards to display on some touch devices. While a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content.
To add some practical examples, at the time of writing, https://www.google.com autofocuses on the search box, while Wikipedia and Amazon don't. If typing into a search box is the sole purpose of the page and the risk of confusion is low, then it's worth considering autofocusing on it. Otherwise, probably skip autofocusing.
I wouldn't say so, fragments are an ingredient of HTTP and they set the focus of an *html page..
I wouldn't say so. A screenreader will probably not even notice this since it doesn't interpret the JavaScript on the page.
Another user which has a "normal" browser will get the advantage of having the cursor already at the right place which facilitates the navigation by using just the keyboard.

Use jQuery to append star to menu item if the linked page's content has changed since last visit

I would like to create a similar effect to Apple's Safari 4 Beta Top Sites page -
when when you view it and a page's content has changed since you last visited, it displays a blue star in the top right hand corner to notify you.
I would like to do the very same, but only within my website and instead of an image I would like to append a '*' or some other character to the menu item's link.
I'm sure you would use the jQuery Cookie Plugin, but my scripting is not that advanced and I do not know how to dynamically change the cookie's content. Have I explained properly? How would I do it?
Many thanks in advance
Server side:
Read the website f.ex every minute and save the timestamp if changed content.
Save the users' visit timestamp to the page
Ajax:
Check if the websites update timestamp is newer than your visitors' timestamp, if yes make the star class visible, when the user clicks on the link, make the star disappear and update the users timestamp.
--
Showing a star or an image or whatever with Jquery is not the big deal here, it's a oneliner, the complex problem is to detect website changes, because minor changes can occur, but the main content could not change. The easiest way to do this would be if the website provides rss, then there's probable that the important new content will be published via rss.
You're asking a very vague question. Have you even attempted this? Please try it first then ask for help along the way.
Also, this is not something you necessarily need jQuery for. You could do it completely on the backend. But it's hard to say which solution is best for you without know anymore details.
I guess I would recommend using php and storing the cached page into a db (in other words the user would have a "fav pages" account) then when the user visits the "fav pages" webpage, you would fetch all the users favorite pages and compare it to what has been stored in the db. But for certain pages (for example if they have a date/time string), it would be very difficult to tell if the change was something the user wants to know about. Probably you would need to create a complex algorithm to decide what change is good change and what change is just certain website features.

Preventing the loss of keystrokes between pages in a web application

My current project is to write a web application that is an equivalent of an existing desktop application.
In the desktop app at certain points in the workflow the user might click on a button and then be shown a form to fill in. Even if it takes a little time for the app to display the form, expert users know what the form will be and will start typing, knowing that the app will "catch up with them".
In a web application this doesn't happen: when the user clicks a link their keystrokes are then lost until the form on the following page is dispayed. Does anyone have any tricks for preventing this? Do I have to move away from using separate pages and use AJAX to embed the form in the page using something like GWT, or will that still have the problem of lost keystrokes?
Keystrokes won't have an effect until the page has loaded, javascript has been processed and the text field is then focused.
Basically what you are really asking is; how do I speed up a web application to increase response times? Your anwser is AJAX!
Carefully think about the most common actions in the application and use AJAX to minimise the reloading of webpages. Remember, don't over-use AJAX. Using too much javascript can hinder usability just as much as it can improve it.
Related reading material:
Response Times: The Three Important Limits - Great article from the usability king, Jacon Neilson.
Ajax Usability Mistakes
AJAX Usability Checklist
Perhaps I am under-thinking the problem but I'll throw this out there... You could just put your form inside a hidden div or similar container that you show (perhaps give it a modal look/behavior?) on the click event of the link. That way the form is already loaded as part of the page. It should appear almost instantly.
You can find modal div tutorials all over the place, shouldn't be too tricky. If you're using ASP.NET there's even one included in Microsoft's AJAX library.
AJAX or plugin are your only chances.
I think it will be quite hard to do what you want. I presume that the real problem is that the new page takes too long to load. You should look at caching the page or doing partial caching on the static components such as pictures etc. to improve the load time or preloading the page and making it invisible. (see Simple Tricks for More Usable Forms for some ideas)
For coding options you could use javascript to capture the keystrokes (see Detecting various Keystroke)
<html><head>
<script language=javascript>
IE=document.all;
NN=document.layers;
kys="";
if (NN){document.captureEvents(Event.KEYPRESS)}
document.onkeypress=katch
function katch(e){
if (NN){kys+=e.which}
if (IE){kys+=event.keyCode}
document.forms[0].elements[0].value=kys
}
</script>
</head>
<body>
<form><input></form>
</body>
</html>
You will need to save and then transfer them to the new page after control passes from the current page. (see Save Changes on Close of Browser or when exiting the page)
For some general info on problems with detecting keystrokes in the various browsers have a look at Javascript - Detecting keystrokes.

Categories

Resources