Blazor에서 브라우저 우클릭 메뉴 / F12 개발자 도구 막는 방법

Blazor에서 브라우저 우클릭 메뉴 / 개발자 도구 막는 방법

 

웹 사이트를 운영하다 보면 소스 코드 보호나 사용자 조작 제한을 위해 브라우저의 우클릭 메뉴 또는 F12 개발자 도구 실행을 막고 싶을 때가 있습니다.

Blazor에서도 JavaScript를 이용하면 간단하게 이를 제어할 수 있습니다.

wwwroot 에 js 폴더 생성 후 site.js 파일 생성해 아래 스크립트를 작성합니다.

// Contextmenu
document.addEventListener("contextmenu", function (e) {
    e.preventDefault();
});

// F12 (개발자 도구 차단)
document.addEventListener("keydown", e => {
    if (e.key === "F12") e.preventDefault();
});

App.razor 에 아래 내용을 추가합니다.

<script src="js/site.js"></script>

이렇게 하면 사이트 전체에서 우클릭과 F12가 차단됩니다.

추가로 아래 단축키도 존재하여 추가로 막는 것이 좋습니다.

Ctrl + Shift + I : 개발자 도구
Ctrl + Shift + J :  Console
Ctrl + U : 페이지 소스 보기

document.addEventListener("keydown", function (e) {

    // F12
    if (e.key === "F12") {
        e.preventDefault();
    }

    // Ctrl + Shift + I
    if (e.ctrlKey && e.shiftKey && e.key === "I") {
        e.preventDefault();
    }

    // Ctrl + Shift + J
    if (e.ctrlKey && e.shiftKey && e.key === "J") {
        e.preventDefault();
    }

    // Ctrl + U
    if (e.ctrlKey && e.key === "u") {
        e.preventDefault();
    }

});