A reader wrote in with a really interesting and important question. The answer might save people from harm or literally save lives.
I am redesigning a website for domestic abuse victims. The director of the program wants me to include a button that victims can click to hide the window if they are caught. I don’t know what options are available for me regarding something like this. Any suggestions?
The first thing I thought of was the literal tech stuff: can you close a window with a button click? There is a window.close()
method, so perhaps this would work?
<button onclick="window.close();">Close Window</button>
Nope. We’re not going to be able to count on that. That will only close a window that was opened with JavaScript, which on a typical website isn’t the case.
But would we actually want to do this anyway? Have you ever walked up to someone using a computer and they close their browser windows right as you approach? Even if it’s a coincidence, it looks mighty suspicious doesn’t it? I think we would specially want to avoid suspicion in this case.
A simpler and less suspicious action would be to redirect the page to something generic and benign, like weather.com. Another advantage here is that you can count on it working in any browser.
<button onclick="window.location = 'http://weather.com';">Go</button>
But we can do a bit better. What if the perpetrator walking in decides that the sudden change in websites by victim does look suspicious. Perhaps they will try and force the victim to hit the back button to see what they were looking at, or do it themselves. To avoid that, we should open the link in a new tab if possible, which is free from direct browser history.
If we start abstracting the JavaScript away from the button itself, we’ll have:
<button id="get-away">Go</button>
$("#get-away").on("click", function() {
window.open("http://weather.com", "_newtab");
});
The new tab won’t have direct browser history, so pressing the back button won’t go anywhere. That’s good, but opening a new tab does look a bit different than just changing pages. If the perpetrator notices that, maybe they will click back to the last tab and see what was there. We can try and protect against that by changing the location of the original page as well:
$("#get-away").on("click", function() {
window.open("http://weather.com", "_newtab");
window.location.replace('http://google.com');
});
By replacing the URL on the original page, it won’t add a new browser history item. So the back button will go back to the page before that. If the victim has browsed around a bit on the original site, the back button will return to those pages unfortunately. Perhaps the original site could use some kind of Ajax page loading that doesn’t affect browser history to prevent this issue. As far as I know and have researched, there is no way to totally clear the browser history through JavaScript.
Another consideration is the location, style, and content of this “escape” button. You can already manually clear browser history, change websites, open new tabs, and close browser windows. The point here is doing it really fast in an emergency situation. So having a little button tucked away somewhere on a page doesn’t do a lot of good there, especially since the victim won’t have the ingrained muscle memory of getting to that button quickly. They will probably more likely go for controls they use more often like the windows close button.
Design wise, I think the best plan is to go big, obvious, and persistent.
That big green bar would be a fixed position full width bar. So it sticks to the bottom of the page no matter what. The text “Go” is simple, descriptive, and non-supicious (The word “go” is used all over the web). The green color matches with the word “Go” and isn’t a danger indicator.
There is a question-mark link in there too, which could link to a page that explains what this enormous strange bar is for.
This is a good so far, but despite the enormous target, moving your mouse can be a bit clumsy and slow. Perhaps the victim is typing something when the perpetuator walks in. We could provide a keyboard shortcut to do the same thing clicking on the bar would do. The
Since we need to trigger similar actions in two different ways (key press or click) it’s time to abstract the functionality into a function to keep from repeating ourselves.
function getAway() {
// Get away right now
window.open("http://weather.com", "_newtab");
// Replace current site with another benign site
window.location.replace('http://google.com');
}
$(function() {
$("#get-away").on("click", function(e) {
getAway();
});
$("#get-away a").on("click", function(e) {
// allow the (?) link to work
e.stopPropagation();
});
$(document).keyup(function(e) {
if (e.keyCode == 27) { // escape key
getAway();
}
});
});
The new key press “escape” works identically in Chrome and Opera. In Safari a new tab opens and replacing the old page but the new tab is blank (apparently you can’t open a new window with a location from a keypress in Safari). Firefox will replace the current page immediately but block the popup by default unless you explicitly allow them on the site.
Notice I used the “keyup” event. It’s tempting to use “keydown” to make it a bit more immediate, but unfortunately IE doesn’t trigger a keyCode of 27 on a keydown of the Escape key.
What do you think folks? Will that cover it as best as we possibly can? Do you have some better ideas for offering domestic abuse victims a quick disguised escape from a website?
Good Stuff from the Comments
Real life siteusing an escape method. Taken down.- That site hides the entire body when you initiate the escape (e.g.
$("body").hide();
). This way the hiding happens instantiously instead of waiting for next page to load. - Educating users about browsing privately is smart (e.g. Chrome’s “Incognito” Mode)
- Changing the text on the page (e.g. to random stuff pulled from Wikipedia) might be a less noticeable alteration. In case, say, the website being redirected too is too different from the original and may even give off more/less light from the screen.
- Loading the page in an iframe would prevent additions to browser history, at the expense of usability.
- If you can detect inactivity, redirect the page automatically after a reasonable amount of time. In case the victim accidently leaves the page open on the computer.
- Because you can’t erase browser history, maybe you should dump a bunch of benign stuff into browser history to bury older stuff.
Rock on!
Shit, dawg. Legit stuff.
This is really interesting. You could use jQuery to inject a bunch of classes into tags. Something like ‘safety’ and then assign some content:”.” in CSS.
Alternatively, have a text only version of the site which can be hidden until the panic button is pressed. Then all the original content disappears and is replaced by ‘Safe Mode’ content.
Although this feels a little dirty.
It would be cool if the escape key also erased the site’s info in the browser history.
Awesome. That’s very interesting and it might work for a lot of sensible content and different kind of website. Well, let’s not enumerate… I like to think that it can save a life here and there in the most conservative cultures and countries.
…and I bet that the “esc” option is the quickest and easiest. Trying to point & click a button on the screen while on panic isn’t going to be a nice experience.
Good article! Thanks.
Here is an example my team came up with for a sexual assault site a few years ago: http://sara-mn.org/
The code that our team used, if anyone is interested:
Nice stuff! Any cross-browser issues with your solution similar to those mentioned by Chris?
Any thought to changing the page titles? Too much of an SEO hit? SARA is great, but I’d be a little worried about the “Supporting Survivors of Sexual Assault” part ;)
Your work looks good indeed : big ol’ button, going to Google, no history going back. My only concern is about the position of this emergency button.
I feel like it would make more sense to have it at the bottom of the page, mainly for two reasons :
– it would be less visible for anyone in the room, since our shoulders mostly hide the bottom of the screen.
– it would be easier to click since we read from the top to the bottom, and we use to place the mouse on the bottom part of the screen while scrolling.
What do you think ?
Nice to see some Nerdery 24-hr Challenge stuff on here! I’m assuming that when this is done, of course. Good job.
Thanks for the code, I just made a chrome plugin for myself based on your idea ;) It contains a funny looking sun that is visible on all pages. If not used to hide the page it still makes the page look sunny.
Of course, why use jQuery for everything? I didn’t.
One thing though, you have implemented that button. Pretty sweet. But wouldn’t it be even more secure to use https on the website? Especially if there is something like a message board or contact form. You don’t want that sniffed too easily.
Not a direct answer, but I would be inclined to recommend to users that they use ‘private’ or ‘incognito’ mode if their browser supports it, as well.
I want to second this. Educating the user about Private Browsing options combined with teaching them keyboard shortcuts to quickly close the window is a good preventative measure.
Open a Firefox window with something benign in the background, then open a Chrome Incognito window and all it takes is a quick Cmd-Q (on a Mac) and all traces are gone.
This isn’t a solution so much as something to keep in mind.
Mobile browsing is often a much more private experience and could be very important for a website like this
Having an excellent and accessible mobile website would help victims seek help quickly and in a safe location.
That’s a good point.
I think it’s just as legitimate an issue for mobile browsers and wonder whether the solution works as well there. People browsing on their mobile devices are no less likely to have their phones yanked out of their hands and their browsing histories inspected.
@Chrisopher: It’s not often that an abuser accompanies their victim in the same toilet stall, which is where many people use their phone’s internet access. Will’s point still stands, but not as a total solution.
Great solution; wondering if it would help to change the hotkey button to one central to the keyboard instead? It takes a little longer to move your hand to the ESC button as it doesn’t naturally rest there. (Although you can probably argue that the user can learn to rest their hand on the escape button.)
What about having the button just change the textual content of the current sensitive page to something benign, like pulling in text from a wikipedia article on headaches or something. By changing the text, the appearance of the website would be a less drastic change when clicking the button, so less likely for someone else to “notice” the rapid change.
You could combine that with a “History API” type URL change, that changes the content portion of the URL to something more benign. The domain couldn’t be changed, but at least the content part could seem to match the benign content displayed. And it’s also similarly resistant to “back button”.
I understand the importance of this case, and don’t mean to make light of it, but it does strike me that similar techniques can be used in cases like sports sites during March Madness, etc. There are already many “boss button” techniques like this, so perhaps we can take inspiration from them.
I was thinking of something similar. Maybe go so far as to have a “benign” website veneer which you could eject to with JS on a moments notice, then do your internal browsing via un-traceable ajax requests?
To instantly change content would likely mean using display:none, meaning the page requested would likely bloat. If that’s a non-issue go right ahead, but it often is for mobile users.
The only drawback I can see with the
window.location.replace
is that the previous page in the history will either still be that same website (if they’ve viewed multiple pages) or worse, could be something like a Google search result page for a search on domestic violence.I’m not sure there’s a perfect solution, but this looks like a useful step towards a better one.
If this is the case, the developer of the site should consider making it a single page design, or loading in content with ajax and no hash changes.
Great idea, and a nice solution there. Instead of moving away from the site/page entirely, maybe changing all the content of the page to something different (weather etc.) would be the most inconspicuous? So have ‘escape’ content that replaces everything on the page?
Could you use
$(document).on('keyup keydown', function() { ... });
so that non-ie browsers get that slight speed improvement?The go button could simply disguise the site, and change the title maybe. Just AJAX some ‘safe’ page in to replace the old stuff. If the rest of the site is AJAXed too, then the back button wouldn’t do anything either. This does rely heavily on AJAX though.
How about implementing a kind of “alive” check?
The user has to hold the shift key. Once it is released the bailout function is triggered.
What about replacing the background of the page to a full width and height picture of an excel worksheet and set all the text’s color to transparent? That’s how the NCAA Boss Mode works for March Madness.
Nice thoughts, Chris. It’s interesting timing, as I just ran across this feature for the first time on a the site of a NY organization I was learning about.
It looks like their solution was implemented a long time ago, because the script no longer works (although it does successfully push you to a new web site, so the core feature still works), but it looks like the original concept was to both open a new window with Google in it, and remove all content from the original page by literally removing it from the DOM.
As you say, this does nothing to prevent a refresh or back action, but I like the concept: if opening a new window is a suspicious activity, do your best to destroy the contents of the original window.
It seems Firefox/Waterfox wants to stop the javascript opening a new tab by using the KeyUp. Popup blocker? Works fine by clicking the button though.
The only issue i see if the person walking in could still check history and see they been on specific site. Could site like this instruct users to use chorme lets say in incognito mode and have some kind function to close incognito mode to normal mode?
Not sure if it’s possible, great question, never thought about a situation like that.
I did find this after a quick search for clearing history.
{
var Backlen=history.length; history.go(-Backlen);
window.location.href=page url
}
http://forums.asp.net/t/1132444.aspx/1
Hopefully that helps
Am I crazy, does _newtab actually exist?? How did I miss that one?
It doesn’t work consistently and apparently “only works once” per page load in some browsers (Chrome)
I’m nothing near an expert, so this could be a very stupid idea, but could you load the entire page in an iframe to help keep history to a minimum? If you did that, would it be possible to load internal links inside the iframe without changing the current page? This in combination with the window.location.replace could help prevent any history. But again, I know almost nothing about iframe mechanics, so this could be impossible.
I think a hidden, full-screen iframe would do the trick as opposed to redirection or new tabs. You suffer from the momentary white screen with a new tab. Instead, you could have a hidden iframe in the background, you could have javascript quickly hit 3 different urls. Then, keeping the same “Go” button and hot keys, the iframe would appear and would mask the entire site. The iframe would already have content loaded… taking care of the white screen issue. It would also have 3 pages of history – taking care of any back button issues. Only problem here is the URL bar :(
I could also make a [weak] argument that if you are going to teach a user hotkeys, you could go ahead and teach them CTRL + W, or ALT + TAB, or CTRL + TAB.
Your solution has one flaw, creating a new tab would arouse suspicion.
A much better way would be to change the text and images via javascript on the page itself.
It could change into a poem or some news item. This wouldn’t create any suspicion.
And the url at the has to be changed as well.
The fastest way I can think of to change the content of the page would be to use a hidden iframe pointed to a Google image search or something. Clicking the button would then make the iframe visible instantly, since the page would already be loaded. The main drawback here is that the original url would still be in the address bar, so I think that the other techniques you mentioned should be used as well.
As a bonus, I believe (haven’t tested) the iframe part of the page would remain visible in the browser history. If that’s true, you could add an onclick handler to all links on the page to show the iframe before the browser follows the link, which would disguise the contents in history.
Started writing my post before I saw Ryan’s post.
The only thing i noticed that is a little unfortunate is chrome’s “page pause” on it’s inactive tabs. Chrome does this so the non-visible tabs are not making requests, playing video, audio etc. So after the escape out – if you then look at the new google page – you get a flash of the previous page (the domestic violence one.)
An ounce of prevention is worth a pound of cure. I’m assuming a worst case scenario, so some of these ideas could probably be seen as overkill.
INITIAL PAGE WARNING
First and foremost, there should clear message to the user that they should *NOT* be viewing the site if there is a risk of them being discovered. It should also give clear instructions on how to browse privately in the detected browser.
IFRAMES
Have the main site be relatively obscure (heck, it could even go under the guise of a weather site to keep with the examples). The main content of the site sits within an iframe. This should ensure that no history entries are added if the user does not have the ability (or ignores the warning) to browse privately.
CLICKJACKING FOR GOOD
Any click within a specific threshold for a normal click triggers the “safety screen”. To navigate (again, this would have to be communicated to the user), the user must press and hold for a little bit longer to trigger an actual navigation. If possible, build the site as a single page that requires as few clicks as possible.
SCREENSAVER MODE
If no keyboard or mouse interaction occurs within a few seconds, automatically trigger the safety screen. Add a slightly longer delay that will automatically navigate to a harmless site like Google after a minute or so of inactivity.
Why not have mouse-over sections that turn on the safety mechanism, then click on an “advert” (isn’t actually an advert) to turn it off. Bonus points if the advert has an easter egg indicating it’s for the SARA site, e.g., a family playing badminton while wearing SARA t-shirts.
This works because most people don’t click on poorly targeted advertisements, if they click at all. For a women’s support line, use a tampon advert so men feel uncomfortable clicking on it. For a men’s support line, use something no woman would be likely to click. Children, LGBT, and other situations should use this same tactic.
Is there a way to open the new tab to the Home page set by the user?
If weather.com and google.com are used, I think reversing the functionality would be more convincing: replacing webpage with weather.com and opening new tab with Google.
The Google search page is a natural starting point and would look odd (to me) if one had left it to open a new tab to check the weather.
Hope that makes sense.
You could also allow URLs to be set by the user somewhere in the Go bar, and optionally cookie them.
What about changing the url to something like: Go! and setting some kind of cookie or session key, that keeps the page you left ready for your next session?
First attempt at the demo page took a few seconds before actually doing anything.
I don’t usually visit weather.com, so I can only guess that it wasn’t on my DNS cache. That or my Firefox just lagged without further reason.
If my theory on DNS is right, you would have a similar issue on slow connections. And if we’re talking about people who fear for themselves if caught, it’s probably a good idea to do something client-side before opening an external page.
Perhaps clearing/hiding all the content on the current page?
I would suggest having a button that changes the entire website to disguise it as something like weather.com or similar. That way they can browse without having to worry about changing it quickly. You could even make them mouse over content to reveal what it really says and then all they would have to do would be to mouse away and the fake content would show up. This is more complex but I think it is safer.
The goal is not to be caught. So the real need is not to close the window (a typical rookie/technical guy mistake) but to hide where the user was.
A simple parse of the history array to the last non-same-actual-domain-name entry and do a history.go(-X). Most browsers will do this more quickly than showing something else.
If nothing in the history array (user knew the URL and did went right to it), then open Google.com homepage. This is the page the browser has to most chance to have in cache.
Closing the window would end to the last opened window, which could be another website window about domestical abuse too. Or even worse, the desktop… which would be highly suspicious to (most of) paranoid abusers.
If you really want a bulletproof solution, just keep a 1px height iframe on top with Google.com opened in it with a generic keyword. Any script could resize it to full window height. After 2 seconds, refresh to a Google Search (to the same keywords) targetting _parent. You may be able to do it using:
This would be the very best solution (stay in the same page) since a CTRL+W or any script closing the window could lead to a prompt alert (when a post has been submitted or anything…).
And if you are scared Javascript could get slow, just put a huge button on top in position: fixed; and tell your user to always keep his/her mouse pointer on it while reading.
And link it to the Google Search (that you open in a 1px iframe anyway so it’s already in cache)
Hi! I was thinking about “keyup” and “keydown” mode.
I supposed: if I push the right button (it can be “z”) I can see the right content, if I leave it I will see an other content, but the page doesn’t need to refresh, like a full overlay. So if you get the page from history you can’t see nothing.
But at the beginning, how can I say you that you have to hold down the button to see the right content?! :(
…I’m going to think about it :P
Lets look at the UI perspective of the normal physiological “startle response” — Many people browse with their finger on the mouse button – so, especially if they were on the “lookout” for intruders, that could get to be a useful habit if they know about the alt-exit. But, moving the mouse first to the button and then the “letting go” of the button (i.e. due to the “button up” usage – just seems a bit non-intuitive for someone being startled by an intruder. Wish there were a better way to use the ‘startle response.’ “You startled me” is a lot easier to explain than a noticed page change due to delayed mouse up. The reader could force themselves to leave the mouse over the green button; but still.
Also, the location of the escape button isn’t at all conducive to either a startle response or obfuscation of your movements. (i.e. reaching up an over). If it were me watching out for intruders I would suggest a key on the bottom row like the space or alt or control – that you could “take over” for the clandestine part of the exercise but revert back to normal usage on a “normal” exit from the page. A quick press of the thumb on the space or alt is intuitive in a “startle response.” [I’m assuming merely ‘reading’ wouldn’t require the space button, but filling in a form might.]
Would also suggest a pop-up or large info banner at the top which could be scrolled past on entrance to the page — i.e. not rely on a tiny info button at the bottom which could be missed.
$0.02
It works fine for me in Safari 6.0 (7536.25)
Great work btw.
Here is an idea…
to reduce the DNS time… especially if the site hasn’t been visited before… perhaps find a way to pre-cache the “boss” site upon loading of the main site?
Perhaps load the site in a hidden iframe somewhere… that way it’s cached on the PC ready for the switch over??
ANOTHER OPTION:
Depending on the URL of the website in question, perhaps the go button could replace the content on the screen with a fake news website? Use a simple hide/show javascript command to hide all divs on screen and show a pre built fake news layout (stored in a hidden div)
I like your second option, it’d need to pull a news feed from another news site to seem legitimate and remain easy to maintain, but that wouldn’t be an issue!
What about a way to track mouse movement….. perhaps but shaking the pointer on screen rapidly ( similar to windows 7 action ) it could hide the site??
(Is that even possible??)
I really like this idea Alex, I’m not sure why no one’s really picked up on it.
It is possible to track mouse movements (I found a javascript example at http://bitdaddys.com/javascript/example3run.html), the problem of course would be creating a function that took those and detected a “shake” (is one dramatic x coordinate increase and decrease or should several be required to count as a single “shake”, or maybe it should use the y coordinate?).
But I don’t think it’d be incredibly hard, the advantage would be that nothing would have to be clicked or pressed.
I’ve been thinking a little about how to avoid clicking the “back” button and returning to the abuse website. I came up with a potential solution, that actually stems from javascript blocking content from loading.
Since Javascript prevents other things from loading, why not use this to set and check session storage?
This is what I’m thinking:
1. You visit the site, and have javascript at the top of the page (NOT in an onload function).
2. This javascript sets Session Storage* to let the browser know it has visited this site already.
3. You do your initial redirect solution (locationchange)
4. if the browser returns to that page, it checks for your session storage – if it exists – it does location change to another harmless site.
5. since the javascript blocks loading, it SHOULD prevent the end user from seeing anything**
* session storage (https://developer.mozilla.org/en/DOM/Storage#sessionStorage) which lasts for the duration the browser is open
** You may want to load content in/make visible AFTER the session storage check anyways
Note that this will probably still show the original URL on hitting the back button, you may want to make your URL something somewhat ambiguous.
Also, this solution should be used in conjunction with other solutions, as well as inform the user of what will happen. Tell them they must CLOSE the browser and return to the page if they wish to visit again.
Yes, this causes more work for the user, but it also makes it safer in my opinion.
I was going to suggest the use of a keystroke, so I was glad to see you thought of this at the end of the article. Nicely put together. I never thought about this sort of issue.
What about the possibility of over writing the page with dummy content or another site (through an iframe?) that’s been preloaded? I’m thinking out loud, but it would be instant, and not require suspicious closing/opening tabs. However, the back button might cause some issues, unless the AJAXy stuff you mentioned could take affect.
Another idea, on click of the Go button, set a cookie that blocks or redirects users to a benign page for the next hour so that the perp can’t access the site. That may look bad, but something like a false 404/503 might help that.
Random ideas off the top of my head. Awesome to see this stuff worked on.
MIght be overkill but I would let the user decide the locations of the main windows and tab that open. That way maybe they can make them something more expected from whatever they should be doing.
Another thought could be adding in a double click option perhaps? I also agree with the comment about using a different key because it can look suspicious if they see you hitting the escape key.
Overall very good tho. Not a problem I would have ever thought to be solving
I agree with Brad, let the user choose something that wouldn’t be viewed as out of the ordinary for them or go with a default (like weather.com).
Also, I think a double clicking anywhere on the page would be a good trigger. Easy and fast. What about detecting if someone pushes Shift key or Spacebar two times in a row? Just a thought.
A worthy problem to solve. Keep it up.
This addition should deal with the back button.
Reference: History go() Method (w3 schools)
There are a lot of cool ideas for interactions here, but I wonder whether they all are too fancy. In a moment of panic, will people remember a clever mouse shake or ALT + keystroke combo? To me, keeping it as simple as possible (large clickable area plus the most intuitive keystroke—ESC) makes the most sense to me.
Thanks Chris this was very helpful!
I used a very similar technique on a website that was for the same purpose, but I added a transition page with a javascript redirect so when the user pressed the back button, it was automatically returned to google once again.
You should check out:
Mousetrap
http://craig.is/killing/mice
-Adam
Great post once again.
Most of the solutions involved clicking on a button. Like others mentioned before, this is in my opinion simply too difficult on panic mode.
What about the opposite? Hover a button to display the right text. Allow two versions of the site. The “incognito” and the “normal” version where nothing happens. By making two versions, you can also make sure that robots see the normal one avoiding to harm your well-deserved SEO.
Moving the mouse away from an area is by far the easiest and safest action the user could take. How many of you stare at Google’s home page? How many of them do you think have their hands on keyboard while reading to quickly hit the ESC key?
I was thinking, along the line of some others already, where are the users hands normally? At the very least, they will have a hand on the mouse.
So, what’s an easy thing to do, that will require little obvious movement, but isn’t a normal thing to do. Not sure I’m a fan of double click, since that MIGHT be something needed for other functionality, depending on page…
In any case, I’ve implemented a Left->Right click combo, and a triple Left.
Check it out on this jsfiddle.
It’s setup in a JS library type thing as well. Just does some output to indicate the triggers at the moment, but it’s just a start for others to adapt from.
Just saw about hitting ESC being a little difficult if they’re reading, but what about the other way around? If their typing, then any mouse stuff is a little more difficult too!
So, I’ve added a double escape press trigger too :: jsfiddle
Uses Mousetrap for the keybind.
Props to Adam Overstreet for the link before! :-D
Reading all the answers i havent seen one suggesting using the mouse right click. I think it could be a cool solution to this cause, while reading, the user should be having his/her hand on the mouse at all time. Another cool solution could be like two big vertical bars at the sides of the page which would cause the Emergency Exit on a mouse over, so if the user wants to hide the page just mouse over the divs with the mouse (which should also be a very intuitive motion for a user that doesnt know about key shortcuts and wants to hit the exit button of the browser really quickly.
Great discussion and great solutions as well :)
Julián
This might be too involved, but if it means saving a life…
You can’t clear the history, but what if you just dumped enough stuff into the history to make it seem like someone was doing research on something generic? Maybe headaches like another commenter mentioned.
You could redirect to another site with a non-suspecting URL and use history.pushState to dump like 25 URLs onto the history stack and eventually jump out to a WikiPedia article or something. The idea being, hopefully when a bad guy sees wikipedia he doesn’t feel threatened, but even if he sits down and hits the back button it just takes him to another page with a link to wikipedia on it or whatever. I’m not sure what the best number would be – 10 probably floods out the recent history by holding the back button, but you can’t dump too many that it becomes unreasonable. Maybe you could keep track of how long they were on the site for and dump a reasonable amount of stuff on the history stack accordingly.
I love the group effort on this one. I feel like together we can come up with something pretty awesome that every site like this should use.
Oh, almost forgot:
You should be able to use
.one('keyup keydown')
.It’s meant to only fire something once but since it’s taking you off the page it should only ever fire once anyway. This way it will only use one of those events even though it’s bound to keyup and keydown.
Not a technical solution, but a design point to check: the redirect website should match as much as possible this domestic abuse one in term of background colors and image sizes (the opposite might be easier).
It wouldn’t make a difference in day light, but if the user is checking the website at night in a dark room, the screen will emit enough light that a change from a dark themed / large dark pictures website to the google home page will be noticeable to someone entering the room. A sudden change of lighting can look suspicious and cause trouble.
I would test the switch at night in a bedroom with no light, with the screen turned around, after having waited a minute for my eyes to get accustomed to this lighting.
As Josh said above, great group effort. Looking forward to see where it leads to.
From a design point of view it may make more sense for the big obvious button to run down the left side of the page. For the same reason the Mac has the mile high menu bar, it’s easier to slam the mouse against the side of the screen (when the window is maximized) than the bottom of the screen, where the user would have to move up to avoid clicking the task bar. The left side is chosen to avoid the scrollbar.
Additionally almost every monitor purchased these days seems to be widescreen. Rather than take away space from the bottom of the page where we are already space limited, remove it from the side of the page where we have a surplus of space because making text more than about 72 characters wide (~10-11 words) makes it harder to read.
this is lethal stuff,.. :]
great solution — this is amazing!
Perhaps you could also fire off an AJAX request to the server when the button is pressed that will log the IP of whoever pressed the “Panic” button. Next time that page is loaded, it could display some other “normal” content. If someone did go and check the history, it would merely auto-forward to weather.com, etc.
In order to get back to the site, maybe there is a time delay to wipe the IP from the “Panic” log or there is a specific URL you have to go to or a tiny link on the new content page.
What about having the button change the language on the abuse site. That way, even with a hit of the back button on the correct tab will bring up a foreign written site
great idea & work !
The hardest part I think would be masking the URL. I thought of the same idea of just hiding/replacing the content of the site with something that looks like Google for instance.
There are ways to prevent the back button from immediately going back to the previous page — have you been on any ad filled websites? I’m speaking ASP logic here, but if you do some Postbacks on a timed interval clicking back would just bring you to the previous Postback (which would be the same page). I’m not sure what the PHP equivalent of it is.
You know, thinking about it, why don’t you have the button hide/replace the content, redirect the user to a “safe page” with that same content, and map the safe page to something inconspicous in .htaccess combined with the timed mini-postbacks on an interval?
I honestly think ASP.NET might be better in this situation. I can’t remember, but there might be a way to redirect the URL without changing the content you have on the page. At the very least, the routing and postbacks would help a lot.
To possibly get around the Safari issue, you could simulate the click of the escape button..?
I enjoy the alternative content loading; however, for best speed, should one cache it soon after pageload?
Load it concurrently and then hide the content through a special div class that collaspes it to 0px (or set’s the Z-Index very low). Then change those properties when needed.
It’s the Sharepoint method — this way you can hide your content and grab it too!
This is truly amazing. Seriously. This is what it is all about: a community of liked minded individuals coming together to help solve a problem for the greater good. Awesome awesome stuff. Please keep it up.
As others have already coded stuff perhaps the creation of something on Github? At the moment I can only contribute ideas and I don’t think github is meant for that. =)
My thoughts so far:
– the concern about the URL is a valid one, but I think the best solution for that part of the functionality truly rests with the company/service/organization/etc. itself. By this I mean that registering some generic domain that they could use for their most sensitive and important information. The ‘official’ website would be a proper domain name so people can find them easily, but from there a redirect takes them to the generic domain and any of the other ideas regarding how best to serve the content could be utilized.
That’s it so far.
Please please please keep this momentum going.
“Man becomes great exactly in the degree in which he works for the welfare of his fellow-men.” – Gandhi
Cheers,
Jonesy
The large button fits very nicely with Fitts’ law. http://en.wikipedia.org/wiki/Fitts's_law
Very cool that you can virtually erase the history of the last visited page with javascript.
You’re the best, Chris. I forwarded this page to a domestic abuse treatment agency that I know of.
http://cssmatter.com/
Submission Open! Submit your website now.
CSS Matter is Web Design Gallery Inspiration for Web Designers & Developers.
Another suggestion. Sorry if it’s here already as I only skimmed the comments:
It would be with nothing to create a dummy cookie with a value set so if the the suspicious user hits back or finds the history item it loads dummy text or redirects to the URL set to the exit button?
The only issue would be the timeout for the cookie?
I am amazed and deeply grateful that you took this issue so seriously. In my experience, most people want to dodge the realities of domestic violence and the like, so the “normal” response would have been to ignore the question.
And what an elegant solution. Thank you so very much.
I think the safest answer is to make the site look like another popular site–say Facebook? Then place the content inside the fake shell. Or allow the user to change the theme to look like another site.
Great idea Chris ! thanks for sharing
Another aspect missing here is login forms. I work for an adult retailer and we disable username/password remembering on our sites to be more discreet. There is no way then of finding out that your partner has an account on the site without access to their email.
Great idea!
I have 2 propositions to enhance the trick.
First, instead of redirecting to the same fake website, just pick a random one in a predefined array. If the victim has to come back and escape again. It can be suspicious to be on a weather website twice in day for example.
Then, to improve the switch speed, preload the “fake” website in a hidden iframe to grab every cachable resources. If you choose a decent fake website, you’ll probably have to only download the html. The loading won’t be visible and we might believe the victim was already browsing this fake page for a while.
don’t forget to add “cursor: pointer” on a clickable element
Great idea, going to see if i can add this to my sites.
You could make the entire background a button, so wherever you click it will re-direct to a new site. To me, finding a small strip at the top is just as hard as getting to the X in the browser.
Responsive websites would be great for this as well.
Although not related to the actual solution, I wanted to point out a way that a page can close itself, which is tested in Chrome and IE9.
In a ‘click’ handler, you can use the following lines:
This was found in the code from a Google chrome extension.
Perhaps the user could have the option to enable “panic mode” on the website.
I can imagine that the user doing more reading than on a “regular” website when users more often scan the content.
When in this “panic” mode any keyboard key would trigger the exit.
As for the exit itself, even though it’s a more difficult implementation the “replacing content” solution is most appeling IMHO.
Just a thought and yes I wan’t to keep my identity secret like a secret agent, was to maybe have the google land on a search page (such as weather) so when some one looks at your other tab they will see that you were searching for weather…just saying.
As Remi Grumeau speaks on 07/30/2012, a simple ESC-press will size the iframe to 100%.
The page is already loaded (slow internet, 1 sec delay is to much), and Javascript can make it 100%/100% in a millisec.
About the colors: the design must be the same ‘lightness’ as the page in the page in the iframe.
Google.com (empty, nothing entered) is silly…
Is there a way to get the most favorite webpage (like Facebook/Yahoo/Google)? It would make more sense then a empty Google-page.
Happy to see the brain juices still flowing over this important issue.
Another thought I had:
What if all these types of organizations/services/etc. registered a bunch of dummy domains? This would allow them to create a bunch of dummy websites that they could all utilize for the redirection portion of the escape process. This also allows for complete control over the entire redirection process (visual, content, coding, etc.).
Just thinking out loud. =)
Cheers,
Jonesy
Good post and nice discussion too.
I wonder wether we should be considereing the behaviour of the user after this button has been activated? I mean, when I clicked the demo panic button I had no idea what was in store and that put me in an unconfortable position.
So, if I was a real user and my abusive partner walked in asking “What you looking at?” I’m sure my repsone would have been immediately suspicious.
To solve this would it be wise to ask the user if they wish to specify an exit site when they first land. On panic, they can be redirected to a familiar page that they know and one that is comfortable. Could this not allow the browser to preload/cache the content too for a super quick page load. The files may well be already cached if it’s a frequently visited site.
typos…
Great article and some really good ideas in the comments, however i think the most important think to keep in mind was said by Chris: “Design wise, I think the best plan is to go big, obvious, and persistent.” so i would wrap the whole site in that green “go” button…
The main problem with going to other websites by clicking or pressing a button or using AJAX to dynamically load content is that the process may take a long time. Specially if you are downloading stuff or are using a modem (some people in the rural areas have no other choice).
I think the best way is; to enable private browsing and attach an event to the escape key to dynamically change the whole page with CSS and jQuery only (hiding/removing elements and showing other elements). showing a bogus recipe page would be nice.
The user can press the escape key repeatedly to act as if they are frustrated why the page is not loading properly.
The first press of the escape key will alter the page instantly and the subsequent presses will do nothing.
If we set a cookie that expires, we can prevent the reloading of the original page when page refresh is clicked.
Would that work?
Very interesting. We were looking into an abuse victims support site for Createathon DC and saw a button just like this that redirected to a random youtube video.
Wondeful article and a wonderful site. I came across your work from Lynda.com tuts. Chris your are great. Thanks!
First off, I think this post is REALLY awesome and it’s totally cool to see people put their heads together with the thought and sensitivity to a subject like this. These types of changes to a site really make a difference in a person’s life! AWESOME READ
It would be really neat to maybe allow the person to enter their preferred backout site when they first land on the page. I mean, if someone who knows me walked by and I had the weather channel page up, they would immediately be suspicious.. but if i had LOLCats up, wouldn’t be suspicious at all. Entering your preferred back out link right when you get there would be really REALLY easy to implement too.
Agreed. The easiest and least obtrusive way I can come up with is a splash page (javascript redirect based on cookie?) simply with an input saying “For privacy and safety reasons, please list a site you commonly visit below.”
Better than a splash page, a small modal pop up (think Lightbox style) that discretely asks for that information and contains the info / directions on how to quick escape the page. It could be quick and light weight. Definitely should make sure the page itself is very lightweight and FAST loading so that they don’t get hung up between pages – especially since there are still places in the country out there that use dial up only.
Also have to think about mobile.
Eh, mobile is easy compared to dial-up friendly. It’s nigh impossible to design something lightweight, small (file size), legacy-compliant, and modern-looking. Dial-up users also aren’t likely to use the latest browsers since all their time online would then be spent updating. Testing a design for dial-up users essentially limits us to using IE6, Safari, and maybe Firefox 3.x.
To reiterate, it’ll need to be XHTML1.1 and CSS2 compliant according to IE’s terms. One should also sprite as many images as possible, or at least ensure descriptive image placeholders. Video? HA! No. Not unless you can download it and only if it has its file size listed.
This seems like a bit much to undertake. Wouldn’t an offline solution be better at that point? If not perhaps a separate, light-weight site with the same content? User-agents that aren’t on a whitelist could be directed there, of course with a link to escape the lightweight redirect.
Redirecting is bad. What if the target site is slow or the internet connection is lost or a DNS server is on fire. No redirecting.
Instead of going to a new site, it’s better to simply mask what’s currently displayed by using a full-page overlay or something. To minimize detection of any visual changes, either use the same colors and brightness levels, or use a dissolve transition.
If you need to load extra resources in order for the “Panic!” page to show, make sure to load those resources when you serve the page for the VERY FIRST TIME so that they’ll be available instantly. (Remember to set the caching policy very far into the future for these items.)
If the browser is modern enough, you can use the HTML History API to wipe/modify the history. One should also change the window title to complete the effect.
How would an overlay change the domain name or erase the history? You need to remain on that page in order for an overlay to actually work.
Well, the domain name wouldn’t change, but the history (if using the History API) and can be erased and the window title changed. I recently developed a site and erased (actually, I did it accidentally during testing) all history using the History API. So you’ve got me on the domain name part, but the rest applies. I suppose one could hide the location bar, but that would have to be done manually be the end-user.
To change the domain, you can use javascript to rewrite the location bar’s contents without loading the page. Using javascript and iframes, cache the contents of a wikipedia page upon load, then the panic button would do 3 things:
– have the iframe encompass the entire screen,
– rewrite the location bar contents to reflect the iframe’s URL (without loading the new page),
– Erase the history using the API you mentioned.
This way a person can immediately show the new page without an added request when in a dangerous situation. The only vulnerability is if they use the reload button, it would show the un-panicked page.
I stumbled on this by accident, and I know it’s now over a year old, however I like a lot of what has been said here and had some thoughts of my own.
I’m not a web dev, I’m just an artist. However from what I know about websites, I know that cookies are stored. Would it not be possible to say that if they hit the back button, and the site saw the cookie for it’s own website, it would instead of reloading itself redirect to google?
Next would be to clear history at the moment they enter the site. Perhaps even a warning saying that it will do so, and if they say no then don’t I guess. “This website will clear your web history to keep you safe, is this ok? yes no” This requester should be near the bottom of the screen (as mentioned above, viewers body blocks that area). This then removes history provides previous history as google if possible. Current page will appear to be google search for chronic headaches. (we all worry about health when our bodies do something that isn’t normal) provides alibi. Real content exists at the bottom and is easily closed by clicking anywhere outside of it. This should be made clear first thing. Scroll bar to right scrolls both content at the bottom, while also scrolling content at the top. This way if seen at a distance it appears they are using it, not staring a long time at static content. Advancing pages will advance fake search as well, (based on real google search content) Once page is clicked outside of the small content zone, it sends the user to a relevant site on headaches, and if back button is pressed, it redirects to 2nd page of google search on headaches, again, if possible.
Downside is that they can’t go back to the site without deleting their cookies… however at least they are safe. This info should be presented to them in the most efficient and clear manner possible.. and as quickly as possible. how to escape first, and how to get back right after that. Then continue with content.. Bottom right side should also have a panic button to notify police of the location if there is a problem. “call police”. the other downside is if their computer is locked down to prevent use of cookies .. it could ask them to activate them to protect them.. dunno. I’m out of ideas..
To reliably prevent the “flash of old content” in Chrome when switching back to the inactive tab, I had to add a simple delay that allows to repaint the window plain white – a brief flash of white when switching tabs is not out of the ordinary.
That said, I have found many of the suggested measures are not working reliably in modern browsers (any kind of history shenanigans) and browser vendors have every reason to continue and limit the ability to pull of this kind of trickery.
This could well lead to a privacy/escape button that suggests safety but fails – the worst possible case.
Providing a quick means of leaving the site is good, but educating the user upfront on privacy is of equal or greater importance. Browser tools offer a much greater level of protection when it comes to hiding activity/traces.
A very prominent notice and link to a tutorial on the matter should be displayed by default.
For users that do not need it or the escape button, hiding it as a cookie based preference seems viable.
As for the tutorial, I have seen many examples where users are struck by a wall of text describing a cookie/history reset for every major browser. User agent sniffing may be evil in most cases, but here it serves a good cause – I prefer to keep the technical mumbo-jumbo as concise as possible by making assumptions about the users browser (naturally, offering a fallback in case you’re guessing wrong is rarely a bad idea).
Would I be able to create an array of websites (like a list of selected URLs) and randomly choose between those when someone hit the button?
I am looking to build sort of a custom “feeling lucky today” button…