时间戳

首页 > 解决方案 > 从路由中安全地检索值

javascript - 从路由中安全地检索值

问题描述

在我的 Angular 应用程序中，我更新了项目中的一些 URL，之前使用的查询字符串元素如下所示：

http://www.whatever.com/products?productName=TheMainProduct&id=234234

到类似于这样的基于路由的系统：

http://www.whatever.com/products/TheMainProduct/234234

这很好用，但大多数情况下，除非有一个产品叫做 The / Next / Big Thing

因此，斜线按预期破坏了路由。我已经使用 encodeUrlComponent 对产品名称进行了编码，并打算使用 decodeUrlComponent 进行解码，但我很好奇这是否被认为是安全的。这些值将与查询字符串元素时的值相同，并且被认为是安全的，所以 decodeUrlComponent 可以在这里使用还是应该添加额外的保护层以防止恶意角度？

我已经阅读了关于 decodeUrlComponent 是否是好的做法的不同报告，所以如果这是一个坏主意，我正在寻找一些明确的或替代方案。

为什么我需要解码它？好吧，我正在导航到一个组件并使用从 URL 获取的产品名称来填充我导航到的组件上的一些数据。因此，例如，表单字段将在其中预先填充产品名称，因为它是从 URL 中获取的。

标签： javascriptangularurl-routing

解决方案

原始评论

哦。那么我认为这里最好的解决方案是使用 URL 对象创建一个 url 并使用 decodeUrlComponent 对其进行解码，如您所提到的。如果我可以访问后端代码，我会验证服务器上的标题并向数据库添加约束以防止标题上出现不需要的字符。如果我无法访问后端，那么编码和解码是我唯一的解决方案

在这种情况下，我将使用 JavaScript 的URL对象从产品的标题中创建一个编码的 url。

const product_url = new URL('The / Next / Big Thing', 'http://www.whatever.com/products')

这将返回一个用于 Angular 路由器的编码 URL。

当涉及到恶意代码时，我要做的就是阻止将它们插入数据库。这意味着，无论何时创建产品，都要检查服务器上的可疑字符，如<、/>等，并防止它们插入。

我建议您使用这个库，它可以解码由encodeURIand编码的字符串，encodeURIComponent而不会在无效转义上引发错误

推荐阅读