前端开发工程师-前端安全-CSRF防护_同源策略与CORS理解.docx

PAGE1

PAGE1

CSRF攻击原理与危害

CSRF（Cross-SiteRequestForgery，跨站请求伪造）是一种攻击方式，它利用了网站对用户身份的信任，通过在第三方网站或恶意链接中嵌入代码，诱使用户在不知情的情况下执行非预期的操作。这种攻击通常发生在用户已经登录的Web应用中，攻击者可以利用用户的登录状态，发送请求到目标网站，执行如转账、修改密码等敏感操作。

1原理

CSRF攻击的核心在于利用了Web应用的同源策略的漏洞。同源策略（Same-originpolicy）是Web安全的一个基本策略，它限制了一个域下的文档或脚本如何与另一个源的资源进行交互。然而，同源策略并不阻止一个页面向另一个源发送请求，只是限制了页面如何访问响应数据。因此，攻击者可以构造一个恶意的请求，当用户在打开恶意网站的同时，这个请求就会被发送到用户已经登录的网站，执行攻击者预设的操作。

2危害

敏感操作执行：如在银行网站上执行转账操作。

数据泄露：攻击者可能通过CSRF获取用户的敏感信息。

权限滥用：利用用户的权限执行非法操作，如删除数据、修改设置等。

1CSRF攻击实例分析

假设有一个银行网站，用户登录后可以进行转账操作。攻击者可以创建一个恶意的HTML页面，当用户访问这个页面时，页面中的脚本会自动执行转账操作。

!--恶意HTML页面--

!DOCTYPEhtml

html

head

titleCSRFAttackDemo/title

/head

body

h1这是一个恶意网站/h1

imgsrc=/transfer?amount=1000to=attacker_account/

/body

/html

在这个例子中，攻击者利用了img标签的请求特性，当用户访问这个页面时，浏览器会自动向发送一个GET请求，请求的URL中包含了转账的参数。如果银行网站没有对CSRF攻击进行防护，那么用户的账户就会自动向攻击者转账1000元。

1.1解析

请求构造：攻击者通过构造一个看似无害的img标签，实际上是在发送一个转账请求。

用户状态利用：用户在访问恶意网站时，如果已经登录银行网站，那么银行网站会认为这个请求是合法的，因为请求中包含了用户的cookie信息。

执行非预期操作：用户在不知情的情况下，执行了转账操作。

通过这个实例，我们可以看到CSRF攻击的威力，它可以在用户完全不知情的情况下，利用用户的权限执行敏感操作。因此，对于Web应用来说，进行CSRF防护是非常必要的。

在后续的模块中，我们将详细介绍如何通过同源策略和CORS（Cross-OriginResourceSharing，跨源资源共享）来防止CSRF攻击，以及如何在Web应用中实现这些防护策略。##同源策略(SOP)介绍

同源策略（Same-OriginPolicy，简称SOP）是浏览器为了保护用户数据安全而实施的一种安全策略。它限制了来自不同源的文档或脚本对Web页面的访问和操作。同源策略的定义是，如果两个URL的协议、域名和端口都相同，则这两个URL是同源的。同源策略主要应用于防止跨站脚本攻击（XSS）和跨站请求伪造（CSRF）等安全问题。

1.2为什么需要同源策略？

在Web应用中，JavaScript可以读取和修改页面上的任何数据，包括cookies、localStorage等敏感信息。如果没有同源策略，恶意网站可以通过嵌入恶意脚本，读取或修改用户在其他网站上的数据，从而引发安全问题。同源策略通过限制不同源之间的数据交互，提高了Web应用的安全性。

2同源策略工作原理

同源策略的工作原理基于URL的三个组成部分：协议、域名和端口。当一个Web页面尝试访问另一个源的资源时，浏览器会检查这两个源是否相同。如果不同，浏览器将阻止该请求，以防止潜在的安全风险。

2.1实例：同源策略检查

假设我们有两个Web页面，分别位于以下URL：

:8080/index.html

:8080/index.html

页面1尝试通过JavaScript读取页面2中的数据。在页面1的JavaScript代码中，我们尝试使用XMLHttpRequest对象来发起请求：

//页面1的JavaScript代码

varxhr=newXMLHttpRequest();

xhr.open(GET,:8080/data,true);

xhr.onreadystatechange=function(){

if(xhr.readyState==4xhr.status==200){

console.log(xhr.responseText);

}

};

xhr.send();