Skip to content

Instantly share code, notes, and snippets.

@imsyy

imsyy/redirect.html Secret

Created April 10, 2024 02:32
Show Gist options
  • Save imsyy/5b566db5ca2c321b83b9f1a68dd70cde to your computer and use it in GitHub Desktop.
Save imsyy/5b566db5ca2c321b83b9f1a68dd70cde to your computer and use it in GitHub Desktop.
Download ZIP
無名小栈 - 跳转提示页
Raw
redirect.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>安全中心 | 無名小栈</title>
<style>
* {
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
}
:root {
--main-site-background: #f7f9fe;
--main-card-border: #e3e8f7;
--main-card-background: #fff;
--main-font-color: #363636;
}
@media (prefers-color-scheme: dark) {
:root {
--main-site-background: #18171d;
--main-card-border: #3d3d3f;
--main-card-background: #1b1c20;
--main-font-color: #f7f7fa;
}
}
a {
text-decoration: none;
color: var(--main-font-color);
}
body {
background-color: var(--main-site-background);
color: var(--main-font-color);
font-family: "PingFang SC", "Open Sans", "Microsoft YaHei", sans-serif;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100vw;
width: 100dvw;
height: 100vh;
height: 100dvh;
overflow: hidden;
transition:
color 0.3s,
background-color 0.3s;
}
header {
display: flex;
flex-direction: column;
align-items: center;
}
header .logo img {
width: 100px;
height: 100px;
margin-bottom: 20px;
}
header .title {
display: flex;
flex-direction: column;
align-items: center;
}
header .title .site-name {
font-size: 30px;
font-weight: bold;
}
header .title .site-tip {
font-size: 20px;
margin-top: 8px;
opacity: 0.6;
}
main {
margin: 30px 20px 60px;
border-radius: 16px;
padding: 30px;
max-width: 768px;
min-width: 380px;
background-color: var(--main-card-background);
border: 1px solid var(--main-card-border);
}
main .tip {
display: flex;
justify-content: center;
margin-bottom: 20px;
opacity: 0.4;
}
main #url {
display: block;
padding: 12px 20px;
border-radius: 8px;
width: 100%;
text-align: center;
border: 1px solid var(--main-card-border);
background-color: var(--main-site-background);
}
main #site-info {
display: inline-flex;
width: 100%;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 20px;
font-size: 18px;
}
main #jump-content.warn {
color: #ffb02e;
}
main #jump-content.safe {
color: #00d26a;
}
main #jump-content.danger {
color: #f8312f;
}
main #jump-button {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
width: 160px;
margin: 30px auto 0;
border-radius: 8px;
color: var(--main-font-color);
background-color: var(--main-card-border);
transition: background-color 0.3s;
cursor: pointer;
}
main #jump-button:hover {
background-color: var(--main-site-background);
}
footer {
width: 100%;
text-align: center;
position: absolute;
bottom: 0;
margin: 20px;
opacity: 0.6;
font-size: 15px;
}
footer .icp::before {
content: "|";
margin: 0 8px;
margin-left: 4px;
opacity: 0.2;
}
</style>
</head>
<body>
<header>
<div class="logo">
<img src="./images/logo/logo.webp" alt="" />
</div>
<div class="title">
<span class="site-name">無名小栈</span>
<span class="site-tip">安全中心</span>
</div>
</header>
<main>
<span class="tip">您即将离开無名小栈，前往</span>
<span id="url"></span>
<div id="jump-content" class="warn">
<span id="site-info">⚠️ 该网址安全性未知，请注意您的帐号和财产安全</span>
<div id="jump-button">继续前往</div>
</div>
</main>
<footer>
<a class="power" href="https://blog.imsyy.top/">
©
<script>
document.write(new Date().getFullYear());
</script>
無名小栈
</a>
<a class="icp" href="https://beian.miit.gov.cn/" target="_blank"> 豫ICP备2022018134号-1 </a>
</footer>
<script>
// 跳转网址
let jumpLink;
let interval;
// 获取元素
const urlDom = document.getElementById("url");
const urlTip = document.getElementById("site-info");
const jumpContent = document.getElementById("jump-content");
const jumpButton = document.getElementById("jump-button");
// 网址白名单
const whitelist = ["*.imsyy.top", "gitee.com", "github.com", "*.baidu.com", "*.bing.cn"];
// 网址黑名单
const blacklist = ["*.taobao.com", "*.jd.com"];
// 提示文本
const tipText = {
safe: "✅ 该网址为信任网址，即将跳转",
danger: "⛔ 该网址处于黑名单",
};
// 自动跳转
const autoJump = () => {
let count = 3;
const updateContent = () => {
jumpButton.innerHTML = `${count} 秒后自动跳转`;
count--;
if (count < 0) {
clearInterval(interval);
jumpButton.innerHTML = "正在跳转";
window.location.replace(jumpLink);
}
};
// 每秒更新一次
updateContent();
interval = setInterval(updateContent, 1000);
};
// 获取跳转网址
const getJumpUrl = () => {
try {
// 解析 URL 参数
const urlParams = new URLSearchParams(window.location.search);
const encodedUrl = urlParams.get("url");
// 解密 Base64
jumpLink = atob(encodedUrl);
urlDom.innerHTML = jumpLink;
// 获取网址的主机名
const urlHostname = new URL(jumpLink).hostname;
// 判断网址是否在黑名单中
for (let i = 0; i < blacklist.length; i++) {
const blackPattern = blacklist[i].replace(/\*/g, ".*");
if (urlHostname.match(blackPattern)) {
// 显示提示信息
urlTip.innerHTML = tipText.danger;
jumpButton.innerHTML = "禁止跳转";
jumpButton.style.cursor = "not-allowed";
jumpButton.style.pointerEvents = "none";
jumpButton.style.opacity = "0.4";
jumpContent.className = "danger";
return true;
}
}
// 判断网址是否在白名单中
for (let i = 0; i < whitelist.length; i++) {
const whitePattern = whitelist[i].replace(/\*/g, ".*");
if (urlHostname.match(whitePattern)) {
// 显示提示信息
urlTip.innerHTML = tipText.safe;
jumpContent.className = "safe";
autoJump();
return true;
}
}
} catch (error) {
console.error(error);
jumpContent.remove();
urlDom.innerHTML = "获取跳转链接失败";
}
};
document.addEventListener("contextmenu", function (event) {
event.preventDefault();
});
document.addEventListener("keydown", function (event) {
if (event.keyCode === 123) {
event.preventDefault();
}
if (
event.ctrlKey &&
event.shiftKey &&
(event.keyCode === 73 || event.keyCode === 74 || event.keyCode === 67)
) {
event.preventDefault();
}
});
jumpButton.addEventListener("click", () => {
clearInterval(interval);
jumpButton.innerHTML = "正在跳转";
if (jumpLink) window.location.replace(jumpLink);
});
window.addEventListener("DOMContentLoaded", () => {
getJumpUrl();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment