Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Is it possible to prevent the users from taking screenshot of webpage?
While browsing the internet, users might need to capture screenshots to share information. However, webpages containing sensitive content may require protection from unauthorized screenshots. Though complete prevention is impossible, CSS provides several techniques to discourage screenshot attempts.
Why Screenshot Prevention is Limited
Screenshot functionality is controlled by the operating system Windows (Win + PrtScn), macOS (Cmd + Shift + 3), and mobile devices all have built-in screenshot capabilities. Web technologies like HTML, CSS, and JavaScript cannot override these OS-level functions. However, we can implement deterrent measures using CSS properties.
Method 1: Hiding Content During Print
The following example uses CSS media queries to hide content when users attempt to print or save the page
<!DOCTYPE html>
<html>
<head>
<style>
.protected-content {
background-color: #f0f8ff;
padding: 20px;
border-radius: 8px;
font-family: Arial, sans-serif;
}
@media print {
html, body {
display: none;
}
}
</style>
</head>
<body>
<div class="protected-content">
This is sensitive content that should not be printed or easily captured.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
When users try to print this page, the content will be hidden.
</div>
</body>
</html>
The content displays normally on screen with a light blue background and padding. When attempting to print, the page appears blank due to the display: none rule in the @media print query.
Method 2: Disabling Text Selection
This approach prevents users from selecting and copying text content
<!DOCTYPE html>
<html>
<head>
<style>
.non-selectable {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
background-color: #ffe6e6;
padding: 15px;
border: 1px solid #ffcccc;
font-family: Georgia, serif;
}
</style>
</head>
<body>
<div class="non-selectable">
Try to select this text - you won't be able to highlight it!
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
This content cannot be selected or copied using standard browser methods.
</div>
</body>
</html>
A light pink box with bordered text appears. Users cannot highlight or select the text with their mouse cursor, making it harder to copy the content.
Method 3: Warning Message Overlay
This example displays a warning message to discourage screenshot attempts
<!DOCTYPE html>
<html>
<head>
<style>
.warning-overlay {
position: fixed;
top: 10px;
right: 10px;
background-color: #ffeb3b;
color: #e65100;
padding: 10px;
border-radius: 5px;
font-weight: bold;
border: 2px solid #ff9800;
z-index: 1000;
}
.content-area {
margin: 20px;
padding: 20px;
background-color: #f5f5f5;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="warning-overlay">
?? Screenshots Prohibited
</div>
<div class="content-area">
This is protected content. The warning message above serves as a visual deterrent.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>
</body>
</html>
A yellow warning box appears in the top-right corner displaying "?? Screenshots Prohibited" while the main content shows in a gray box below. This provides a visual deterrent against unauthorized capture.
Conclusion
Complete screenshot prevention is impossible since it's an OS-level feature. However, CSS techniques like hiding content during print, disabling text selection, and displaying warning messages can serve as effective deterrents for casual users attempting to capture sensitive content.
20K+ Views
