网址链接跳转外部安全提醒代码

举报
博客趣 发表于 2024/01/16 14:34:54 2024/01/16
【摘要】 网页的安全性优化是一个越来越被开发者重视的问题,当本站链接点击跳转到第三方外链接时,要弹框提示信息,需要支持jquery引用 。<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compat...

网页的安全性优化是一个越来越被开发者重视的问题,当本站链接点击跳转到第三方外链接时,要弹框提示信息,需要支持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+yITVSbNrk6/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.bokequ.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.bokequ.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>
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。