安全处理前端敏感信息：避免客户端JavaScript修改的局限性

本文探讨了仅通过客户端javascript修改或隐藏敏感信息（如截断用户名）的不足之处。由于浏览器页面源代码和网络请求载荷仍会暴露原始数据，这种方法无法满足隐私和安全需求。文章强调，确保信息不被客户端获取的唯一安全途径是在服务器端进行处理，即在数据发送到浏览器之前就完成修改或截断。教程提供了多种服务器端实现方案，包括直接修改html、使用模板引擎（如ejs）进行动态处理，以及smarty的自定义修饰符示例。

客户端JavaScript修改的局限性

在前端开发中，我们有时会遇到需要对显示内容进行部分隐藏或修改的需求，例如为了隐私安全，只显示用户名的部分字符（如“Usern***”）。一种常见的直觉是使用客户端JavaScript来处理，例如通过textContent.slice(0, -3)来截断字符串。然而，这种方法存在根本性的安全漏洞。

尽管客户端JavaScript可以成功地在浏览器中修改DOM并显示截断后的内容，但它无法阻止用户通过其他方式获取原始信息。当用户右键点击页面并选择“查看页面源代码”时，或者通过浏览器开发者工具的网络请求选项卡检查数据载荷时，仍能看到服务器最初发送的未经修改的完整内容。这意味着，如果原始数据包含敏感信息，仅仅依靠客户端JavaScript进行修改并不能达到真正的隐私保护或安全目的。

服务器端处理：确保信息安全的唯一途径

要确保客户端无法看到特定的信息，唯一安全可靠的方法是根本不将其发送到客户端。这意味着所有对敏感信息的处理、截断或匿名化都必须在服务器端完成，在HTML页面生成并发送到浏览器之前。

以下是几种在服务器端实现这一目标的方法：

立即学习“Java免费学习笔记（深入）”；

1. 直接在HTML中硬编码（非动态场景）

对于内容固定或不频繁变动的场景，可以直接在HTML中写入已经处理过的数据。

<div id="remove">Usern</div>

这种方法简单直接，但缺乏灵活性，不适用于动态生成内容的情况。

2. 使用模板引擎进行动态处理

大多数现代Web应用都使用模板引擎来动态生成HTML。模板引擎提供了在服务器端处理字符串和数据的功能，是实现内容截断的理想场所。

以EJS为例，如果你的数据对象中包含一个username属性，你可以在模板中直接对其进行字符串操作：

<div id="remove"><%= user.username.slice(0, -3) %></div>

在这里，user.username.slice(0, -3)会在服务器渲染HTML时执行，只有截断后的字符串会被嵌入到最终的HTML中发送给客户端。

知我AI·PC客户端

离线运行 AI 大模型，构建你的私有个人知识库，对话式提取文件知识，保证个人文件数据安全

0

查看详情

3. Smarty模板引擎的实现

对于使用Smarty等PHP模板引擎的场景，你可以利用其强大的修饰符（modifiers）功能。

a. 自定义修饰符

Smarty允许你定义自己的修饰符来处理变量。你可以创建一个PHP函数，例如smarty_modifier_truncate_three，用于截断字符串的最后三个字符。

在Smarty的插件目录（或配置的修饰符目录）中创建一个文件，例如modifier.truncate_three.php：

<?php
/**
 * Smarty plugin
 * @package Smarty
 * @subpackage plugins
 */

/**
 * Smarty truncate_three modifier plugin
 *
 * Type:     modifier<br>
 * Name:     truncate_three<br>
 * Purpose:  Truncate a string by removing the last three characters
 * @param string $string input string
 * @return string
 */
function smarty_modifier_truncate_three($string)
{
    return substr($string, 0, -3);
}
?>

然后在你的Smarty模板中，你可以像使用其他修饰符一样应用它：

<div id="remove">{$s.username|truncate_three}</div>

这样，$s.username的值在被渲染到HTML之前，就会通过truncate_three修饰符进行处理。

b. 使用内置的truncate修饰符（截取前N个字符）

如果你的需求是截取字符串的前N个字符（而不是从末尾移除），Smarty提供了内置的truncate修饰符，使用起来更为方便：

<div id="remove">{$s.username|truncate:3:'' nofilter}</div>

这个例子会截取$s.username的前3个字符。''表示不添加省略号，nofilter确保内容不被转义（根据具体需求决定是否使用）。请注意，truncate修饰符默认是在字符串末尾添加省略号，如果不需要，需要将其第三个参数设置为空字符串。

注意事项与最佳实践

• 核心原则： 任何不希望客户端看到的信息，都绝不能从服务器端发送出去。这是保护隐私和数据安全的黄金法则。
• 代码审查： 定期对后端代码和模板文件进行审查，确保敏感信息在发送到前端之前已经过适当处理。
• 错误处理： 在进行字符串操作时，考虑输入字符串的长度。例如，如果字符串长度不足3个字符，slice(0, -3)可能会导致空字符串或意外结果。在服务器端处理时，应加入相应的逻辑判断。
• 统一处理： 尽量在数据模型层或服务层统一处理敏感信息的显示逻辑，而不是分散在各个模板文件中，以减少出错的可能性并提高代码的可维护性。

通过在服务器端进行数据处理，我们可以有效地防止敏感信息泄露，确保应用程序的隐私性和安全性。

以上就是安全处理前端敏感信息：避免客户端JavaScript修改的局限性的详细内容，更多请关注php中文网其它相关文章！