202503-每天进步一点点

52 阅读4分钟
  • 如果你希望在 B 函数中使用 async 和 await 来接收 A 函数的返回值,而 A 函数返回的是一个普通数据而不是一个 Promise,你可以直接使用 await 来接收这个返回值。await 可以处理普通数据,而不仅仅是 Promise。
  • 雪碧图
  • XSS泄露

XSS 漏洞的影响

  • 会话劫持:攻击者可以通过 XSS 漏洞窃取用户的会话 cookie,从而冒充用户进行操作。
  • 敏感数据泄露:攻击者可以读取网页中的敏感数据,如用户的个人信息、账号信息等。
  • 恶意操作:攻击者可以利用用户的权限执行恶意操作,如修改用户设置、发送垃圾邮件等。
  • 键盘和鼠标事件监听:攻击者可以监听用户的键盘和鼠标事件,进一步获取用户的操作信息。

常见的 XSS 攻击类型

  1. 反射型 XSS:攻击者通过 URL 参数或表单提交将恶意脚本注入到网页中,当用户访问该 URL 时,恶意脚本会在用户的浏览器中执行。
  2. 存储型 XSS:攻击者将恶意脚本存储在服务器上,如论坛帖子、评论等,当其他用户访问这些内容时,恶意脚本会在用户的浏览器中执行。
  3. 基于 DOM 的 XSS:攻击者通过修改网页的 DOM 结构,使恶意脚本在用户的浏览器中执行。这种攻击不依赖于服务器端的响应,而是在客户端通过 JavaScript 代码实现。

防护措施

  • 输入验证:对用户输入的数据进行严格的验证,确保其不包含恶意脚本。
  • 输出编码:在将用户输入的数据输出到网页时,进行适当的编码,如 HTML 转义,以防止恶意脚本的执行。
  • 内容安全策略(CSP) :使用 CSP 头来限制页面可以加载的资源,减少 XSS 攻击的风险。
  • HTTPOnly Cookie:设置 Cookie 的 HTTPOnly 属性,防止 JavaScript 访问 Cookie,从而保护会话信息。
  • scrollTo 是一个常用的 JavaScript 方法,用于在 Web 页面中滚动到指定的位置。这个方法通常用于滚动条的控制,特别是在处理长页面或滚动容器时非常有用。

window.scrollTo 方法用于滚动整个浏览器窗口到指定的坐标位置。它接受两个参数:x 和 y,分别表示水平和垂直方向的滚动位置。

<body>
    <button onclick="scrollToPosition()">Scroll to Position</button>

    <script>
        function scrollToPosition() {
            window.scrollTo(0, 1500); // 滚动到垂直位置 1500 像素
        }
    </script>
</body>

element.scrollTo 方法用于滚动特定的元素(如 div)到指定的位置。这个方法同样接受两个参数:x 和 y,分别表示水平和垂直方向的滚动位置。

<body>
    <div class="scroll-container" id="scrollContainer">
        <div class="content" id="content"></div>
    </div>
    <button onclick="scrollToPosition()">Scroll to Position</button>

    <script>
        function scrollToPosition() {
            const scrollContainer = document.getElementById('scrollContainer');
            scrollContainer.scrollTo(0, 500); // 滚动到垂直位置 500 像素
        }
    </script>
</body>

总结

  1. window.scrollTo(x, y):滚动整个浏览器窗口到指定的坐标位置。
  2. element.scrollTo(x, y):滚动特定的元素到指定的坐标位置。

通过使用 scrollTo 方法,你可以精确控制页面或元素的滚动位置,从而实现更复杂的交互效果。

  • scrollIntoView 是一个在 Web 开发中常用的 JavaScript 方法,用于将某个元素滚动到视图中。这个方法可以确保指定的元素在浏览器窗口中可见

scrollIntoView 方法可以接受一个可选的对象参数,该对象可以包含以下属性:

  1. behavior: 指定滚动行为,可以是 'auto' 或 'smooth''smooth' 表示平滑滚动。
  2. block: 指定块级方向的对齐方式,可以是 'start''center''end' 或 'nearest'
  3. inline: 指定行内方向的对齐方式,可以是 'start''center''end' 或 'nearest'
<body>
    <div id="target">Scroll to this element</div>
    <button onclick="scrollToTarget()">Scroll to Target</button>

    <script>
        function scrollToTarget() {
            const targetElement = document.getElementById('target');
            targetElement.scrollIntoView({
                behavior: 'smooth', // 平滑滚动
                block: 'center',    // 垂直居中对齐
                inline: 'nearest'   // 水平最近对齐
            });
        }
    </script>
</body>
  • reduce方法,数组只有一项时会怎么处理

当使用 reduce 方法处理只有一个元素的数组时,reduce 方法的行为非常简单。reduce 方法会将数组中的唯一元素作为最终结果返回,而不会执行任何迭代操作。这是因为 reduce 方法需要至少两个元素来执行比较和累积操作,而只有一个元素时,没有其他元素可以进行比较。

一个元素的数组reduce 方法将唯一元素作为最终结果返回。

空数组reduce 方法返回初始值 null,你可以检查这个值来处理空数组的情况。

  • 图片压缩
   // 图片压缩
    imgCompress(img) {
      let canvas = document.createElement("canvas");
      let ctx = canvas.getContext("2d");
      let width = img.width;
      let height = img.height;
      canvas.width = width;
      canvas.height = height;
      // 铺底色
      ctx.fillStyle = "#fff";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0, width, height);
      //进行最小压缩
      let ndata = canvas.toDataURL("image/jpeg", 0.5);
      return ndata;
    },