javascript - prevent screenshot of webpage's regions - javascript

I have noticed some web pages have somehow implemented a feature to prevent a screen capture of some regions of that web pages. By taking a screenshot of that webpage, instead of some regions that I can normally see live in a browser (Chrome), on a screenshot I can only see a black frame. Firefox doesn't seem to have this "feature" - screenshots are taken normally without black frames.
Example of such site is Netflix. It's not possible to take a screenshot (by "print screen" key on keyboard) of the running movie from Chrome (last update) on a desktop PC running Windows 11. The video controls (play/pause, video position bar ...) are visible, but the video itself is not (black frame).
What kind of javascript functionality/API is capable of this?

Limiting screen capture is called "Digital Right Management" from a vendor's perspective. From a user's perspective it's more like "Enduser Device Control".
It's scope of the Video Playback Pipeline, not JavaScript. JavaScript only facilitates key exchange so that you can decrypt the video locally. Depending on properties that can be ascertained to the video provider about your system, the quality of the video can be limited. Browsers will mostly only receive SD quality. Here's a JS snippet to enumerate the supported CDMs of your browser.
Regarding screenshot prevention: If it's not built into the OS, it will be a custom implementation like here(code) that will not prevent all possibilities to take a screenshots, e.g. using a 3rd party program. For Chrome it is said to be tangled to hardware acceleration, turn that off and screenshots are possible.
Though nothing can guard content against recording in the analog hole, though at least to prevent distribution of such recordings video providers add watermarks on a per user basis.
If you want to go the DRM route, see here for a simple scheme to setup yourself or contact one of the authorized Widevine partners to go for the L1 hardware level.
For further reading, DRM on Android is well documented and has some diagrams:
https://developers.google.com/widevine/drm/overview
https://source.android.com/docs/core/graphics/arch-st#st_vid_play
https://source.android.com/docs/core/media/drm

Related

We cannot auto-play sound on a webpage without client interaction: How Skype for web gets around this requirement?

I think all or most browsers do not let the server or even a client JavaScript code cause the automatic playing of a sound/audio.
Testing Chrome, the only way I found to play a sound automatically without any client interaction every time was that the client goes to the Chrome settings one time and manually adds a specific website (https//: example.com:443) and allows the sound from that website (permanently unless the browser settings are wiped out or manually removed). Also, allowing all the websites to play sound generally does not have the same effect of being specific in the settings.
I found that permission for push notifications is not required for this purpose. I banned www.example.com from sending push notifications; nevertheless, upon allowing sound manually in the settings, as I mentioned above, auto-play without client interaction was still possible.
How is that Skype for the web can get around this?
Skype can send its famous Skype ringtone to the client using the web version when someone from the contact list or an absolute stranger wants to call from another computer/web browser or from, a native phone app, or a desktop app (mac or windows):
https://www.skype.com/en/features/skype-web/
I guess that's because of Media Engagement Index
From the chrome's post
Autoplay with sound is allowed if:
The user has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
The user has added the site to their home screen on mobile or installed the PWA on desktop.
Media Engagement Index
The Media Engagement Index (MEI) measures an individual's propensity to consume media on a site. Chrome's approach is a ratio of visits to significant media playback events per origin
Consumption of the media (audio/video) must be greater than seven seconds.
Audio must be present and unmuted.
The tab with the video is active.
Size of the video (in px) must be greater than 200x140.
From that, Chrome calculates a media engagement score, which is highest on sites where media is played on a regular basis. When it is high enough, media is allowed to autoplay on desktop only.
That's why some sites like youtube or skype for web can play sounds without prior user's interaction
This page is very useful in chrome about://media-engagement

Challenge to uniquely identify a computer from any of its browsers

In an HTML5 web app, I'm building a feature that relies on client-to-client communication (with pusher). It's made of PHP on the server-side and Javascript with Vue on the client side.
The typical scenario is: a window popup is opened, and from there it communicates directly with some other windows opened into any another browser on the same computer. Let's say you have 2 browsers installed, you open the web app popup with Firefox and it communicates with its web app sister page you did open previously into Chrome.
The only (half-)way we have found so far is to use the public IP address to build a private channel named with the IP address… It's basic and efficient.
However, if there is more than 1 computer connected to the same router, all of them will share the same public IP, and that's where things become difficult!
A solution could be to add the computer's local IP to the channel name (that was already built with the public IP), but despite a few nice workarounds I found to get this info from an initiated RTC Connection, this looks quite unreliable and often goes against browsers privacy rules…
Obviously, I cannot use session information with PHP on the server-side, nor cookies / local storage on the client-side, as all those solutions are tightly coupled with the browser itself (thank God Chrome won't share its cookies with Firefox on your computer). Those solutions would be perfect (and no need for a pusher) if we were using 1 single browser, but we need to handle multiple browsers on the same machine.
That's where I'm wondering if anyone would have already dealt with this design challenge and shared some tips, it would be awesome! Thanks for reading so far!
You can check the user agent of the browser.
You can check a combination of the request headers coming from different browsers.
You can explicitly throw and catch an error in the user's browser and send it in the request header/body to determine what browser they're using.
You can do canvas drawings to see the user's GPU/CPU information (since you're already using html5 that's a bonus).
You can directly use webgl to do the same with perhaps different metrics (since canvas uses webgl anyways).
You can check their typing speed or even build up a profile of their vocabulary and use of language.
If you ask for permissions you can see all of their connected media devices like headphones, even just asking for audio permissions will show you all of them.
You can benchmark their CPU with things like the time it takes to find primes or encrypt a key.
You can use audio fingerprinting, which is almost as unique as your voice, since each browser and CPU architecture slightly differ in the digital pattern and oscillations created from audio, which can be captured.
You can check their window size and screen size and screen resolution.
There's probably even more I didn't think of now, you can also use any of them in combination to fingerprint a device.
For more information research browser sniffing and digital fingerprinting. What's more is that you can uniquely identify the user across their own browsers on the same computer and also different users from different devices using a combination of browser sniffing/digital fingerprinting.
In your specific case you can't use all the browser sniffing techniques but you can still use some of them, like the user agent since it will still give you the user device information even if they're using a different browser.
The idea with digital fingerprinting is that you want to build up a probability high enough that you can be fairly certain it's the same user, you can't ever be truly sure, but sure enough. Something like screen size doesn't mean much by itself, there's millions of devices using i.e. a size 1600 screen, however consider the following hypothetical example:
User's device has screen size of 1600, that's i.e. ~1/8 users.
User's device took 20ms to encrypt a 4096 key, that's i.e. ~1/8 users.
User's device took 40ms to draw a canvas image, that's i.e. 1/8 users.
Now you already have a 8 * 8 * 8 = 1/512 probability of knowing what user it is and that value goes up way higher very quickly, based on 3 fundamentally unidentifiable things.
However it should be noted that using any browser sniffing or digital finger printing techniques like above fall under privacy regulations (at least in some countries). A lot of things like the user agent is being deprecated and if you do things like this on a site you'll get into trouble with things like GDPR. I believe you can get around that if you explicitly ask the user for their permission and let them know that i.e. their browser is being fingerprinted. However you have to be careful because doing this can get you in trouble if it's malicious, doing things like this without a user's knowledge is unethical.

Can Javascript detect if a mobile device is muted?

My website is currently playing sounds when the user answers a question right/wrong. But I notice that on my tablet (iPad) and mobile (iPhone) it plays the sounds even though I put it in silence mode. And I don't want the phone/tablet to play sounds when the user has clearly set their device in silent mode (the Ringer). So, can I detect whether a device is muted/silenced and then not play any sounds? I tested on Safari and Chrome, and it always plays the sound, irrespective of the Ringer's state.
EDIT: If it is not possible to read this information, then my question would be if there is a way to play sounds that DOES respect the user's muting preferences? I am using jQuery's $("#correctsound").trigger('play'), and clearly this doesn't respect those settings. Do we have a different way to play sounds that takes these settings into account?
The simple answer to your question is no. Web pages don't have access to that kind of information about the client. More info here: Javascript: Can you read the systems volume? Furthermore, it is important to note that iOS has different volume settings for ringers and for media, according to Macworld:
The key to mastering volume adjustment is understanding that most of
the sounds on your device fall into one of two categories. General
audio includes music and other media, and the voice volume on the
iPhone and for FaceTime on all devices. The “ringers and alerts”
category includes not only the iPhone ringer, but also: FaceTime
rings; Clock app alarms; notifications and individual app alerts;
keyboard clicks; and miscellaneous app sounds like the whoosh of
sending Mail.
In other words, if a user wants to mute audio coming from web pages, they should mute the media volume. Ringer volume has nothing to do with web pages, so putting your phone in "silent" mode is only meant to affect the ringer volume. If you need help changing your device's volume settings, check out How can I lower the media volume on my iPhone when no media are playing? on the Apple Stack Exchange.

Is it possible to detect whether a browser tab is playing audio or not?

I am looking for a way to detect whether a sound is being played in the current tab of Chrome. I would like to emphasize that the context is a web app and not a chrome extension nor a single audio element. My assumption is that the browser "knows" that the tab is playing sound by displaying an audible icon in the tab header, so I am guessing that there is some kind of browser HTML5 API for that.
Simple answer: no
Long answer:
Some-what-ish would be the best case in this context.
Chrome has a dev-only API for it's browser that hooks on audio devices connected, but it's not possible to use this in a real environment. (source)
The chrome.audio API is provided to allow users to get information
about and control the audio devices attached to the system. This API
is currently only implemented for ChromeOS.
There is also an interesting solution answered by Jared Sohn, the principle is that a plugin (should be web possible as well) scans the webpage for files playing audio. You could rewrite something like this for your webpage (by grabbing all possible sources for audio and checking them individually). (source)
Perhaps the closest that you can do is something similar to what the
MuteTab Chrome extension does (written by me,
http://www.github.com/jaredsohn/mutetab), which basically scans the
page for object, embed, audio, video, and applet tags and hides them
from the page. Unfortunately, this misses web audio

How do I block/prevent video downloader addins or programmes?

I have a video site using a HTML5 video player. Users pay money to join the site. But the download manager (in mozilla) or real player download manager can download our videos from the server.
I want to prevent or block these applications. How can I prevent the programs from running?
There is no DRM (Digital Rights Management) in the HTML5 spec, so you cannot do it with HTML5 video.
There are attempts to add DRM to HTML 5 (Encrypted Media Extensions)
With tech companies abandoning the proprietary Flash and Silverlight
media players for HTML5, it was inevitable somebody would try to
inject DRM into the virgin spec.
Microsoft, Google and Netflix are that “somebody”, having submitted a
proposed modification to HTML5 to the World Wide Web Consortium (W3C)
for “encrypted media extensions”.
http://www.theregister.co.uk/2012/02/23/microsoft_google_netflix_html5_drm_infection/
However, such extensions are not available today and will not be for some time, if indeed the proposal is even adopted.
If you need DRM, you will need to use a video technology that supports it.
Even with DRM you simply can't - whatever you've sent to client (keys/content/whatever), client can simply save and replay when he needs decoded stream again. The only solution that would reliably delay decoding, is some hardware solution, but as I understand you'll be going over regular HTTP and browser.
Your problem is legal one and should be solved with legal means.
Overlay their unique user ID onto the video, so if they do capture it, then legal action can be taken as you can prove it's them that downloaded it.
other than that, nothing you can do really...

Categories

Resources