目錄

前言? ? ? ??

禁用右鍵菜單

禁用快捷鍵

監(jiān)控控制臺(tái)

完整邏輯

---

前言? ? ? ??

????????前端的數(shù)據(jù)在瀏覽器中一直處于一個(gè)裸奔的狀態(tài)，只要是稍微懂一點(diǎn)計(jì)算機(jī)的人，都可以在瀏覽器的控制臺(tái)中拿到前端頁(yè)面的所有數(shù)據(jù)，包括和后端的交互數(shù)據(jù)。為了讓前端的數(shù)據(jù)更安全，我們可以禁止用戶打開控制臺(tái)，不允許用戶查看日志和接口數(shù)據(jù)。

禁用右鍵菜單

瀏覽器允許用戶通過右鍵點(diǎn)擊網(wǎng)頁(yè)并選擇“檢查”來打開控制臺(tái)，我們?cè)陧?xiàng)目中禁用用戶的禁用右鍵菜單，以防止用戶打開控制臺(tái)的操作

document.addEventListener('contextmenu', function(event) {event.preventDefault(); // 禁用右鍵菜單
});

禁用快捷鍵

?瀏覽器不止可以通過右鍵點(diǎn)擊網(wǎng)頁(yè)并選擇“檢查”來打開控制臺(tái)，用戶還可以通過快捷鍵的方式打開控制臺(tái)。所以我們也要禁用用戶以快捷鍵的方式打開開發(fā)者工具。

document.addEventListener('keydown', function(event) {// 阻止F12鍵if (event.keyCode === 123) {event.preventDefault();}// 阻止Ctrl + Shift + Iif (event.ctrlKey && event.shiftKey && event.keyCode === 73) {event.preventDefault();}// 阻止Ctrl + U（查看頁(yè)面源代碼）if (event.ctrlKey && event.keyCode === 85) {event.preventDefault();}
});

監(jiān)控控制臺(tái)

除了以上的特殊情況外，用戶還可能通過其他途徑打開控制臺(tái)，所以我們可以定義一個(gè)計(jì)數(shù)器監(jiān)空控制臺(tái)的日志打印，如果控制臺(tái)打印了日志就進(jìn)行頁(yè)面重定向。

// 創(chuàng)建一個(gè)新的錯(cuò)誤對(duì)象 new Error()
// 打開控制臺(tái)的時(shí)候，會(huì)訪問對(duì)象里面的屬性，觸發(fā)get()方法，進(jìn)而實(shí)現(xiàn)頁(yè)面重定義
setInterval(() => {console.log(Object.defineProperties(new Error(), {message: {// eslint-disable-next-line getter-returnget() {window.location.href = 'about:blank';}},}));}, 2000);

完整邏輯

useEffect(() => {setInterval(() => {console.log(Object.defineProperties(new Error(), {message: {// eslint-disable-next-line getter-returnget() {window.location.href = 'about:blank';}},toString: {value() {new Error().stack?.includes('toString@') && alert('Safari');}}}));}, 2000);document.addEventListener('contextmenu', function(event) {event.preventDefault(); // 禁用右鍵菜單});document.addEventListener('keydown', function(event) {// 阻止F12鍵if (event.keyCode === 123) {event.preventDefault();}// 阻止Ctrl + Shift + Iif (event.ctrlKey && event.shiftKey && event.keyCode === 73) {event.preventDefault();}// 阻止Ctrl + U（查看頁(yè)面源代碼）if (event.ctrlKey && event.keyCode === 85) {event.preventDefault();}});},[])