1. 防 XSS 核心过滤函数（已转义、可直接展示）如果是 没有 pre、没有 code、没有转义、没有注释的code,
就是正常、干净、能直接用的 HTML 不用管“ 删除 `
<pre>”的提醒。
之前那些提示、转义、pre/code
只是为了让代码 “显示在网页上” 给别人看
// 安全过滤用户输入，防止脚本注入
function safeHtml(str) {
if (!str) return '';
return str
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
// 在页面显示内容时，必须用这个函数包一层
document.getElementById ('result').innerHTML = safeHtml (用户输入内容); |
⚠️ 实际使用时：删除 `
` 和 `
` 即可运行。 2. 禁止执行 javascript: 伪协议（已转义）
function safeUrl(url) {
if (!url) return '';
if (url.toLowerCase().startsWith('javascript:')) {
return 'blocked';
}
return url;
} |
⚠️ 实际使用时：删除 `
` 和 `
` 即可运行。 3. 完整安全工具站模板（完整版已转义）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>安全工具站</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* { box-sizing: border-box; margin:0; padding:0; }
body { max-width: 800px; margin: 30px auto; padding: 0 15px; font-family: system-ui; }
textarea { width:100%; height:120px; padding:10px; margin:10px 0; border:1px solid #ddd; border-radius:6px; }
button { padding:10px 20px; background:#007bff; color:#fff; border:none; border-radius:6px; cursor:pointer; }
#result { padding:10px; background:#f8f9fa; border-radius:6px; margin-top:10px; min-height:60px; white-space:pre-wrap; }
</style>
</head>
<body>
<h2>文本处理工具（安全版）</h2>
<textarea id="input" placeholder="请输入内容"></textarea>
<button onclick="doProcess()">处理</button>
<div id="result"></div>
|
⚠️ 实际使用时：去掉 `
`，并把 `<` 还原为 `<`、`>` 还原为 `>`。
4. 加密 / 编码库引入（已转义）
<script src="https://cdn.jsdelivr.net/npm/crypto-js@4.2.0/crypto-js.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-base64@3.7.7/base64.min.js"></script> |
⚠️ 实际使用时：删除 `
` 和 `
` 即可运行。
