从路由中安全地检索值答案

【问题标题】：Safely retrieving a value from a route从路由中安全地检索值
【发布时间】：2021-02-23 09:26:45
【问题描述】：

在我的 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 中获取的。

【问题讨论】：

我不明白你为什么需要解码它？如果您使用的是 Angular，那么您应该有一个状态来记录产品。那么为什么你不能从国家获得产品名称的参考呢？然后使用new URL('The / Next / Big Thing', base_url) 获取产品的有效 url 以添加到路由中？
不确定在这种情况下您所说的状态是什么意思。我的应用程序目前是无状态的，我不使用 NgRx 或任何其他状态解决方案。我认为您是对的，但我没有正确描述为什么需要对其进行解码，我会更新问题。
所以您至少没有 behaviorsubject ？如何在不将产品数据至少存储在变量中的情况下呈现产品页面？
我确实在应用程序的其他地方使用了 BehaviourSubjects，但不用于状态管理。在本例中，我使用 URL 路由参数并使用该值填充页面上的表单字段。
哦。那么我认为这里最好的解决方案是使用 URL 对象创建一个 url 并使用 decodeUrlComponent 对其进行解码，正如您所提到的。如果我可以访问后端代码，我将验证服务器上的标题并向数据库添加约束以防止标题上出现不需要的字符。如果我无法访问后端，那么编码和解码是我唯一的解决方案。

标签： javascript angular url-routing

【解决方案1】：

原创评论

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

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

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

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

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

我建议你使用这个library，它可以解码由encodeURI 和encodeURIComponent 编码的字符串，而不会在无效转义时抛出错误

【讨论】：