Introduction
In this article, I will explain how to disable print screen or keyboard in secure applications as Exam online in E-learning system or in any application you want to protect.
Some people can hack your data by using print screen, take HTML source code or even print the questions.
We have 4 challenges to create pages for exams or secure application:
- Disable print screen and clear any Clipboard data
- Avoid using keyboard or mouse
- Hide data in HTML source
- Avoid using print page
The first step is to avoid using print screen key
To solve this problem you have to access the user’s clipboard by JavaScript function:
<script language="javascript" type="text/javascript">
function AccessClipboardData() {
try {
window.clipboardData.setData('text', "No print data");
} catch (err) {
txt = "There was an error on this page.\n\n";
txt += "Error description: " + err.description + "\n\n";
txt += "Click OK to continue.\n\n";
alert(txt);
}
}
</script>
This function clears any clipboard object and sets a new clipboard in a message as the previous example.
If the user presses print screen key, he or she cannot capture any image because the clipboard contains a text message that says "No print data". So don't forget to close this page if you would like to copy a text or a file in your operating system.
We call this function(AccessClipboardData
) every 300 milliseconds by using setInterval
to clear any object in clipboard.
setInterval("AccessClipboardData()", 300);
But this solution not complete because Internet Explorer will ask the user if he/she will allow this page to access the clipboard or not. So we have to write code to handle this option if the user will not allow the page to access the clipboard.
Add this code after the setInterval
function:
setInterval("AccessClipboardData()", 300);
var ClipBoardText = "";
if (window.clipboardData) {
ClipBoardText = window.clipboardData.getData('text');
if (ClipBoardText != "No print data") {
alert('Sorry you have to allow the page to access clipboard');
document.all("divmaster").style.display = "none"
}
In the previous code, we declare a clipboardtext
variable to get clipboard text and check if the user allows the page to access the clipboard or not.
The second step is to avoid using keyboard
To solve this problem, you have to capture all events and cancel them by pop messages in case of copying data by CTRL+C or select all data by CTRL+A.
document.onkeydown = function(ev) {
var a;
ev = window.event;
if (typeof ev == "undefined") {
alert("PLEASE DON'T USE KEYBORD");
}
a = ev.keyCode;
alert("PLEASE DON'T USE KEYBORD");
return false;
}
document.onkeyup = function(ev) {
var charCode;
if (typeof ev == "undefined") {
ev = window.event;
alert("PLEASE DON'T USE KEYBORD");
} else {
alert("PLEASE DON'T USE KEYBORD");
}
return false;
}
The third step is to avoid using print page
To solve this problem, you have to use CSS (Cascade Style Sheet) to hide your data in printing:
<style type="text/css" media="print">
.noprint {
display: none;
}
</style>
Finally we want to avoid data from appearing in the HTML source, so we will use update panel and if your data gets in page_load
event delay shows data by timer control.
History
- 18th June, 2009: Initial post