首页 > 编程语言 >JavaScript 中更安全的 URL 读写

JavaScript 中更安全的 URL 读写

时间:2023-02-01 10:47:30浏览次数:51  
标签:searchParams const URL 读写 JavaScript url 参数 page

前言

URL对于我们开发人员来讲,应该是非常熟悉了。在对URL进行参数拼接时,我们一般都会直接进行字符串拼接或使用模版字符串,因为这样非常方便,但是我们这样其实会在不知不觉中以不安全的方式编写 URL。

比如,我们通常会这样写:

const url = `https://www.baidu.com
  ?model=${model}&locale=${locale}?query.text=${text}`

这样确实写起来非常方便,但你可能会在不知不觉中会你的程序带来一些问题。(如上代码就是一段有问题的代码)

如果这篇文章有帮助到你,❤️关注+点赞❤️鼓励一下作者,文章公众号首发,关注 前端南玖 第一时间获取最新文章~

常见问题

不正确的分隔符

1fg.png

这种错误可能在新手身上比较常见,但即使是经验老道的程序员也不可能绝对避免这个错误。造成这个错误的罪魁祸首绝大多数是在修改或移动代码之后。例如,你有一个结构正确的 URL,然后将一个片段从一个片段复制到另一个片段,然后错过了参数分隔符的错误排序。

忘记编码

2bm.png

许多时候我们URL上的参数是需要进行编码的,因为URL参数可以是任意类型的文本,包括空格和特殊字符,这会给我们带来一些无法预料的问题。

所以为了避免这种情况,我们往往会这样写:

const url = `https://www.baidu.com
  ?model=${
    encodeURIComponent(model)
  }&locale=${
    encodeURIComponent(locale)
  }&query.text=${
    encodeURIComponent(text)
  }`

但这样的写法给人的感觉是非常的冗余且不雅观

标签:searchParams,const,URL,读写,JavaScript,url,参数,page
From: https://www.cnblogs.com/songyao666/p/17081749.html

相关文章

  • 机械硬盘与固态硬盘读写原理
    传统机械硬盘(HDD)主要由机械驱动磁头运行,包括电机、磁盘、磁头摇臂等必要的机械部件。它必须移动到快速旋转磁盘上的访问位置,因此至少95%的时间用于机械部件的移动。而......
  • Go使用post方法将json数据传给一个url(后端接口)
       最近做的一个项目是采用前后端分离模式写前端,后端是fabric区块链,提供接口,需要使用post方法进行访问。如上一章注册用户,就是需要把用户名、账户信息转换成json形式......
  • nginx 重写整个 url,结合使用 proxy_pass 和 rewrite
    首先讲下需求背景需要将相同url不同参数的地址转发到服务器上不同的地址举例:example1.com/api.php?act=order->example2.com/api/pay/orderexample1.com/api.php?ac......
  • JavaScript学习笔记—DOM:事件
    事件(event)事件就是用户和页面之间发生的交互行为比如:点击按钮,鼠标移动,双击按钮,敲击键盘,松开按键...可以通过为事件绑定响应函数(回调函数),来完成和用户之间的交互绑定响......
  • JavaScript之void
    void是什么void是JavaScript重要的关键字,该操作符指定要计算一个表达式但不返回。语法格式:voidfunc()javascript:voidfunc()或void(func())javascript:void(func......
  • 错误:为 repo 'appstream' 下载元数据失败 : Cannot prepare internal mirrorlist: No
    错误:为repo'appstream'下载元数据失败:Cannotprepareinternalmirrorlist:NoURLsinmirrorlistCentOS8,​​​yum​​​ install失败。CentOSLinux8在2022年1......
  • MySQL Others--读写偏序问题
    读偏序(ReadSkew)在已提交读(readcommitted)事务隔离级别下,事务T1先读取数据X,然后事务T2修改数据X和Y,然后事务T1再读取数据Y,事务T1读取到的X和Y不满足一致性约束。在可......
  • Js/Jquery 操作 url
    <script>//设置或获取整个URL为字符串//文件访问file:///F:/phpStud/PHPTutorial/WWW/CasPHP/public/js/js_url.html//域名访问http://casphp.......
  • Linux——MySQL主从复制读写分离
     主从复制用来保证数据的一致性和完整性 主从复制原理:主MySQL需要开启二进制日志保存用户对Mysql数据的操作。   从数据库监听主MySQL日志变化,发现更新复制日志......
  • JavaScript学习笔记—DOM:属性节点
    属性也是一个节点对象(Attr),和文本一样,通常我们不会去直接获取节点对象,而是通过元素来完成对属性的操作:方式一:读取:元素.属性名(注意,class属性需要使用className来读取)读......