本文探讨了在web开发中，通过客户端javascript修改页面内容以隐藏敏感信息是不可靠的。为确保数据隐私和安全，核心原则是永远不要将敏感数据发送到客户端。教程将详细介绍如何利用服务器端语言和模板引擎（如ejs、smarty）在数据渲染前进行字符串处理，从而从源头保障信息安全，避免敏感数据泄露。
在现代Web应用开发中，数据隐私和安全性是至关重要的考量。开发者有时会尝试使用客户端JavaScript来修改页面上显示的数据，例如截断用户名以隐藏部分信息。然而，这种方法对于真正的隐私保护是无效的，因为客户端JavaScript只能改变用户在浏览器中看到的DOM内容，而原始的、未修改的数据仍然存在于页面的源代码、浏览器开发者工具的网络请求载荷中。
客户端JavaScript的局限性
考虑以下HTML结构和JavaScript代码片段：
<div id="remove">Username</div>
function slice() {
var t = document.getElementById("remove");
t.textContent = t.textContent.slice(0, -3);
}
slice();这段JavaScript代码会成功地将页面上显示的“Username”改为“Usern”。然而，当用户通过浏览器“查看页面源代码”时，他们仍然会看到原始的“Username”。这意味着，如果“Username”包含敏感信息，即使前端做了处理，信息也已泄露给客户端。因此，依赖客户端JavaScript进行数据隐私处理是不可靠的。
服务器端数据处理的核心原则
要真正确保客户端无法看到特定的敏感信息，唯一的安全方法是从一开始就不要将这些信息发送到客户端。这意味着所有涉及隐私或安全的数据处理都应该在服务器端完成，在数据被渲染到HTML并发送给浏览器之前。
利用模板引擎实现字符串截断
最推荐的做法是在服务器端使用后端语言或模板引擎来处理数据，例如对字符串进行截断或掩码处理，然后再将处理后的数据发送到客户端。
1. 硬编码（不推荐用于动态内容）
对于极少数的、非动态的场景，可以直接在HTML中硬编码处理后的字符串。
<div id="remove">Usern</div>
然而，这种方法缺乏灵活性，不适用于从数据库或其他数据源动态加载内容的情况。
2. 使用模板引擎进行动态处理
大多数现代Web框架都使用模板引擎来生成HTML。这些模板引擎通常提供了字符串处理功能，允许我们在数据渲染前对其进行操作。
EJS 示例
如果你的后端使用EJS（Embedded JavaScript）作为模板引擎，并且你有一个包含username属性的用户对象user，你可以这样截断字符串：
<div id="remove"><%= user.username.slice(0, -3) %></div>
在这里，user.username.slice(0, -3)是在服务器端执行的JavaScript代码，它会在HTML发送到浏览器之前截断用户名。
Smarty 示例
对于使用Smarty等PHP模板引擎的场景，你可以通过定义自定义修饰符（modifier）来实现字符串截断。
定义自定义修饰符： 在Smarty的插件目录中（例如plugins/），创建一个PHP文件，例如modifier.truncate_three.php，内容如下：
<?php
/**
* Smarty plugin
* @package Smarty
* @subpackage plugins
*/
/**
* Smarty truncate_three modifier plugin
*
* Type: modifier<br>
* Name: truncate_three<br>
* Purpose: 截断字符串，移除最后三个字符
* @param string $string input string
* @return string
*/
function smarty_modifier_truncate_three($string)
{
return substr($string, 0, -3);
}
?>在模板中使用修饰符： 在你的Smarty模板文件（.tpl）中，你可以将原始的{$s.username}替换为使用自定义修饰符的版本：
{foreach from=$last_user item=s}
{$s.date}
{$s.username|truncate_three}
{/foreach}这样，{$s.username}的值在渲染到HTML之前，会先经过truncate_three修饰符处理，移除其末尾的三个字符。
使用内置的truncate修饰符（截取前N个字符）： 如果你的需求是截取字符串的前N个字符，Smarty提供了内置的truncate修饰符，使用起来更简单：
{$s.username|truncate:3}这会将{$s.username}截取为前3个字符。请注意，这与移除最后3个字符是不同的操作，但展示了模板引擎处理字符串的能力。
总结与最佳实践
确保数据隐私和安全的核心在于控制数据源。客户端JavaScript仅适用于用户界面层面的交互和展示，不应被视为数据安全屏障。
- 永远在服务器端处理敏感数据： 在数据离开服务器、发送到客户端之前，对其进行必要的截断、掩码或加密处理。
- 利用后端语言和模板引擎的功能： 无论是PHP、Node.js、Python或其他后端技术，它们通常都提供了强大的字符串处理函数和与模板引擎集成的机制。
- 避免在客户端泄露原始数据： 即使是短暂地将原始数据发送到客户端，也存在被截获和滥用的风险。
通过遵循这些服务器端数据处理的最佳实践，开发者可以有效地防止敏感信息泄露，从而构建更安全、更可靠的Web应用程序。
