本文探讨了仅通过客户端javascript修改或隐藏敏感信息（如截断用户名）的不足之处。由于浏览器页面源代码和网络请求载荷仍会暴露原始数据，这种方法无法满足隐私和安全需求。文章强调，确保信息不被客户端获取的唯一安全途径是在服务器端进行处理，即在数据发送到浏览器之前就完成修改或截断。教程提供了多种服务器端实现方案，包括直接修改html、使用模板引擎（如ejs）进行动态处理，以及smarty的自定义修饰符示例。
客户端JavaScript修改的局限性
在前端开发中，我们有时会遇到需要对显示内容进行部分隐藏或修改的需求，例如为了隐私安全，只显示用户名的部分字符（如“Usern***”）。一种常见的直觉是使用客户端JavaScript来处理，例如通过textContent.slice(0, -3)来截断字符串。然而，这种方法存在根本性的安全漏洞。
尽管客户端JavaScript可以成功地在浏览器中修改DOM并显示截断后的内容，但它无法阻止用户通过其他方式获取原始信息。当用户右键点击页面并选择“查看页面源代码”时，或者通过浏览器开发者工具的网络请求选项卡检查数据载荷时，仍能看到服务器最初发送的未经修改的完整内容。这意味着，如果原始数据包含敏感信息，仅仅依靠客户端JavaScript进行修改并不能达到真正的隐私保护或安全目的。
服务器端处理：确保信息安全的唯一途径
要确保客户端无法看到特定的信息，唯一安全可靠的方法是根本不将其发送到客户端。这意味着所有对敏感信息的处理、截断或匿名化都必须在服务器端完成，在HTML页面生成并发送到浏览器之前。
以下是几种在服务器端实现这一目标的方法：
立即学习“Java免费学习笔记（深入）”；
1. 直接在HTML中硬编码（非动态场景）
对于内容固定或不频繁变动的场景，可以直接在HTML中写入已经处理过的数据。
Usern
这种方法简单直接，但缺乏灵活性，不适用于动态生成内容的情况。
2. 使用模板引擎进行动态处理
大多数现代Web应用都使用模板引擎来动态生成HTML。模板引擎提供了在服务器端处理字符串和数据的功能，是实现内容截断的理想场所。
以EJS为例，如果你的数据对象中包含一个username属性，你可以在模板中直接对其进行字符串操作：
在这里，user.username.slice(0, -3)会在服务器渲染HTML时执行，只有截断后的字符串会被嵌入到最终的HTML中发送给客户端。
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
* Name: truncate_three
* 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模板中，你可以像使用其他修饰符一样应用它：
{$s.username|truncate_three}
这样，$s.username的值在被渲染到HTML之前，就会通过truncate_three修饰符进行处理。
b. 使用内置的truncate修饰符（截取前N个字符）
如果你的需求是截取字符串的前N个字符（而不是从末尾移除），Smarty提供了内置的truncate修饰符，使用起来更为方便：
{$s.username|truncate:3:'' nofilter}
这个例子会截取$s.username的前3个字符。”表示不添加省略号，nofilter确保内容不被转义（根据具体需求决定是否使用）。请注意，truncate修饰符默认是在字符串末尾添加省略号，如果不需要，需要将其第三个参数设置为空字符串。
注意事项与最佳实践
核心原则： 任何不希望客户端看到的信息，都绝不能从服务器端发送出去。这是保护隐私和数据安全的黄金法则。代码审查： 定期对后端代码和模板文件进行审查，确保敏感信息在发送到前端之前已经过适当处理。错误处理： 在进行字符串操作时，考虑输入字符串的长度。例如，如果字符串长度不足3个字符，slice(0, -3)可能会导致空字符串或意外结果。在服务器端处理时，应加入相应的逻辑判断。统一处理： 尽量在数据模型层或服务层统一处理敏感信息的显示逻辑，而不是分散在各个模板文件中，以减少出错的可能性并提高代码的可维护性。
通过在服务器端进行数据处理，我们可以有效地防止敏感信息泄露，确保应用程序的隐私性和安全性。
以上就是安全处理前端敏感信息：避免客户端JavaScript修改的局限性的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1585351.html
微信扫一扫 
支付宝扫一扫 
