前端经典面试题合集, 什么是浏览器的同源策略?为什么要有同源策略?

QA

Step 1

Q:: 什么是浏览器的同源策略？

A:: 浏览器的同源策略（Same-Origin Policy，SOP）是一种重要的安全机制，用于防止不同源（即协议、域名、端口不完全相同）的网页之间相互访问数据。具体来说，同源策略限制了从一个源加载的文档或脚本如何能够与另一个源的资源进行交互，从而防止跨站脚本攻击（XSS）和跨站请求伪造（CSRF）。

Step 2

Q:: 为什么要有同源策略？

A:: 同源策略是为了保护用户的数据安全和隐私，防止恶意网站通过脚本获取用户在其他网站上的敏感数据。没有同源策略，恶意站点可以随意读取其他站点的cookie、localStorage等数据，甚至可以执行未经授权的操作，给用户带来严重的安全风险。

Step 3

Q:: 同源策略有哪些常见的例外情况？

A:: 同源策略的常见例外包括：1. 跨域资源共享（CORS），允许服务器明确声明哪些域可以访问其资源；2. JSONP，一种通过<script>标签的src属性进行跨域请求的技术；3. WebSockets，允许跨域通信但需通过初始的HTTP请求进行握手；4. iframe中的document.domain设置，允许相同主域下的不同子域进行通信。

用途

同源策略是Web应用安全的基础，在实际生产环境中经常遇到跨域请求的需求。例如，前端应用可能需要从不同的API获取数据，或者需要与第三方服务进行交互。因此，了解同源策略及其例外情况是前端开发者必备的知识，能够帮助他们设计安全的Web应用，避免安全漏洞。\n

相关问题

🦆

什么是跨域资源共享CORS?▷

跨域资源共享（CORS）是一种机制，它使用额外的HTTP头来告诉浏览器允许Web应用在一个域（域名）上访问来自另一个域（域名）的资源。CORS头包括Origin、Access-Control-Allow-Origin等，服务器通过这些头信息来控制跨域请求的安全性。

🦆

什么是跨站脚本攻击XSS?▷

跨站脚本攻击（XSS）是一种代码注入攻击，攻击者在受害者访问的网页中注入恶意脚本，从而窃取用户信息、劫持用户会话或执行其他恶意操作。XSS攻击通常通过输入不受信任的数据并将其插入到网页中来实现。

🦆

什么是跨站请求伪造CSRF?▷

跨站请求伪造（CSRF）是一种攻击方式，攻击者诱使用户在已经认证的情况下执行未授权的操作。攻击者通过在用户不知情的情况下，向受害者网站发送伪造的请求，以此达到冒充用户执行操作的目的。防御CSRF常用的方法包括使用CSRF token、验证Referer头等。

🦆

如何在前端处理跨域请求?▷

在前端处理跨域请求的常见方法包括：1. 使用CORS，配置服务器端允许跨域；2. 使用JSONP，通过<script>标签进行跨域请求；3. 使用代理服务器，将前端请求转发到代理服务器，再由代理服务器请求目标资源；4. 使用HTML5的postMessage方法，实现不同窗口或iframe间的安全通信。

🦆

如何防范XSS攻击?▷

防范XSS攻击的常见方法包括：1. 对所有输入进行严格的验证和过滤，确保输入数据的安全性；2. 对输出到网页的数据进行转义，防止恶意脚本执行；3. 使用安全的编码方式处理HTML、JavaScript和URL；4. 使用内容安全策略（CSP），限制网页中可以执行的脚本源。

Vue Router 的 route 和 router 对象有什么区别 JS 如何顺序执行 10 个异步任务