前端常见面试题之防抖、节流、xss、xsrf
文章目录
- 一、从浏览器地址栏输入url到显示页面的步骤
- 二、window.onload和DOMContentLoaded区别
- 三、防抖
- 四、节流
- 五、如何预防xss攻击
- 六、如何预防xsrf攻击
一、从浏览器地址栏输入url到显示页面的步骤
- 输入URL：在浏览器的地址栏中输入要访问的网站的URL（统一资源定位符）。
- DNS解析：浏览器会将URL发送给DNS服务器，DNS服务器负责将URL解析为对应的IP地址。
- 建立TCP连接：浏览器会根据解析得到的IP地址，使用TCP（传输控制协议）与服务器建立连接。
- 发起HTTP请求：TCP连接建立后，浏览器会向服务器发送HTTP（超文本传输协议）请求，该请求携带了浏览器想要获取的资源的信息，如文件路径、请求方式等。
- 服务器处理请求：服务器接收到浏览器发送的HTTP请求后，会根据请求的内容进行相应的处理，如查找请求的文件、处理业务逻辑等。
- 返回HTTP响应：服务器处理完请求后，会生成对应的HTTP响应，并将响应发送回浏览器。
- 接收响应内容：浏览器接收到服务器返回的HTTP响应后，开始接收响应的内容。
- 渲染页面：浏览器会根据接收到的响应内容，进行解析、布局、渲染等操作，将服务器返回的页面内容转化为可见的页面。
- 显示页面：最后，浏览器将渲染完成的页面显示在用户的屏幕上，用户即可看到访问的网页内容。
二、window.onload和DOMContentLoaded区别
"window.onload"和"DOMContentLoaded"都是JavaScript事件，用于在HTML文档加载完成后执行代码。然而，它们之间有一些不同之处。
- 触发时机：
- "window.onload"事件在整个页面（包括CSS、图像和其他资源）加载完成后触发。
"DOMContentLoaded"事件在DOM树构建完成后触发，即HTML文档被解析完成后，不包括样式表、图片和其他外部资源。
- 执行顺序：
- "window.onload"事件会等待所有资源（包括图片和其他外部资源）加载完毕后才执行，因此事件触发的时间可能比"DOMContentLoaded"晚。
- "DOMContentLoaded"事件会在HTML文档解析完成后立即触发，而不需要等待其他外部资源的加载。
- 适用对象：
- "window.onload"事件适用于整个页面加载完成后需要执行的代码。
- "DOMContentLoaded"事件适用于只需要操作DOM树的脚本，不依赖于外部资源的加载情况。
综上所述，"window.onload"事件适用于需要等待所有资源加载完成后执行的代码，而"DOMContentLoaded"事件适用于只需要操作DOM的脚本，在HTML文档解析完成后立即执行。
三、防抖
JS防抖函数在以下情况下非常有用：
-
当用户在页面上连续触发某个事件时，比如连续点击按钮、连续输入搜索关键词等，防抖函数可以确保只有最后一次触发的事件被执行。这可以避免不必要的请求发送或操作执行，提高性能和用户体验。
-
当用户在输入框中连续输入内容时，比如搜索框的实时搜索功能，防抖函数可以延迟发送请求或执行搜索操作，直到用户停止输入一段时间才触发，避免多次请求或操作。
下面是一个使用防抖函数的例子，以实现输入框的实时搜索功能：
HTML部分：
<input type="text" id="search-input" placeholder="输入关键词进行搜索" />
<div id="search-results"></div>
JS部分：
// 定义防抖函数
function debounce(func, delay) {let timeoutId = null;return function() {// 如果上一次触发事件的定时器还未执行完，则取消上一次的定时器if (timeoutId) {clearTimeout(timeoutId);}// 设置新的定时器timeoutId = setTimeout(() => {func.apply(this, arguments);timeoutId = null}, delay);};
}// 获取相关元素
const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');// 定义搜索函数
function search() {const keyword = searchInput.value;// 发送请求或执行搜索操作// ... (省略实际逻辑)// 更新搜索结果显示searchResults.innerText = `正在搜索：${keyword}`;
}// 使用防抖函数包装搜索函数，并延迟500毫秒触发
const debouncedSearch = debounce(search, 500);// 监听输入框的输入事件，并使用防抖函数触发搜索
searchInput.addEventListener('input', debouncedSearch);
在上面的示例中，输入框的输入事件被防抖函数包装起来，延迟500毫秒触发搜索操作。当用户连续输入内容时，防抖函数会等待用户停止输入一段时间后才触发搜索，从而避免频繁的搜索操作。这样可以减少不必要的请求发送，提高性能和用户体验。
四、节流
节流函数是一种用于控制函数执行频率的技术，它可以限制函数的调用次数。通常在高频率触发的事件中使用，例如滚动、鼠标移动和窗口调整大小等。
以下是一个使用节流函数的例子：
function throttle(func, delay) {let timeoutId;return function(...args) {if (!timeoutId) {timeoutId = setTimeout(() => {func.apply(this, args);timeoutId = null;}, delay);}};
}// 使用节流函数对滚动事件进行控制
function handleScroll() {console.log('Scroll event handled');
}const throttledScroll = throttle(handleScroll, 200);window.addEventListener('scroll', throttledScroll);
在上面的例子中，我们定义了一个名为throttle的节流函数。它接受一个需要进行节流的函数func和一个延迟时间delay作为参数。当调用throttle返回的函数时，它会在延迟时间内首次触发func，然后在延迟时间内的连续触发中忽略掉。
在此例中，我们定义了一个名为handleScroll的回调函数，并将其传递给throttle函数以创建一个节流函数throttledScroll。然后，我们通过addEventListener将throttledScroll函数添加为窗口的滚动事件处理程序。结果是，在滚动事件触发时，handleScroll函数最多每200毫秒执行一次，从而减少了函数执行的次数。
五、如何预防xss攻击
网站的XSS（跨站脚本攻击）是指攻击者利用网站漏洞，将恶意脚本注入到网页中，从而在用户浏览网页时执行恶意代码。这种攻击可以导致攻击者窃取用户的敏感信息、修改网页内容、甚至控制用户的会话。
为了预防XSS攻击，网站开发者可以采取以下措施:
-
输入验证和过滤：对用户输入的数据进行过滤，剔除或转义特殊字符，确保只接收到合法的数据。
-
输出编码：在将用户输入的数据显示到网页上之前，对其进行编码处理，转义特殊字符，防止恶意代码执行。
-
使用CSP（内容安全策略）：CSP是一种网页安全机制，通过配置HTTP头部来限制网页中可加载和执行的资源。它可以阻止恶意脚本的注入和执行。
-
设置HttpOnly标志：将用户的敏感信息存储在带有HttpOnly标志的cookie中，防止XSS攻击者通过脚本窃取这些信息。
下面是一个XSS攻击的例子：
假设一个社交媒体网站允许用户发布评论，并将这些评论显示在其他用户的浏览器中。攻击者在评论中插入了一个恶意的脚本代码，如以下JavaScript代码：
<script>alert("恶意代码执行");// 进行其他恶意操作
</script>
当其他用户浏览包含该评论的页面时，恶意脚本会自动执行，弹出一个对话框。这可以导致用户的敏感信息被窃取或进行其他恶意操作。
为了预防这样的攻击，网站可以对用户输入的评论内容进行过滤，将特殊字符进行转义，如将 < 替换为 <，将 > 替换为 > 等。这样即使恶意脚本被注入，也不会被浏览器识别为可执行的代码。同时，网站还应该采取其他措施，如使用CSP来限制加载资源和设置HttpOnly标志来保护用户的敏感信息。
六、如何预防xsrf攻击
跨站请求伪造（Cross-Site Request Forgery，CSRF）是一种攻击方式，攻击者通过欺骗用户在已登录的网站上完成一些未经用户授权的操作，通常是利用用户的身份去执行一些针对该网站的请求。这种攻击方式可能导致账户信息、密码、个人资料泄露，或者进行恶意操作。
为了预防XSRF攻击，可以使用以下方法：
- 使用CSRF令牌：在表单中添加一个隐藏字段，该字段包含一个随机产生的令牌。在用户提交表单时，服务器会验证令牌的有效性，如果令牌不匹配，则拒绝请求。
示例：
<form action="/deleteUser" method="post"><input type="hidden" name="csrf_token" value="随机生成的令牌" /><!-- 其他表单字段 --><input type="submit" value="删除用户" />
</form>
- SameSite Cookie属性：使用SameSite属性可以限制Cookie只能在同一站点内进行请求，防止攻击者盗用Cookie进行跨站请求。
示例：
// 设置SameSite属性为Strict
response.setHeader("Set-Cookie", "sessionId=xxx;SameSite=Strict");
- 增加验证码：在一些关键操作（如支付、修改密码等）中，可以添加验证码验证，确保用户是真实操作。
总之，防范XSRF攻击的关键是要确保请求的合法性，通过采取以上措施可以有效预防这种攻击。