I've been asked to try and implement the ability to lock the entire website down when a user is moving around.
I am not concerned at this point about figuring how to find if a user has moved, that is not important right now. We are just wondering if its possible to prevent a user from using a website or browser, and have it locked down.
We are being told it's possible with a Opera on Android, however we are not sure how to find information about this. When I use prevent interaction, or prevent click, i get a lot of other things.
Can someone tell us straight up, if this is possible. (We are essentially trying to stop users from using the ASP.NET MVC 4 application while they are moving. Once they stop moving, control should be returned.
You could add/remove this with javascript. Of course, if you are looking for some more secure, you could do some server side checking with session variables, and redirect them based to a 403 page of some sort.
<div style="height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: 100000;"></div>
Related
I've searched for this specific issue here on StackOverflow and the various Apple/WebKit bug reporting systems but have yet to find it specifically cited (which just doesn't seem possible).
The problem:
On our payment page we have various form fields (inputs & selects). For PCI/security purposes we have an iframe that serves the credit card number field (the iframe only has that one field - nothing else).
The issue is that for just iOS users, they sometimes cannot put the focus on the credit card number field. There appears to be 2 different, but related iOS webkit bugs. See the UPDATE below.
If they simply navigate down from one field to another, it usually works. But if they bounce around fields, they can get into the scenario where try-as-they-might they cannot get the focus into the credit card number field it doesn't look like the credit card field gets the focus (appears to be a rendering issue).
Initially we thought maybe there was JS or some invisible DIV getting into the way, but I eventually was able to create an HTML-only example to recreate the problem. (Instructions on how to recreate the issue are on the example page.) Linking to codepen requires I include some code:
<iframe src="iframe.html"></iframe>
I've consistently been able to recreate this issue on iOS 10-12 devices (an iOS 9 device didn't seem to have the problem).
For posterity I'm going to supply the work-around I came across in a separate, but semi-related WebKit bug. However, I was wondering if others out there had stumbled upon this problem and discovered other work-arounds.
UPDATE:
After digging in further I've discovered we're suffering from 2 separate bugs. The first is mostly as I describe above, but seems to be more of a rendering issue where iOS doesn't look like it's putting the focus on a field. However, if you go to the codepen example new example I setup and follow the steps, even when it doesn't look like the field has the focus, if you type the text will render correctly.
The second problem is less likely to happen but is more detrimental. It requires 3 criteria to trip:
The iframe's source has to be cross-origin
Parent page is attaching an event listener to either touchstart, touchmove or touchend (even as simple as an empty function call)
The iframe’s field is off-screen when a different field has focus and the keyboard is present.
The result of these 3 things is that the user cannot place focus on the iframe field at all (typing goes nowhere although document.activeElement shows the last parent page input having focus). Reestablishing the ability to get the focus in the iframe can be difficult, generally need to have a parent page input that can be focused while the iframe field is visible then the user can move their focus to the iframe field from there.
If any of the 3 criteria is changed (not cross-domain, no event listeners on those 3 touch events or the iframe is visible), then only the first – less-prohibitive – bug is present.
I will update my "answer" below with this realization as well.
Update 2: The new example I put up shows both bugs in action; the first page is Bug #1 with a link to the cross-origin Bug #2 example.
Problem is resolved in my environment by adding #Ryan L's suggestion document.addEventListener('touchstart', {}); in the IFrame.
This is good as it's very simple to add and is specific to the IFrame, not affecting the container page.
Problem description: cannot 'touch' (select, edit) another form field on Safari running on iDevices (phone & pad) running iOS 12. This only happens on pages in an IFrame where the container page has added some touch events. Very obscure set of conditions that are difficult to debug.
I believe I have found a fix for this frustrating little bug, and like most bugs it's a super simple fix.
All that needs to be done is to apply a the following css to the input within the iframe.
input:hover {
cursor: text
}
Here's an updated example: https://codepen.io/ryanoutloud/project/full/AEKGjj
Now as to the bug itself, the focus is actually on the intended field and any entry from the keyboard will be registered properly. Once typing begins the caret jumps into proper position. The
issue I found with the ontouchstart="" solution is that it simply removes the caret from view entirely once focus is placed on a field.
Here's the work-around I stumbled upon: add ontouchstart="" to each of the form input elements (probably selects too).
This came from one of the work-arounds provided on this WebKit bug related to outer page click events not dispatching properly to an iframe (in the context of zooming).
I have not pushed this to production yet, but initial tests seem to indicate this works. I did have to put this on both the parent & iframe form elements to fully fix the problem. I'll probably leverage JavaScript to attach this to the form fields without needing to add the property to each form element.
Open to any other suggestions or concerns with this approach.
this work for me
document.addEventListener('keydown', function(e) {
window.focus()
$(':focus').focus()
});
We develop accounting system on a web with ASP.NET MVC and encountered this problem - if user is in the middle of the work and somehow manages to close browser all work is gone (and users are not geeks at all it did happen and will happen). Especially problematic at Chrome in Windows after they removed warning of closing tabs from philosophical reasons so now it will just shut down. We would like to be able to somehow catch this behavior. Also even when Firefox for example has warning that user is going to shut down his tabs - simple clicking the checkbox will remove it all again. So is it possible to keep track of this action to prevent user accidentally closing browser and lost all the work? Or is it even possible to do for example in Chrome? The solution would be simple warning window but it needs to show basically everytime if closing while our web application is alive. We don't want to keep session alive after closing browser for obvious security reasons. Also - it should work at Chrome, IE and Firefox. Thank you for your help.
you can try the below code:
window.onbeforeunload = function()
{
return "Are you sure you want to exit";
}
If your front end is using MVVM such as AngularJS or Knockout, or any of the other popular binding libraries, consider a different approach to preventing the user from quitting the page.
In a client-side interval, serialize your view model and store it in local storage.
When the save/exit condition for the current page is met, clear the local storage.
If the page is loaded again, and there is something in local storage, this means that on the previous session, the browser was closed before saving - so deserialize the local storage object back into the viewmodel (use a unique key per page) - you can combine this with some UI that tells the user that their previous state has been restored, click ok to continue or start over to start again (which would reset the viewmodel)
I should add that you'll have to watch out for multiple simultaneous tabs, so you may want to work around this by making the key unique somehow, e.g. creating two invoices simultaneously.
This essentially provides an auto-save but client-side only.
You can combine this technique with using window.onBeforeUnload as per Tejinder's answer, but as you cannot style the "unload confirmation" prompt, providing an auto-resume is a much better experience.
I have a Grails based web app which uses Spring Security to handle user logins etc. I have hit a bit of a block and am hoping the more experienced might be able to point me in the right direction for a solution.
The application has the concept of messages which can be sent from user to user to provide a instant messaging feature. There is a timed Ajax call that is present throughout the system which is used to alert the user of any new incoming messages.
My problem is that since I have implemented this, each time the ajax call is performed, of course the users session is being refreshed, therefore never timesout. So a manual 'log out' is the only way they can log out, whereas before expiry of a session would redirect them to the login page.
Does anyone know how I can still accomplish automatic logouts whilst still have the timer functioning?
I'm hoping I can set up some kind of filter with spring security, or perhaps there's an annotation I can use on the periodically called method to instruct it NOT to refresh the users session.
As always any help & comments are appreciated.
Thanks to Long for pointing me in a different direction with his comment, I believe I have now a much better, more intuitive user friendly solution.
Rather than trying to change things on the backend, I am using a little jQuery script which is very easily configured and fits in perfect with my app which already uses jQuery and the jQuery UI.
After a specific period, a jQuery dialog pops up, modally dimming the background and informs the user due to inactivity they will soon be logged out. A progress bar is displayed which reduces until it is empty at which point if the user hasn't click my 'Continue Working' button, then I change the window location to the spring security logout controller URL, taking them back to the sign in page. It works beautifully and is very easy to configure.
The instructions can be found here : http://kenbrowning.blogspot.co.uk/2010/04/are-you-still-there.html
Kudos to Ken Browning for his library.
I'd like to develop a voice chat application that would run inside of a web browser. My main concern is implementing push-to-talk functionality when the site doesn't have focus.
Say, for example, that the user is playing a video game, and they decide to press and hold the "C" key to indicate that they'd like to talk. I want my web application to respond to that, even though it wouldn't have focus at the time. Is this possible (using any language)?
I can't see any way of doing this without installing some client side functionality (such as an ActiveX component or similar) - a browser won't normall allow JavaScript or similar code to handle keypresses when the window is not active as this would be a security vulnerability.
It isn't necessarily impossible, but as of right now, it is.
Keyboard events target the currently-in-focus DOM element. Currently, all web browsers will remove focus from any DOM element when the browser is minimized, or when the user clicks outside of the page.
With the increased focus on web-app-support in modern browsers, this rule could theoretically change, but I haven't heard of any browser vendors considering it.
When you get a new badge on stackoverflow.com, a bar appears at the top of the screen informing you of your achievement. It sticks around until the user closes it.
I rather like that system of informing the user about new news related to the site or their account. It's fairly unintrusive, but still clearly communicates the information. Even if all users receive a notification this way, it sticks around for each user until they have acknowledged seeing it.
I'm running a system using Ruby on Rails on a PostGres database. What's the best way to implement a similar system on my setup?
Edit: Just to clarify, I'm interested both in the server side and client side of the setup.
The effect can be accomplished with jQuery and the slideDown method (http://api.jquery.com/slideDown/). Set an onClick event to make the element slideUp, hide, or hit an AJAX call to let you know that the user got the message and dismissed it.
You could set the contents of the element (I'd go with a div) via an AJAX call, or you could simply populate the div with the appropriate message when generating your page, start the div off as hidden, and then kick off the slideDown method when the page load is complete via a $(document).ready definition (http://think2loud.com/jquery-document-ready-howto/).
You could use something like the jquery popup bubble extension: http://www.farmcode.org/post/2009/04/06/jQuery-popup-bubble-extension.aspx