Jak poprawnie zrobić ppm block i keydown blocki w js

Cześć, ogólnie zauważyłem że bardzoo dużo osób pastuje jakieś JavaScripty na 100 linijek nie wiem po co xD

Krótki poradnik jak zrobić to poprawnie.

ah i potrzebujesz jQuery do $(...).on()

PPM block i keydown/keyup to nie są zabezpieczenia kodu źródłowego strony!

Jak chcesz zabezpieczyć JS to użyj tej strony: https://javascriptobfuscator.herokuapp.com/

What is this?

This tool transforms your original JavaScript source code into a new representation that's harder to understand, copy, re-use and modify without authorization. The obfuscated result will have the exact functionality of the original code.

+ ładuj HTML używając JS np. z zewnętrznego serwera + minify CSS i ew HTML

Pamiętaj jednak, że nie możliwe jest 100% ukrycie a jedynie utrudnienie odczytania kodu, bo wszystko co jest po stronie klienta należy do niego. 

Ale jak już, to:

document.addEventListener('contextmenu', function (event) { 
    event.preventDefault() 
});

$(window).on('keydown', function () {
    if (event.keyCode === 123)
        return false;
    else if (event.ctrlKey && event.shiftKey && event.keyCode === 73)
        return false;
    else if (event.ctrlKey && event.keyCode === 73)
        return false;
    else if(event.ctrlKey && event.shiftKey && event.keyCode === 74)
        return false;
    else if(event.ctrlKey && event.keyCode === 74)
        return false;
});

Wersja ES2016 używająca Arrow functions:

document.addEventListener('contextmenu', (event) => { 
    event.preventDefault() 
});

$(window).on('keydown', () => {
    if (event.keyCode === 123)
        return false;
    else if (event.ctrlKey && event.shiftKey && event.keyCode === 73)
        return false;
    else if (event.ctrlKey && event.keyCode === 73)
        return false;
    else if(event.ctrlKey && event.shiftKey && event.keyCode === 74)
        return false;
    else if(event.ctrlKey && event.keyCode === 74)
        return false
});

Wersja ES2016 z obiektem keycodes + wyjaśnienie co to robi: 

document.addEventListener - js jest event based wiec dajemy dajemy event listener do domyslnego eventu przegladarki: otwarcia contextmenu [ppm]

event.preventDefault() zapobieganie wykonania domyślnej reakcji na ten event w tym przypadku przeglądarki

let to var w tym przypadku nie ma wiekszej roznicy bo nie znajduje sie wewnatrz funkcji

po prostu lubie bardziej let niz var

let codes = {
    f12: 123,
    i: 73,
    j: 74
};

document.addEventListener('contextmenu', (event) => {
    event.preventDefault() // <-- zapobieganie [dokładniej to blokowanie menu contextowego przeglądarki żeby ktoś przypadkiem nie wybrał z listy Zbadaj element] naciśnięciu prawego przycisku myszy
});

$(window).on('keydown', () => { // <-- zapobieganie [dokładniej to blokowanie domyślnej reakcji przeglądarki na to] skrótom klawiszowym View-Source [[Chrome, jak potrzebujesz zablokować inne klawisze to ten skrypt jest łatwy do edycji, kody przycisków możesz znaleźć np. tu: http://keycode.info/
    if (event.keyCode === codes.f12)
        return false;
    else if (event.ctrlKey && event.shiftKey && event.keyCode === codes.i)
        return false;
    else if (event.ctrlKey && event.keyCode === codes.i)
        return false;
    else if(event.ctrlKey && event.shiftKey && event.keyCode === codes.j)
        return false;
    else if(event.ctrlKey && event.keyCode === codes.j)
        return false
});

ps event nie bedzie undefined bo to objekt jquery api ale w 1 przypadku przyjmuje wartosc z [callbacku]*  funkcji addEventListener

*jak nie wiesz to https://www.w3schools.com/jquery/jquery_callback.asp