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

Question

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.

I tried also --disable-pinch but no luck to block pinch zoom. I have kiosk in Railway where students, many random public users are passing by the kiosk. They are putting the kiosk in pinch zoom to 100%. And remotely you cant reset it unless you manually restart the whole kiosk. Every hour its happening and the kiosk is too far to do this changes. its pinch zoom attack. old version had protection but now not anymore. — , May 22 '16 at 21:19
Please come with some solution. Google chrome community removed it permanently and very proud about it, without giving alternative to the people who have problems now. see: https://bugs.chromium.org/p/chromium/issues/detail?id=613873 — , May 24 '16 at 08:31
@Bergi: can you please make the question bounty to spread to many? its important to have an answer on this. Because it has been for ages available and now without notice, its removed without leaving any alternative. — , Jun 06 '16 at 05:45
chrome://flags/#touch-events - it disable the whole touch screen. in past the pinch zoom was possible to disable. via command line argument or flags. but now they have excuse that flags can be removed anytime without warning. but no where it was mentioned command line arguments will be also removed without warning. Can you please check more details how then someone disable pinch zoom only? — , Jun 06 '16 at 10:20

score 36 · Answer 1 · answered Jun 08 '16 at 21:08

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.

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 — , Jun 09 '16 at 09:55
It did work for me on I-phone and Chrome versions available to me now (late 2020). — Randy, Dec 01 '20 at 23:40

score 12 · Accepted Answer · answered Jun 10 '16 at 14:08

12

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.

answered Jun 10 '16 at 14:08

user3297291

22,592
4
29
45

6

Not working. Even your link - Designer News - is zoomable by multitouch in Chrome 72.0.3626.109 (Official Build) (64-bit) on desktop.. https://stackoverflow.com/questions/49371073/chrome-ignores-user-scalable-no-meta-tag – Fanky Feb 17 '19 at 21:42
2

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 Nov 27 '20 at 16:30
This did work in Chrome, but not Samsung Internet. – agiopnl Nov 26 '22 at 02:02

score 8 · Answer 3 · answered Feb 17 '19 at 22:41

8

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);

answered Feb 17 '19 at 22:41

Fanky

1,673
1
18
20

2

Change "touchstart" to "touchmove" to allow tap on link, but prevent zoom on pinch. – Mitch Apr 30 '19 at 23:40
1

Not a good idea. You are disabling touch interactions completely like pan, tap. – Alireza Nov 03 '20 at 14:16
1

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. – Nadav Aug 27 '21 at 08:29

score 4 · Answer 4 · edited May 23 '17 at 12:00

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

edited May 23 '17 at 12:00

Community

1
1

answered Jun 08 '16 at 09:41

Roman Pletnev

5,958
2
21
28

score 4 · Answer 5 · answered Dec 03 '20 at 01:38

4

This was the best solution for me:

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

answered Dec 03 '20 at 01:38

Maycow Moura

6,471
2
22
19

score 1 · Answer 6 · answered Jun 12 '16 at 12:18

hi here is my suggestion .Try making it sense if there is multiple inputs and the make it average them out for exaple finger one is at (10,20) and finger two is at (20,10) it is averaged to (15,15).Sorry i could only suggest ideas and not code thank you

score 1 · Answer 7 · answered Apr 17 '19 at 12:32

1

Fanky's answer works for me (Opera in kiosk mode), except that I use touchmove instead of touchstart. And to keep sliders working, add a specific listener on it as indicate by Fanky.

answered Apr 17 '19 at 12:32

MR_1204

91
1
3

duduwe · Answer 8 · 2022-10-14T03:25:56.847

1

html {
  height: 100%;
  touch-action: pan-x pan-y;
}

This will safely prevent pinch zoom. Well, so far with my experience. <meta content="user-scalable=no" /> did not work for me. Js solution is a hacky way and can interfere with the normal event.

edited Oct 14 '22 at 03:25

answered Oct 14 '22 at 03:08

duduwe

888
7
16

Egbert Nierop · Answer 9 · 2021-09-21T19:09:35.257

None of above worked for me, in React JS 7.x

hacking index.html and add a listener seems to be overriden by React. This below however, did the trick in index.js, (note, rootElement is already there in standard React projects)

..... Code omitted for brevity

     noResize = (e) => {
    if (e.touches.length > 1) {
        e.preventDefault();
        console.debug('cancel touch')
    }
}
componentWillUnmount() {
    rootElement.removeEventListener('touchstart', this.noResize);
}
componentDidMount() {
    rootElement.addEventListener('touchstart', this.noResize)

score 0 · Answer 10 · answered Aug 26 '23 at 09:20

0

cross-browser solution (works for opera also) - to disable zoom & scrolling simply use:

<body ontouchmove="event.preventDefault()">

answered Aug 26 '23 at 09:20

Daniel Garmoshka

5,849
39
40

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

10 Answers10

Linked