Develop Reference

Issue with denied fullscreen request in Firefox after a keypress with modifier

From what I understand, in all browsers there is a protection that denies a fullscreen request if they think that the request was not made following a user request. In orderto do this it checks that the request comes from a user input handler (keyboard or mouse for example), and (at least in Firefox) only allows a maximum of one second of processing between the input and the request.
In my case, I have the impression that I have come across an additional constraint, it seems that it is not possible to check that the modifiers are pressed at the same time as our key triggering the event.
Here is a minimal example that we can test via the console, which runs under Chrome but fails under Firefox:
document.addEventListener("keydown", (e) => {
if (event.key === "c" && event.altKey) {
event.preventDefault();
event.stopPropagation();
toggleFullScreen();
}
}, false);
async function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else if (document.exitFullscreen) {
document.exitFullscreen();
}
}
When testing, be careful to wait at least one second since the last click in the window before making the alt+c shortcut, otherwise the click authorization remains valid.
If you remove the condition && event.altKey , the toggle works every time you press c.
I'd like to know if this is intentionnal behaviour from Firefox or an bug since I did not manage to fin any documentation mentioning this. In any case, would there be a workaround for allowing more complex shortcuts to toggle fullcreen, like alt+meta+f ?

Shopify page keep refreshing after being redirected by javascript code

I am trying to create a website https://fone-kase-plus.myshopify.com/ that will detect what device model it's being accessed from (for example GALAXY A40) so it will immediately redirect the user to a corresponding page.
It seems to be working, but it will reload the page multiple times after redirecting. If I try to redirect it to non-shopify page (eg stackoverflow.com) this problem doesn't occur.
function deviceAPIcallback(result){
if(result.deviceName == "desktop"){
window.location.href = "https://fone-kase-plus.myshopify.com/pages/galaxy-a40";
}
else{
alert(result.deviceName);
}
}
Can you please tell me what the problem can be or at least how I can detect it by dev tools?
Thanks

When I go to the site from both my macOS laptop and my iPhone I only get the alert aspect of your function. What does result.deviceName return? You might need to add a third '=' to your first 'if' statement.
function deviceAPIcallback(result) {
if(result.deviceName === "desktop") {
window.location.href = 'https...';
} else {
alert(result.deviceName);
}
}

Restrain fullscreen mode exit based on password (prompt())

I am trying to develop a simple script that restrains if the user can or cannot leave fullscreen mode, based on password prompt. Its main objective is to avoid visitors of a museum using the interactive device for other purposes other than its primary goal, which is a browser app that teaches some things about the things exposed there, hence why I am trying to write this script in JS.
So I have created a simple code, which basically should listen to the event fullscreenchange and act based on that, but that's where I am facing my biggest problem: it apparently doesn't.
What it does basically is:
- Check if fullscreenchange was called;
- If it was, see if the user is trying to enter or leave fullscreen mode;
- If the user is leaving fullscreen mode, ask them to enter a password;
- If the password is incorrect, it should enable fullscreen mode again.
Take a look at what I have for now:
document.addEventListener("fullscreenchange", function() {
fullscreenchange();
});
document.addEventListener("mozfullscreenchange", function() {
fullscreenchange();
});
document.addEventListener("webkitfullscreenchange", function() {
fullscreenchange();
});
document.addEventListener("msfullscreenchange", function() {
fullscreenchange();
});
function fullscreenchange() {
var fullscreen = (window.fullScreen) || (window.innerWidth == screen.width && window.innerHeight == screen.height);
if(!fullscreen)
{
if(!passwordChecks()){
openFullscreen()
return;
}
}
}
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
function passwordChecks(){
var pass = prompt("Enter password to leave fullscreen:");
if(pass == "leave123")
return true;
return false;
}
The script doesn't return any errors on console (using DevTools from Chrome). But it also doesn't work, when you try to leave fullscreen, nothing happens, that's why I mentioned the fullscreenchange event is apparently not working.
Please let me know if there is any error in this code, and what can be done to achieve the final goal. It is simple, I hope, but I really need your help, guys.
Thank you.

Check this, it may be useful: https://medium.com/#andreas.schallwig/building-html5-kiosk-applications-with-vue-js-and-electron-c64ac928b59f. You just need to use the "kiosk" mode

Detect use of mobile phone by JavaScript

I have a web page. When I running the web page on my mobile phone, in that web page, the usage of mobile phone should be identified. If someone touch the display or use the phone in any way, the page should say that you used your phone.
I used JQuery blur focus method to check whether the browser tab is active or inactive. At anytime I use the phone, the tab will be gone to the background and detect that I used it but, Same thing happens for incoming calls. I need a way to prove that I didn't use the phone and it was an incoming call. So basically I need a way to keep someone away from the mobile phone for a certain time and notify if the person used the phone if he used it.
Anyone can help?

Can't take credit for this, I've seen it somewhere before.
function mobileCheck() {
try {
document.createEvent("TouchEvent");
return true;
}
catch(e) { return false; }
}
if (mobileCheck()) {
alert('mobile');
} else {
alert('not mobile');
}

So this is not JQuery but it does get the job done. Uses regexp for this.
let mobile = navigator.appVersion;
var testForMobile = /Mobile|mini|Fennec|Android|iP(ad|od|hone)/.test(mobile);
document.write(testForMobile)

Mobile can be detected by this simple one liner.
var isMobile = navigator.userAgent.match(/(mobi)/i) ? true : false;
isMobile would return true for mobile devices.

How to Disable Function keys using Javascript?

I'm having a page where i need to disable the Function keys mainly F12(Developertools).
I'm showing some sensitive data in the page so at any case i cannot make the users see the html and take the hidden fields.
I checked some javascript which is working for almost all the keys except the Function keys like f1, f12 etc.
Is there anyway that i can disable these buttons in the browser?
document.onkeyup = KeyCheck;
function KeyCheck() {
var KeyID = event.keyCode;
alert(KeyID);
switch (KeyID) {
case 123: //F12 KEY CODE
alert('hello');
return false;
break;
}
}
This is the code which im using for overriding the key. When I searched, the keycode of F12 key is 123 and im using the same code for overriding it. But unfortunately its not even hitting the "CASE" and the message box is not appearing when pressing F12, F1 etc buttons.
Please Help me in this.

There is no reliable way to prevent users from tampering with your javascript data, when you've sent it. Always use server-side checks to verify the returned data.
People can still use the browser's menu to enable the dev console. Or through right-click --> "Inspect Element", or by using hotkeys to open different sections of the console, then tabbing to another page in the console, or by using one of the hotkeys I've failed to mention.
Or, they can simply disable javascript. (Or edit the javascript to disable the block)
Now, you can be a little more thorough in disabling whatever button's functionality, by adding a:
event.preventDefault() in your event listener, but still, it's unreliable.

document.onkeydown = KeyCheck;
It worked.

No, you can't diasble view source/developer tools or any other application level functionality of the browser via JavaScript on the page.
There are plenty ways to see source of the web page. You are up to very hard task to restrict all external parties to access/store/view your HTML. Here is partial list of other things you'll have to disable:
proxies, including HTTP debuggers/proxies like Fiddler or ones that are built in to browsers.
direct GET requests from console tools like curl.
all sorts of web crawlers, including search engines like Google.
Use HTTPS and do not send sensetive information unless strictly required is the much easier way of protecting it than trying to limit what users can do with their machines.

Try this out:
<script language="JavaScript">
document.onkeypress = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
//alert('No F-12');
return false;
}
}
document.onmousedown = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
//alert('No F-keys');
return false;
}
}
document.onkeydown = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
//alert('No F-keys');
return false;
}
}
</script>

This Code works Perfectly for me to Disable Right Click and Disable F12
<script language=JavaScript>
var message="You Have No Permission";
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")

When user press F12 key, browsers developer tool bar will open in the below portion of the browser.
By using the developer tool bar user can see the design, javascript code and corresponding css applied to the controls in the page. To prevent the user to do that we will hide the developer tool bar.
Here is the code