1. 添加 HTTP 头
在服务器响应头中添加:
X-Frame-Options: deny这可以阻止在 iframe 中打开页面,防止开发者工具操控页面。
2. 添加 meta 标签
在 HTML head 中添加:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />这可以禁用页面缩放,防止查看页面源代码。
3. 使用 JavaScript 监听快捷键
添加代码:
// onkeydown
// 禁止键盘F12键
document.onkeydown = function (e) {
if (e.keyCode == 123) {
return false
}
}
// 禁用右键菜单
document.oncontextmenu = function () {
return false
}
// addEventListener
// 禁用右键菜单
document.addEventListener('contextmenu',function(e){
e.preventDefault(); // 阻止默认事件
});
// 禁止键盘F12键
document.addEventListener('keydown',function(e){
if(e.key == 'F12'){
e.preventDefault(); // 如果按下键F12,阻止事件
}
});这可以通过 JS 阻止快捷键打开 F12 开发者工具和右键查看元素。
4. 使用混淆器
工具混淆代码
运行 Vue CLI 3 打包后的代码,其实是可读的,如果要加强防护可以使用混淆器等工具对代码进行混淆,使其不易阅读从而达到防护效果。
