How can we secure web content from screenshots on mobile browsers?

Question

On a laptop browser, we can restrict users from taking screenshots using JavaScript-based techniques like disabling keyboard shortcuts and adding overlays. But how can we prevent users from taking screenshots when the same website is accessed on a mobile browser, where hardware buttons like power and volume are used?

Answer 1

It is NOT possible to completely prevent screenshots within a browser.

Edit:

To elaborate on this, the reason this is not possible is because the web browser is unable to access many OS processes for security reasons. Therefore we cannot prevent another app from taking a screenshot.

Answer 2

RuntimeTerror there is no argument. The OP is asking about mobile browser not mobile apps.

Answer 3

Keith, I ask you to check figma web not mobile app...read for a second

HAMYD KHADDA nice use of AI. impressive skills right there

Answer 4

RuntimeTerror
interesting. i didn't think it was possible, too.

can you be more specific on where in the Figma site is screen capture prevention is implemented?

I'm not really sure I'm prepared to sign up for their free trial just to test this, but the three-finger down-swipe screen capture in Android works in their site.

Answer 5

It's possible but platform dependent. Also you will need sdk for Android/iOS to do that using backend languages for example kotlin

most image editor pro tools are using this method

Answer 6

RuntimeTerror While it is possible to put mobile specific deterrents in place in an app like you mentioned, it is not possible via web browser. JavaScript methods can easily be evaded.

Answer 7

Keith you don't need to argue about this, go to figma website and try to do something that is extra privilege then try to screen shot..on your phone, while in a browser, you cannot

Answer 8

Limitations of JavaScript in Preventing Screenshots
JavaScript operates within the browser's sandboxed environment and lacks the capability to interact with the device's operating system at a level required to intercept or block hardware-based screenshot functions. As noted by experts, "Screenshots are not controlled by the web browser; they are controlled by software running on the user's operating system and cannot be remotely controlled by a web server" .
stackoverflow.com

Potential Deterrents Using JavaScript
While complete prevention isn't feasible, certain techniques can discourage casual users from capturing content:

NoPrint.js Library: This open-source JavaScript library can disable common actions like printing, copying, and right-clicking. It also offers an autoBlur feature that blurs content when the mouse leaves the webpage area. However, its effectiveness on mobile devices is limited due to the absence of mouse events .
github.com
+2
en.lovefortechnology.net
+2
pdfanticopy.com
+2

Overlaying Transparent Elements: Placing transparent overlays over sensitive content can make it more difficult to capture clean screenshots. Yet, savvy users can bypass this by inspecting and modifying the page's DOM .
webdevtutor.net

Dynamic Watermarking: Embedding dynamic watermarks tied to user sessions can deter unauthorized sharing by making the source of leaked content traceable .
webdevtutor.net

Native App Solutions
For more robust protection, consider developing a native mobile application. On Android, setting the FLAG_SECURE flag in your application code can prevent the system from taking screenshots or allowing screen recordings of your app's content . However, this approach isn't applicable to web content accessed via mobile browsers.