本文旨在提供一种在静态页面中安全展示URL查询参数值的方法，重点关注降低安全风险。通过限制参数和来源，并结合适当的转义技术，我们可以创建一个简单且相对安全的页面来显示key1和key2的值，避免潜在的跨站脚本攻击（XSS）。本文将介绍一种使用纯文本结合HTML转义的安全方案，并提供代码示例和注意事项。
安全展示URL查询参数
在某些场景下，我们需要在静态页面中展示通过URL传递的参数值。例如，服务器完成一个处理流程后，需要将结果通过URL参数传递给一个静态页面进行展示。然而，直接在页面上展示URL参数值可能会引入安全风险，特别是跨站脚本攻击（XSS）。本文将介绍一种相对简单且安全的方法来展示这些参数值。
核心思路：纯文本 + HTML转义
我们的核心思路是，将整个页面视为纯文本，并通过HTML转义来处理从URL获取的参数值。这意味着页面本身不包含任何HTML标签，所有内容都将被视为文本。这样可以有效防止恶意脚本注入。
实现步骤
- 获取URL参数： 首先，我们需要使用JavaScript获取URL中的参数值。
- HTML转义： 对获取到的参数值进行HTML转义，将特殊字符（如、"、'、&）转换为其对应的HTML实体。
- 渲染到页面： 将转义后的参数值以纯文本形式渲染到页面上。
代码示例（JavaScript）
<!DOCTYPE html>
<html>
<head>
<title>展示参数值</title>
<meta charset="UTF-8">
</head>
<body>
<pre class="brush:php;toolbar:false;" id="displayArea">
<script>
function getParameterByName(name, url = <a style="color:#f60; text-decoration:underline;" title= "win" href="https://www.php.cn/zt/19041.html" target="_blank">window.location.href) {
name = name.replace(/[[]]/g, '\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/+/g, ' '));
}
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
// 获取参数值
var key1Value = getParameterByName('key1');
var key2Value = getParameterByName('key2');
// HTML转义
var escapedKey1Value = escapeHtml(key1Value);
var escapedKey2Value = escapeHtml(key2Value);
// 渲染到页面
var displayArea = document.getElementById('displayArea');
displayArea.textContent = "key1: " + escapedKey1Value + "
key2: " + escapedKey2Value;
</script> 
