im trying to build a nice blackhoneyholepotdoom and something that annoys me is the fact bots are able to go back and/or switch tabs. Their behavior is: 1) hit login link, fail, go back. 2) hit register link, fail, go back. 3) Either leave or proceed to try again. I assume this is Xr*m*r behavior? I need to interrupt the "go back" as much as possible to make bot hell on earth.
Besides JS, is there any method ya'll know of to open a link in a new tab/window whilst destroying the previous, or all the others? It could be a popup, iframe trigga top, whatever -- to my knowledge, bots dont care and never get past your header/content anyways.
This has terrible dubious implications if used on humans, hence it doesnt seem to exist -- but figured maybe there was a workaround out there. You can email or spam me at dhaupin at gmail dawt com if you dont wanna share here.
Thank you!
Related
Can I get hacked after writing something in the "console" part after clicking "inspect"? A YouTube video showed a person writing Runner.instance.gameOver = function(){}; in the dinosaur game's console part after clicking on "inspect". I did that (because this "hack" does not harm others) and the game did become easy. However, the day after that, I heard that console can be dangerous, can you please help me? I am VERY concerned.
tl;dr: Yes.
Pasting and running anything you don't understand from an untrusted source (i.e. basically everyone on the internet) is as bad in the console as it is anywhere else. In practice, someone malicious could trick you into Self-XSS, effectively hijacking your account on the current browser tab.
This is why e.g. Facebook injects a warning message whenever you open the console on their page:
That being said: If you know what you are doing, using the console is perfectly fine.
Runner.instance.gameOver = function(){};
The code is just replacing the method gameOver by a function what does nothing.
What this means? The original function what is designed to stop you playing when you lose, is no there anymore so you can't lose at all.
I'm adding a blocking modal (ie one that covers the screen and prevents interaction while an API call is processing) to my company's design library.
As part of that, I modified our modal so that clicking on the grey backdrop will NOT hide the blocking modal, but I want to make sure that doesn't violate accessibility guidelines. I haven't been able to find anything online about this. Does anyone know if this this violates accessibility requirements?
Short Answer
The answer is 'it depends'. Basically if the modal is not dismissable in any way it becomes a 'keyboard trap' and so would violate WCAG.
However if you structure it correctly a modal that blocks the page while an API loads is perfectly valid (and can't be dismissed while the page is loading), but there are a few things you need to do to make sure this is accessible.
1. Make sure that when this modal loads, nothing else on the page is focusable.
The biggest issue I see on most modals is that they allow focus outside of them.
You can't just stop users using the tab key as that is not how most screen reader users navigate the page (they use shortcuts for headings (h1-h6), hyperlinks etc.).
For this reason make sure your modal sits outside of your <main> and the hide your <main> and other major landmarks that contain information with aria-hidden="true" and by adding tabindex="-1" to them so nothing is focusable.
Obviously this depends on your document structure so you would need to test it, but a properly structured HTML document will work with the above method.
2. Make sure that a screen reader user knows that the page is busy and something is loading.
There are a couple of ways to do this. The best is to use an aria-live region
Adding aria-live="polite" and aria-busy="true" to the section you are updating is one way (if you are updating one part of the page).
However in your circumstances I would make a section within the modal aria-live="assertive" and not use the aria-busy (as you will be hiding all the content in step 1 so aria-busy would not be applicable).
I would then update the message every second or two for long loads (i.e. 'loading', 'still loading', 'nearly loaded' etc. Or better yet a loading percentage if your script allows.)
Once the page content has loaded, you do not need to say 'loaded' instead make sure you have a heading for the section or page that has a tabindex="-1" added on it that accurately describes the content that has just been loaded in.
Once the load completes, programatically focus this heading and the user will know that the load is complete.
3. Make sure that if the API call fails you feed something meaningful back to screen readers
When your API call fails (notice I said when, not if!) make sure your JavaScript can handle this in a graceful way.
Provide a meaningful message within your modal aria-live region that explains the problem. Try to avoid stating error codes (or keep them short, nothing worse than hearing a 16 digit string on a screen reader for an error code), but instead keep it simple such as 'resource busy, try again later' or 'no data received, please try again' etc.
Within that region I would also add one or two buttons that allow to retry / go back / navigate to a new page depending on what is appropriate for your needs.
4. For long load times, let the user know what is happening.
I covered this in point 2 but just to emphasise it, make sure you feedback to users that things are still loading if there is a long load time by updating your aria-live region.
Nothing worse that wondering if the page has loaded and the developers forgot to tell you.
5. Give the option to cancel an API call so it doesn't become a keyboard trap.
Obviously the big problem with a whole page modal is it is a 'keyboard trap'.
To ensure this isn't an issue make sure you provide a cancel button.
Make sure it is clear that this will cancel the loading of the page, but don't rely on JavaScript alone.
Instead make this a <a> styled like a button that either points to the current page or the previous page (yet again depending on your needs) and add role="button".
Then intercept this click with JavaScript so that it can function like a button.
The reason for this is that when your JavaScript fails (yet again - when, not if) the user still has a way to get to a meaningful page, thus avoiding a keyboard trap.
This is one of the few times you should use an anchor as a button, as a fallback!
By doing this you ensure that the user always has a way to escape the modal.
You may also consider allowing a user to use the Esc key to close / cancel but that is yet again down to you and your circumstances.
(a) TIMTOWTDI =. there is more than one way to do it
(b) TIOOWTDI =. there is only one way to do it
i do not know if the case for this issue is (a) or (b), above.
The follow links may apply to this discussion:
https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload
MSDN beforeunload | onbeforeunload event
http://dev.w3.org/html5/spec-LC/history.html#unloading-documents
http://dev.w3.org/html5/spec-LC/history.html#beforeunloadevent
... Note: There are no BeforeUnloadEvent-specific initialization methods.
please note: i am not discussing SO article 276660 "How can I override the OnBeforeUnload dialog and replace it with my own? which is about the text that the end-user sees in the dialog box; i found SO article 276660 via the first reply to this discussion: suggestion: change default for are you sure that you want to navigate away from this page? from OK to Cancel
My issue with how various browsers behave is the need to prevent the end user from losing her/his typed data because she/he accidentally clicked away from a page; such a disaster can easily occur if she/he happens to press the space bar shortly after the dialog box has been displayed; "disaster" may seem like a very strong word unless you are the end user who has just lost an hour or two of typing.
i. is JavaScript the only way to prevent this?
ii. is there some way to tell the end users' browsers to make Cancel the default?
Clarification (i hope): in a Windows O/S dialog box, it is possible to tell the Windows O/S which button to highlight as the default; for example, if the message were something like "delete all of my files", a default of "OK" is a bad idea.
SO frequently saves my text as i'm composing a question; other forums do not do the same.
i'm guessing that if my laptop were to crash as i'm writing this message then SO would give me some way to recover close to the point where i am at this moment.
Will someone please tell me whether there are one or more ways with regards to browsers, and, if there are, where to find more information?
imho, setting the default dialog box button to "OK" is far too dangerous because accidentally hitting the space bar could cause a lot of grief.
Thank you.
Should links to external sites set target=_blank? E.g. I am on www.acme.net and have a link to www.otherplace.net, should that link be:
<a href='http://www.otherplace.net' target='_blank'>otherplace's website</a>
or:
<a href='http://www.otherplace.net'>otherplace's website</a>
I was under the impression that using _blank to sites outside your domain was best practice, but now I am being told otherwise.
Some web idealists will state that you should allow the user to make their own choices when it comes to navigation - I have a lot of sympathy with this view. As web developers, we shouldn't be forcing such decisions on our visitors.
However, I also know that businesses often want to 'retain control' and so insist on spawning a new tab/window for external sites. An I understand this too - It's a very practical approach, particularly when you consider that how many users don't know how to control their own UA.
I often tend to steer a middle course between the two, by adding an image (I'm sure you will have seen many in your time) that indicates which links are external, and a note to indicate that external links will open in a new tab/window.
Not quite as 'pure' as the first option, but at least it is clear to the user how the site will behave.
found this on the w3c site
Checkpoints in this section:
•10.1 Until user agents allow users to
turn off spawned windows, do not cause
pop-ups or other windows to appear and
do not change the current window
without informing the user. [Priority
2] Content developers should avoid
specifying a new window as the target
of a frame with target="_blank".
More info here
the question you need to ask your client is "To what priority level are you aiming to achieve?"
I think it totally depends on your use case.
If you are opening a site in another domain and need to keep your site open, and I think in most cases you do, then use target='_blank'.
As a user, I find it annoying when I click on a link to another domain and it moves me from the original domain. Of course, using ctrl+click in most browsers is a way to defend against this - but why make the user do more work?
It might also be worth to mention that using target attribute is not xhtml valid. I do usually open links in external window or tab because I see that most regular users (not the advanced ones) want it that way so that they can always get back to the site they were on - usually they would go deep into the other site and then it become unfriendly for them having to click back multiple times.
So in terms of usability I think that there's more users that don't use special techniques to manually open links in new window/tab.
With regards to the xhtml validation, you might want to decorate your links with rel="external" or some similar word then use this JS function to handle new window open. I did it like this 99% of time in the last few years.
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
/**
DOCUMENT LOAD
**/
$(document).ready(function () {
/**
external links
**/
externalLinks();
....
Just don't do it. Using target attributes with links presents complications for assistive technology users who may not know another tab has opened. It becomes a bad experience for these users when the back button does not work in the new tab to take them back to the page they started on. This practice can also be disorienting to people with cognitive disorders. It is best to let users decide where links will open.
You need to predict what your users want. Use target="_blank" if you expect your users will want to stay on the site.
For example if a blog post has a link in the middle of the post, it makes sense to open that link in a new tab since you are expecting the reader to return to the page and continue reading.
Some people argue that the reader could simply click "Back" when they wanted to come back to the page,
But new webpages will have more links to webpages that have more links, what happens is that the reader has to "Back" a couple of times to get back to your blog post. Either that, or he ends up "lost" in the myriad of linked pages and couldn't come back to your blogpost (you can be sure that no one wants to open History and find your page again when they are "lost", unless there is a big incentive to coming back to your page).
As it is a governmental website, this is a tricky question. I regularly see disclaimers for external sites on these type of sites. I don't know if this is a standard or not.
I think the answer is probably down to your own opinion, which should probably be based on usability and integrity.
Just make two buttons for your users: One to open in new tab, and another to abandon the current page in favor of the linked page.
[ www.google.com ]
[Open Google in place of THIS page]
Sometimes a user will click on a link on a page, and it seems that there is no reaction -- nothing is loaded. It turns out that all the links on that page is targeting a window name, such as "news_content". The user previously already clicked on a news headline, and so when the user now clicks on another news headline, that window (usually another tab nowadays) will load the news, but the original tab is still the one being shown. To the user, this seems like nothing is happening.
Are those websites using <a href=" ... " target="news_content"> ? Is it a good idea to use something like that, or can it be changed a little bit so that the focus will go to that tab instead of staying at the original tab?
(is it better that the browser always switch to the target tab? if so, then this problem looks like will be solved).
In my opinion the user should always be in control of whether a link opens in a new window or not - If they're anything like me with numerous tabs endless new windows links are a mess.
What you seem to be asking is why the browser stays at the original page when a tab is updated with content, its simple, it sees it as another webpage, say you had a page that had realtime updating, your browser would not switch to that as it sees you are on another page - for all it knows you could be reading an article, watching a video etc.
All it takes to realise a different tab/window has updated is a little bit of awareness. With windows they would generally open over the current content, however as tabs are in one window this is not possible an it remains closed, but updated.
EDIT: In response to the title... I believe it to be better practice than opening something brand new each time however feel it should be the users choice whether to load a single new tab or stay in the same one. Hope this helps.
One caveat to add to the conversation.
I only use target= when I know the content is destined to be in an iframe and I don't want the link click to stay in the small window.
For example the graphs I embed here : http://webnumbr.com/stackoverflow-questions
Link behaviour should generally be left to the user to control. In some situations, a case can be made for target="_blank" (especially now that Firefox, at least, has a "New pages should be opened in: A new tab" option), but setting all links to open in the same new window is just bad.
I, for example, hate waiting for pages to load, so I'll read down a page middle-clicking each link that interests me, which will queue them up in a series of new tabs. Five interesting links become five tabs, each loaded in the background while I'm reading the first article, so no waiting. If you make all five open in the same window/tab, though, then each one disappears when I call up the next and not only do I have to 'pick one, wait for it to load, read it, go back to the original article, repeat', but, if I don't notice that this is what's happening, then I'll also need to go back and make a second pass through the original page to re-find the links to the lost documents (or, more likely, just say "not worth my time" and never read them).
Forcing newly-opened tags to the front has a similar problem: I opened it in a new tab because I want it to load in the background while I continue reading the original document. Don't subvert my intention. I cleared the "When I open a new tab, switch to it immediately" checkbox for a reason.
Yes, these websites are using target. Well. I can't imagine in which set of circumstances using the target attribute may be useful. But perhaps there's one. I haven't come across it.
Look, always switching to another tab solves the problem you describe, but it creates others. The biggest one is that switching to another tab may come as a surprise. Usability is by and large about never surprising the user. By the way, I greatly enjoyed the book "Don't make me think."