Javascript - How to stop pinch zoom, multi touch input attacks?

javascript jquery windows google-chrome chromium

23,274

Solution 1

You should be able to prevent users from zooming in by adding this meta tag to your <head>:

<meta name="viewport" content="width=device-width, user-scalable=no">

My version of Google Chrome Version 51.0.2704.84 (64-bit), respects this setting when I test it using its touch emulation in the developer tools.

For example:

A website that is zoomable by pinching: Hacker News

<meta name="viewport" content="width=device-width, initial-scale=1.0">

A website that is not zoomable by pinching: Designer News

<meta name="viewport" content="width=device-width, user-scalable=no">

I would like to comment that allowing your users to zoom in and out shouldn't be considered an “attack”. Zooming in is very important for people with bad eye sight (or the visually impaired, I'm not sure what the correct and polite English term would be).

If you disable the natural zoom behavior, you should take full responsibility for the readability of your web page.

Solution 2

I don't know if this counts as a full answer but I don't have the rep to comment. One option is to set a handler for touch events window.addEventListener("touchstart", touchHandler, false); and then write a touchHandler function

function touchHandler(event){
    if(event.touches.length > 1){
        //the event is multi-touch
        //you can then prevent the behavior
        event.preventDefault()
    }
}

Here is some more info about developing with touch events https://mobiforge.com/design-development/html5-mobile-web-touch-events You will have to set the handler for a different touch event to prevent the default pinch zoom behavior depending on the browser. A list can be found here: http://www.quirksmode.org/mobile/default.html

I don't know if this will work for you but it might be worth a try.

Solution 3

This is how you prevent zooming in Chrome:

document.addEventListener("touchstart", function(e){
e.preventDefault();
},{passive: false});

Maybe except of some element

document.getElementById('someelement').addEventListener('touchstart', function(e){e.stopPropagation()}, false);

Solution 4

Assuming you are running the kiosk on a PC, there is no way to do this programmatically from a web application.

You have to disable the multi-touch gesture support either in your touch device driver settings or in the operating system setting. Here is a good example - Windows 7 touch screen - disabling multi-touch gesture not working

Solution 5

This was the best solution for me:

document.addEventListener('touchmove', e => {
  if (e.touches.length > 1) {  
     e.preventDefault();
  }
}, {passive: false})

View more solutions

23,274

Author by

Admin

Updated on July 17, 2022

Comments

Admin almost 2 years
Current Google chrome stable version stopped manually blocking pinch zoom, which was possible in older versions with following settings:
```
chrome://flags/#enable-pinch
```
I am getting attacks in my kiosk from some random pinch zoom/multi touch inputs.

How to tell JavaScript to disable pinch zoom/multi touch? (to protect the kiosk)

I tried following but nothing is stopping the kiosk from ignore pinch zoom attacks.
```
$(document).ready(function() {

  $(document).bind('contextmenu', function()  {
    console.log('NO NO NO. STOP!!!');
    window.location.reload();
    return false;
  });

  $(document).mousedown( function() {
    console.log('NO NO NO. STOP!!!');
    return false; 
  });

});
```
EDIT:

chrome://flags/#enable-pinch - never works anymore in Google chrome. Google should not have removed it and community should have protested to not have it removed.
Admin about 8 years

This is Brilliant if it works, i will give it a try and later if i see its working, then i can put this as selected answer. thanks
Fanky over 5 years

Not working. Even your link - Designer News - is zoomable by multitouch in Chrome 72.0.3626.109 (Official Build) (64-bit) on desktop.. stackoverflow.com/questions/49371073/…
Mitch about 5 years

Change "touchstart" to "touchmove" to allow tap on link, but prevent zoom on pinch.
Alireza over 3 years

Not a good idea. You are disabling touch interactions completely like pan, tap.
Randy over 3 years

Following Apple's lead, all browsers seem to now ignore all viewport meta tags restricting zoom or maximum scaling. Pretty stupid I think to put what they THINK are undesirable features, above common sense developer control. Like you said, take full responsibility for readability". I guess they don't trust developers to responsibly do anything anymore. I think its one of the major reasons companies opt for APPS to view their content over mobile browsers.
Randy over 3 years

It did work for me on I-phone and Chrome versions available to me now (late 2020).
Nadav almost 3 years

Do note that, by default, touchstart is a passive event. preventDefault() will not have any effect inside a passive event, so passing {passive: false} explicidly in this case neccessary in order for the touchstart event to become cancelable.