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

user285594 picture user285594 · May 22, 2016 · Viewed 18.2k times · Source

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.

Answer

zevnicsca picture zevnicsca · Jun 8, 2016

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.