通过head标签使得访问者无法通过F12调用控制台来调试网页

本文最后更新于 2024-05-21，

若内容或图片失效，请留言反馈。部分素材来自网络，若不小心影响到您的利益，请联系我删除。

本站只有Telegram群组为唯一交流群组，点击加入

文章内容有误？申请成为本站文章修订者或作者？向站长提出申请

前言

今天群友需要下载一份GB标准文档的模板，6个网站5个收费。苦于无处寻找，于是到文档库去搜索免费下载的国标文件。

https://openstd.samr.gov.cn/bzgk/gb/index

文档大概长这样：

但是无法下载这种仅供在线预览的文档。网络上找到一个方法

国标网标准下载方法

目前国标网上只能在线预览，如果不联网则没法查看，因此在网上寻找一些解决的办法，没想到在github中已经有大佬出了代码。使用方法是，浏览器中调出控制台，edge是ctrl+shift+I,然后根据提示输入以下代码回车即可。

 $("head").append('<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>');
     let my_script=`<script>
     function px2Num(px) {
         return Number(px.split("px")[0].toString());
     }
     function getPages(){
         if( $("canvas[id^=canvas_]").length > 0 ) {
             $("canvas[id^=canvas_]").delete();
         }
         var baseurl = "http://c.gb688.cn/bzgk/gb/";
         var pagecount = $("div.page").length;
         var pages = new Array(pagecount);
         var pagebg = new Array(pagecount);
         var title = $("title").text().split("|")[1].toString().trim();
         var pheight = $("#0").css("height");
         var pwidth = $("#0").css("width");
         $(".page").each(function(i, elem) {
             if (elem.hasAttribute("bg")) {
                 pagebg[i] = elem.getAttribute("bg");
             } else {
                 pagebg[i] = $(elem).children("span").first().css("background-image").split('"')[
                     1].split(/\\//).slice(-1)[0];
             }
         });
         //拼合图片
         $(".page").each(function(i, elem) {
             var canvasclone = $("canvas#canvas").clone();
             canvasclone.attr("id","canvas_"+i).css("background-color","#FFFFFFFF");
             $("#newimg").append(canvasclone);
             var canvas = document.getElementById('canvas_'+i);
             var ctx = canvas.getContext('2d');
             ctx.fillStyle="white";
             ctx.fillRect(0,0,px2Num(pwidth), px2Num(pheight));
             $("#imgContainer").append("<img id=img_" + i + " src='" + baseurl+pagebg[i] + "' />")
             var image = document.getElementById('img_'+i);
             image.addEventListener('load', e => {
                 $(elem).children("span").each(function(j,s){
                      ctx.drawImage(image, -px2Num($(s).css("background-position-x")), -px2Num($(s).css("background-position-y")),  119, 168,
                      $(s).attr("class").split('-')[1]*119, $(s).attr("class").split('-')[2]*168, 119, 168);
                 });
             });
         });
     }
     function isimgComplete(imgs){
         //$("img[id^=img_]")
         flag = true;
         for(i=0;i<imgs.length;i++){
             flag=flag && imgs[i].complete;
         }
         return flag;
     }
     function downloadPDF(){
         if( $("canvas[id^=canvas_]").length == 0 ) {
             alert("请先点击获取页面！");
             return;
         }
         var images = $("img[id^=img_]");
         //alert(isimgComplete(images));
         if(!isimgComplete(images)){
             alert("页面尚未提取完，稍后再试");
             return;
         }
         var pheight = $("#0").css("height");
         var pwidth = $("#0").css("width");
         const { jsPDF } = window.jspdf;
         const pdf = new jsPDF('p','px',[px2Num(pwidth), px2Num(pheight)]);
         var title = $("title").text().split("|")[1].toString().trim();
         let [imgX, imgY] = [595.28, 841.89];
         let imgHeight = imgX / (px2Num(pwidth) / px2Num(pheight));
         $("canvas[id^=canvas_]").each(function(i,e){
             pdf.addImage(document.getElementById('canvas_'+i).toDataURL('image/jpeg'), 'jpeg', 0, 0, px2Num(pwidth), px2Num(pheight), '', 'MEDDIUM');
             //pdf.addImage(document.getElementById('canvas_'+i).toDataURL('image/png'), 'jpeg', 0, 0, imgX, imgHeight, '', 'SLOW');
             pdf.addPage();
         });
         let targetPage = pdf.internal.getNumberOfPages();
         pdf.deletePage(targetPage); // 删除最后一页
         pdf.save(title + ".pdf");
     }
      function downloadPDF0(){
         while($("canvas[id^=canvas_]").length < $(".page").length){
             setTimeout(function(){
             },1000);
         }
      }
 </script>`;
 
 let source_img = `
     <div id="canvas_container">
     <input type="button" value="获取页面" onclick="getPages()"/>
     <input type="button" value="下载pdf" onclick="downloadPDF()"/>
     </div>
     <div id="imgContainer" style="display:none;"><img id="source" src=""></div>
     <div id="newimg" width="1190px"></div>
     <canvas id="canvas" width="1190px" height="1680px" style="display:none;"></canvas>`;
 
 let style = `
     <style>
         #canvas_container {
         position: fixed;
         height: 30px;
         width: 150px;
         top: 50px;
         left: 10px;
         border: 1px;
         /*background-color: #00ff0099;*/
         border-radius: 3px;
         }
     </style>
 `;
 
 $("head").append(style);
 $("body").append(source_img);
 $("body").append(my_script);

一开始发现无法通过F12调出控制台。于是乎我想起还有这回事，顺便补充一下实现的方法（简单方法）

这种方法无法阻止ctrl+shift+Id 调用控制台，于是增加了一个中断调试的方法，代码如下

使用 HTML 的 <head> 标签本身无法完全阻止用户通过 F12 调用控制台来调试网页。浏览器开发工具是内置功能，用户可以通过多种方式访问它们。尽管如此，你可以采取一些措施来增加调试的难度，但无法完全阻止。这些方法包括：

禁用右键菜单

虽然这不能阻止 F12，但它可以增加一些不便。

<script>
  document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
  });
</script>

阻止键盘快捷键

你可以拦截常用的开发工具快捷键（如 F12、Ctrl+Shift+I、Ctrl+Shift+J 等）。

<script>
  document.addEventListener('keydown', function(event) {
    if (event.key === 'F12' || (event.ctrlKey && event.shiftKey && (event.key === 'I' || event.key === 'J'))) {
      event.preventDefault();
    }
  });
</script>

检测和关闭开发工具

虽然用户可以重新打开开发工具，但你可以检测到它们的打开并采取一些行动。

<script>
  (function() {
    const element = new Image();
    Object.defineProperty(element, 'id', {
      get: function() {
        console.log('DevTools is open');
        // 这里可以添加你想要执行的代码
      }
    });
    console.log(element);
  })();
</script>

混淆和压缩 JavaScript

混淆和压缩你的 JavaScript 代码，使其难以理解和调试。

使用工具如 UglifyJS 或 Terser。
在线工具如 JavaScript Obfuscator。

定时器检测工具

使用定时器不断检查开发工具是否已打开。若检测到工具打开，可以重新加载页面或执行其他操作。

<script>
  let devtools = false;
  let threshold = 160;
  
  setInterval(() => {
    const start = performance.now();
    debugger;
    const end = performance.now();
  
    if (end - start > threshold) {
      if (!devtools) {
        alert('DevTools detected!');
      }
      devtools = true;
    } else {
      devtools = false;
    }
  }, 1000);
</script>

这些方法都不能完全阻止用户调试网页，但它们可以增加一些难度。如果你的网页包含敏感信息或关键功能，最好依赖服务器端安全措施，确保即使客户端被破解，也无法访问到核心数据或功能。

在打开开发者模式后打开网页，拒绝访问的方法

要在检测到开发者工具打开时拒绝访问，可以通过遮盖页面内容并显示一个警告信息，或者完全阻止页面的交互

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
        }
        #blocker {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            color: white;
            text-align: center;
            padding-top: 20%;
            font-size: 24px;
            z-index: 9999;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph with the global font.</p>

    <div id="blocker">Access Denied</div>

    <script>
        (function() {
            const threshold = 160;
            let devtoolsOpen = false;

            setInterval(() => {
                const start = new Date().getTime();
                debugger;
                const end = new Date().getTime();

                if (end - start > threshold) {
                    if (!devtoolsOpen) {
                        devtoolsOpen = true;
                        // 显示拒绝访问的覆盖层
                        document.getElementById('blocker').style.display = 'block';
                        // 禁用页面的所有交互
                        document.body.style.pointerEvents = 'none';
                    }
                } else {
                    devtoolsOpen = false;
                }
            }, 1000);
        })();
    </script>
</body>
</html>

在这个示例中，blocker 是一个覆盖层，当检测到开发者工具打开时显示该层，并禁用页面的所有交互。这样，用户在调试模式下将无法访问页面内容。

提示“拒绝访问”消息并停止脚本执行

在检测到开发者工具打开时，显示“拒绝访问”消息并停止执行所有 JavaScript 脚本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
        }
        #blocker {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            color: white;
            text-align: center;
            padding-top: 20%;
            font-size: 24px;
            z-index: 9999;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph with the global font.</p>

    <div id="blocker">Access Denied</div>

    <script>
        (function() {
            const threshold = 160;
            let devtoolsOpen = false;

            setInterval(() => {
                const start = new Date().getTime();
                debugger;
                const end = new Date().getTime();

                if (end - start > threshold) {
                    if (!devtoolsOpen) {
                        devtoolsOpen = true;
                        // 显示拒绝访问消息
                        document.getElementById('blocker').style.display = 'block';
                        // 禁用页面的所有交互
                        document.body.style.pointerEvents = 'none';
                        // 停止所有脚本执行
                        stopScripts();
                    }
                } else {
                    devtoolsOpen = false;
                }
            }, 1000);

            function stopScripts() {
                setTimeout(function() {
                    while (true) {}
                }, 0);
            }
        })();
    </script>
</body>
</html>