TypeScript 编码 URL

在现代 TypeScript 开发中，处理 URL 是很常见的需求。虽然可以直接使用原生的 URL 类来处理，但使用 TypeScript 可以带来更好的类型推导和错误检查。

解析 URL

使用 URL 类，可以轻松地将一个字符串 URL 解析为可操作的对象。以下是一个例子：

const urlStr = 'https://www.example.com/path?foo=bar#fragment';
const url = new URL(urlStr);

console.log(url.hostname); // 'www.example.com'
console.log(url.pathname); // '/path'
console.log(url.searchParams.get('foo')); // 'bar'
console.log(url.hash); // '#fragment'

这里的 URL 对象提供了很多有用的成员，包括 protocol、username、password、port 等等。

注意，对于一些旧的浏览器或运行环境，可能不支持 URL 类。在这种情况下，可以使用第三方库，如 url-parse。

构建 URL

如果要构建一个字符串 URL，可以使用 URL 类或拼接字符串。然而，前者类型安全更好，容易维护。

const urlObj = {
  protocol: 'https',
  hostname: 'www.example.com',
  path: '/path',
  params: {
    foo: 'bar'
  },
  hash: 'fragment'
};

const url = new URL(`${urlObj.protocol}://${urlObj.hostname}${urlObj.path}`);

if (urlObj.params) {
  for (const [key, value] of Object.entries(urlObj.params)) {
    url.searchParams.append(key, value);
  }
}

if (urlObj.hash) {
  url.hash = urlObj.hash;
}

console.log(url.toString()); // 'https://www.example.com/path?foo=bar#fragment'

这里的 urlObj 中包含了一些 URL 的部分，代码逐步构建出完整的 URL 对象，最后使用 toString() 方法转化为字符串。

URL 安全性

在处理 URL 时，要对所涉及的数据进行合理的过滤和校验，防止出现恶意代码注入、越权访问等问题。一些常见的安全性问题包括：

• XSS 攻击：攻击者在 URL 中注入恶意的脚本，通过注入的代码获取个人信息。
• 越权访问：攻击者篡改 URL 中的参数，获取未授权的资源。
• SQL 注入：攻击者在 URL 中注入恶意的 SQL 语句，实现 SQL 注入攻击。

为避免这些问题，要使用适当的过滤和校验方法，包括：

• 对用户输入的数据进行校验和转义，如使用 encodeURI() 或 encodeURIComponent()。
• 检查所有传入的数据是否为预期的格式和类型。
• 不要将敏感信息放在 URL 或 Query String 中。
• 使用安全的协议，如 HTTPS。
• 遵循最小权限原则，只授权必要的访问权限。