網址連結跳轉外部安全提醒程式碼

一亩地發表於2024-05-04

網頁的安全性最佳化是一個越來越被開發者重視的問題，當本站連結點選跳轉到第三方外連結時，要彈框提示資訊，需要支援jquery引用 。

<!DOCTYPE html>

        <html>

        <head>

            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

            <meta http-equiv="X-UA-Compatible" content="IE=Edge">

            <meta name="viewport" content="width=device-width, initial-scale=1.0">

            <title>網址連結跳轉安全提醒 - bokequ.com</title>

            <link href="favicon.ico" rel="shortcut icon" type="image/x-icon">

            <style>

            html,body{background:#F3F4F5;font-family: PingFang SC,Hiragino Sans GB,Arial,Microsoft YaHei,Verdana,Roboto,Noto,Helvetica Neue,sans-serif;padding:0;margin:0;}

            a{text-decoration:none;}

            .urlArea            { padding-top:50px;width:450px;margin:auto;word-break: break-all; }

            .urlArea .logo img    { display: block;margin:auto;margin-bottom: 16px; max-width:350px; }

            .urlArea .main     { background:#fff;padding:24px;border-radius: 12px;border: 1px solid #E1E1E1; }

            .urlArea .flex     { display:flex;align-items:center; }

            .urlArea .btn      { display:flex;justify-content:flex-end;align-items: center; }

            .urlArea .tip      { background:#e8eefa;padding:12px;margin-bottom:16px;border-radius:4px; }

            .urlArea .urlColor { color:red; }

            .urlArea .urlBox   { font-size: 14px;color: #222226;line-height: 24px;margin-bottom:24px; }

            .urlArea .ico      { width:24px;height:24px; }

            .urlArea .goBtn        { white-space: nowrap;font-size: 14px;background-color: #408ffa;color:#ffffff;border: 1px solid #408ffa;display:inline-block;box-sizing: border-box;padding:6px 18px;border-radius: 18px;margin-left:8px; }

            .urlArea .icoTxt   { font-size: 16px;font-weight: 600;color: #222226;line-height: 22px;margin-left:12px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap; }

            @media (max-width: 600px){

                .urlArea    { padding-top:90px;width:94%; }

            }

            </style>

        </head>

        <body>

            <div class="urlArea">

                <div class="logo"><img src="https://thirdqq.qlogo.cn/g?b=qq&nk=2195335317&s=100" alt="部落格趣"></div>

                <div class="main">

                    <div class="flex tip">

                        <img class="ico" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADWUlEQVRoQ+2YvWsUQRiH33fmOMQiRQor7RQSweB9KAQEg1iYKFaZnJJ/wcTOMhLs7Ez8FwLebikasTGCoJDcHSoYQbHRyiKFhajczCu3SS73sbfzsXNJDnLV3s4y83vm3X12dhAG/IcDnh+OAHpVkITISvg2DYyQjwyVcXGt3o9q960CdZELAWC6ERoRn/CgentgAGimOCVJPmsNzJFfx2DjuW8I7xWg+xMZ9enXRwIaaQ2LgJ/Z2aFzvm8l7wBypjBPpB7FzTQiu8uDypLPKngFIDE+rODPFwIYjgUA2GJw7AyGb7d8QXgFkCK/TEB3ksIh4GMeVucOHQCV8qNKwQcCymgA6ozBGJarmz4gvFWgLvKrAHTNLBS+yISbNrk6/yAhCnTV04X1pNDdBLmzoAX1pNDZCkTS2EB62mAtBpUwvgQaupAEy0qYdIp1VnAFNtGgCk0qozgJ02tRjOWnUCoFJxUiqZuLJEgB+AbCWKTmqWAE4mYXDGp7C8sapD7Wy3BjDVJke8iUH1aZS/lL8hFUXHvX6uWrUGMNUmByxiWK1sAxTyUqnoOBHCQatWADbadAJw0KoVgJwpLBEpo5WkC0CjOohsmQeVeV21dtuNAWy16QwAaKVVYwBbbboCbM+s+WrVCMBEm50lTwcAYKpVLYCpNrsALDXa7XezTQAtgKk2Y14wVi+yuIfWZBMgEcBGm6bWsLkODbSaCGCjTZtgNtfqtNoTwFabMffwb0DYWQvBLAEdtwm+5/lkrfYEsNVmazgElIzxcSyvr0dLiVu5opL4joC4C0SSVmMBXLTZBoDwnge1863npMjVCKDtnA1ML612Abhqs70C8JPB6VMYhv+iCgiRVfD1OwGcsAndPim4yUaHxjr3VrsAZCk3RwpS718i4gpjdK8RQil8SESzruGbzwODeV6uLXdM1t7fg9amDjBOq20VOAza1EJ0rFabAGm1qRvYVzt2rFabAHWRa3zjetmv9BU2oZ/VTFibarRHACQuXJZQX9uHgb0NwZFdwaDyKgKQorBAoBa99b4PHSHCAx7UFnYqULikUL0mArYPY6ceInrTA05gWHmz9xCL4kWF6ioAZFOP0NcO8C8jerm746H9HuhrFg+dHwF4mMRUXQx8Bf4DeBHHQHvQneAAAAAASUVORK5CYII=" alt="溫馨提醒">

                        <div class="icoTxt">請注意您的賬號和財產安全</div>

                    </div>

                    <div class="urlBox">

                        <span>

                            <div style="font-weight:bold;padding-bottom:8px;">即將跳轉到外部網站<span style="color:#c8c8c8;font-weight:bold;">，安全性未知，是否繼續？</span></div>

                            您將要訪問的連結不屬於本網站，請注意您的賬號和財產安全。<br />

                            前往：<a class="urlColor">http://www.smddw.com/</a>

                        </span>

                    </div>

                    <div class="btn">

                        <label style="color:red;font-size:12px;"><input type="checkbox" id="isOk" value="1" />本人已知曉風險，本人自願訪問，與本網站無關。</label>

                        <a id="goBtn" class="goBtn" href="#" target="_self" onclick="return CheckGoUrl()">繼續訪問</a>

                        <script language="javascript" type="text/javascript">

                        var goUrl = decodeURIComponent("http://www.smddw.com/");

                        document.getElementById("goBtn").href = goUrl;

 

                        function CheckGoUrl(){

                            if (document.getElementById("isOk").checked){

                                document.location.href = goUrl;

                                return true;

                            }else{

                                alert("請先打鉤左側【本人已知曉風險】項!"); // ，再點選【繼續訪問】

                                return false;

                            }

                        }

                        </script>

                    </div>

                </div>

            </div>

        </body>

        </html>

相關文章