这篇文章会介绍一些常见的安全问题及如何防范的内容，在当下其实安全问题越来越重要，已经逐渐成为前端开发必备技能。
跨站脚本攻击（XSS）
跨站脚本攻击（Cross-Site Scripting，XSS）是一种常见的网络安全漏洞和攻击技术，它允许攻击者将恶意代码注入到网页中，然后这些恶意代码会在受害者的浏览器上执行。XSS攻击的目标是获取用户的敏感信息，如会话令牌、登录凭据、cookie，或者是劫持用户的会话，以执行未经授权的操作。
为了和 CSS 区分，这里把攻击的第一个字母改成了 X，于是叫做 XSS。
XSS攻击三种主要类型
存储型XSS攻击：
攻击者将恶意脚本存储在服务器上，当用户访问包含这些脚本的页面时，恶意脚本会从服务器上加载并在用户浏览器上执行。
反射型XSS攻击：
在这种攻击中，恶意脚本通过伪装成合法的URL参数传递给目标网页。一旦用户点击了包含这个恶意参数的链接，脚本就会在用户浏览器上执行。
DOM型XSS攻击：
这种攻击方式不会涉及服务器，而是通过修改网页的DOM结构来注入恶意脚本。当用户浏览器解析网页时，这些脚本会被执行。
防止XSS攻击措施
由上面对XSS攻击的介绍我们知道，XSS攻击主要有两大步骤：
- 攻击者提交恶意代码
- 浏览器执行恶意代码
针对这两点来制定防范措施：
输入验证和过滤
在用户提交时，由前端过滤输入，然后提交到后端，这种方法不可行，因为攻击者可能绕过前端过滤，直接构造请求，提交恶意代码。一般在写入数据库前，后端对输入数据进行过滤。虽然输入侧过滤能够在某些情况下解决特定的 XSS 问题，但会引入很大的不确定性和乱码问题。在防范 XSS 攻击时应避免此类方法。
输出编码
在将用户输入的数据输出到网页上时，使用适当的编码方式，如HTML编码或JavaScript编码，以防止恶意脚本执行。
内容安全策略（CSP）
CSP是额外的安全层，用于检测并削弱某些特定类型的攻击。
严格的 CSP 在 XSS 的防范中可以起到以下的作用：
- 禁止加载外域代码，防止复杂的攻击逻辑。
- 禁止外域提交，网站被攻击后，用户的数据不会泄露到外域。
- 禁止内联脚本执行（规则较严格，目前发现 GitHub 使用）。
- 禁止未授权的脚本执行（新特性，Google Map 移动版在使用）。
- 合理使用上报可以及时发现 XSS，利于尽快修复问题。
用法
配置你的网络服务器返回 Content-Security-Policy HTTP 标头
Content-Security-Policy: policy
<meta> 元素也可以被用来配置该策略
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; img-src https://*; child-src 'none';" />
跨站请求伪造（CSRF）
跨站请求伪造（Cross-Site Request Forgery，CSRF）是一种网络攻击，它利用了用户已经在某个网站上进行了身份验证的情况下，通过伪装的请求来执行未经用户授权的操作。攻击者通常利用用户的会话信息（如Cookie）来伪造请求，从而让用户在不知情的情况下执行恶意操作。
以下是CSRF攻击的一般工作流程：
- 用户已经在一个网站上登录，获取了有效的会话凭据（如Cookie）。
- 攻击者创建一个伪造的网页，其中包含目标网站的请求，但是这些请求被伪装成正常的操作，例如点击按钮、加载图片等。
- 攻击者将伪造的网页诱使用户访问，使用户的浏览器发送请求到目标网站，携带了用户的会话信息。
- 目标网站接收到请求后，由于用户已经登录，会认为这是一个合法请求，并执行相应的操作，而用户并不知情。
跨站请求伪造示例
一个简单的CSRF攻击示例，以帮助您理解这种类型的攻击：
背景信息：
假设有一个在线银行应用程序，用户可以在其中进行转账操作。用户已经登录到他们的银行帐户，会话令牌存储在他们的Cookie中。
攻击示例：
攻击者知道银行应用程序的转账功能是通过以下URL来执行的：https://www.examplebank.com/transfer?to=attacker&amount=1000
攻击者创建了一个恶意网站，其中包含以下HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>恶意网站</title>
</head>
<body>
<h1>点击下面的按钮获得免费礼物：</h1>
<img src="https://www.examplebank.com/transfer?to=attacker&amount=1000" alt="免费礼物" id="giftImage">
<script>
document.getElementById("giftImage").click();
</script>
</body>
</html>
攻击者将这个恶意网站链接发送给银行的用户，或者通过社交工程手段诱使用户点击该链接。用户在点击链接后，将被重定向到银行的转账页面，并且由于用户已经登录，会话Cookie会随请求一起发送。
银行应用程序不会验证请求是否来自合法的来源，因为攻击者伪装成了用户的请求。结果，银行将执行该请求，将1000单位的资金转移到攻击者指定的帐户中，而用户并不知情。
CSRF的特点
- 攻击一般发起在第三方网站，而不是被攻击的网站。被攻击的网站无法防止攻击发生。
- 攻击利用受害者在被攻击网站的登录凭证，冒充受害者提交操作；而不是直接窃取数据。
- 整个过程攻击者并不能获取到受害者的登录凭证，仅仅是“冒用”。
- 跨站请求可以用各种方式：图片URL、超链接、CORS、Form提交等等。部分请求方式可以直接嵌入在第三方论坛、文章中，难以进行追踪。
防止CSRF攻击措施
为了防止CSRF攻击，开发者可以采取以下措施：
- 使用CSRF令牌：为每个请求生成一个随机的CSRF令牌，并将该令牌与用户的会话相关联。在每次请求中，都需要包含这个CSRF令牌，并且服务器会验证令牌的有效性。这样可以确保只有拥有有效令牌的请求才会被执行。
- 验证HTTP Referer头：服务器可以检查请求的HTTP Referer头，确保请求是从合法的来源发出的。但要注意，这个方法可能不够安全，因为攻击者可以伪装Referer头。
- 防止跨域请求：通过实施跨域请求策略（Cross-Origin Resource Sharing，CORS）来限制来自其他域的请求。这可以通过设置合适的CORS头来实现。
- 使用SameSite Cookie属性：SameSite Cookie属性可以限制Cookie是否可以随着跨站请求一起发送。将Cookie标记为SameSite可以在一定程度上减少CSRF攻击的风险。
点击劫持（ClickJacking）
点击劫持（Clickjacking）是一种网络攻击技术，也被称为UI劫持（UI Redressing）。它的目标是欺骗用户点击一个看似无害的界面元素（如按钮、链接、图像等），实际上却在背后执行恶意操作，而用户并不知情。
点击劫持攻击通常通过以下方式实施：
-
攻击者创建一个恶意网站或者篡改一个合法网站，将目标网站嵌入到一个透明的iframe中，通常是将目标网站的界面元素完全或部分覆盖。
-
然后，攻击者诱使用户访问这个恶意网站。
-
用户在看到恶意网站的外观和交互元素时，可能会误以为他们在与目标网站进行交互，而实际上他们的点击和操作都会被传递到隐藏的目标网站上。
-
用户可能会不知情地执行一些敏感操作，如提交表单、更改密码、进行付款或执行其他未经授权的操作。
点击劫持攻击的成功在于用户被欺骗，以为他们在与一个合法的网站进行互动，而实际上他们的操作被导向了攻击者指定的操作，从而可能导致数据泄露、帐户被滥用或其他安全问题。
点击劫持防范措施
为了防止点击劫持攻击，网站开发者可以采取以下措施：
- X-Frame-Options 头: 使用X-Frame-Options HTTP响应头，可以控制网页是否可以嵌套到iframe中，从而防止被点击劫持。这个头可以设置为DENY（完全禁止嵌套）或SAMEORIGIN（只允许相同域名的嵌套）。
- DENY：不能被所有网站嵌套或加载；
- SAMEORIGIN：只能被同域网站嵌套或加载；
- ALLOW-FROM URL：可以被指定网站嵌套或加载。
- Content Security Policy（CSP）: 在CSP策略中，可以通过设置frame-ancestors指令来限制哪些网站可以嵌套当前网页。
HTTP严格传输安全（HSTS）
HTTP严格传输安全（HTTP Strict Transport Security，HSTS）是一种网络安全策略，旨在增强网站的安全性，特别是针对恶意的中间人攻击，例如SSL剥离攻击。HSTS要求客户端（通常是Web浏览器）始终通过HTTPS协议与服务器通信，而不是通过不安全的HTTP。
HSTS代表HTTP严格传输安全性，由IETF在2012年的RFC 6797中指定。创建它是为了在站点通过HTTPS运行时强制浏览器使用安全连接。它是您添加到Web服务器的安全标头，并在响应标头中反映为Strict-Transport-Security。HSTS很重要，因为它解决了以下问题：
- 访问者尝试使用您网站页面的不安全版本 (HTTP://) 的任何尝试都将自动转发到安全版本 (HTTPS://)。
- 旧的HTTP书签和输入您网站的HTTP版本的人会让您面临中间人攻击。在这些攻击中，攻击者改变各方之间的通信并诱使他们认为他们仍在相互通信。
- 不允许覆盖无效的证书消息，这反过来又保护了访问者。
- Cookie劫持：当有人通过不安全的连接窃取会话cookie时，就会发生这种情况。Cookie可以包含各种有价值的信息，例如信用卡信息、姓名、地址等。
HSTS的主要优点
- 通过强制使用HTTPS，可以防止中间人攻击，如SSL剥离攻击。
- 提供了一种可靠的方式来强制网站在安全连接上进行通信，保护用户数据和隐私。
- 防止用户在意外或故意情况下切换到不安全的HTTP连接。
但要注意，一旦服务器启用了HSTS策略，除非它自己也启用了HTTPS，否则它将无法通过HTTP进行访问。因此，在启用HSTS之前，服务器管理员需要确保其服务器配置正确并支持HTTPS。如果配置不正确，可能会导致网站无法访问。
CDN劫持
CDN原理
CDN劫持是一种网络攻击，攻击者通过劫持内容分发网络（Content Delivery Network，CDN）上的内容，来获取用户的数据或执行恶意操作。CDN是一种用于提高网站性能和可用性的服务，通过将网站的静态资源（如图像、CSS文件、JavaScript文件等）缓存在全球分布的服务器上，以减少这些资源的加载时间和减轻源服务器的负担。
CDN劫持的途径
-
篡改内容： 攻击者可能会入侵CDN的一部分，或者通过一些技术手段，来替换CDN上的静态资源。这可以包括在图片、CSS文件或JavaScript文件中嵌入恶意代码，或者替换原始资源文件。
-
DNS劫持： 攻击者可以通过劫持域名系统（DNS）来将CDN的域名解析到自己控制的恶意服务器上。这样，用户的请求将被重定向到攻击者的服务器，而不是CDN服务器。
-
中间人攻击： 攻击者可能利用中间人位置，拦截用户与CDN服务器之间的通信，然后篡改或替换数据传输，以执行恶意操作。
CDN劫持的危险在于它可以影响到大量的用户，因为CDN通常用于分发大量流行网站的内容。攻击者可以通过CDN劫持来传播恶意软件、窃取用户的敏感信息（如登录凭据或会话令牌）或进行其他恶意活动。
防止CDN劫持的措施
-
加密通信： 使用HTTPS来加密用户与CDN之间的通信，以确保数据的机密性和完整性。
-
DNSSEC： 使用DNSSEC（域名系统安全扩展）来保护DNS记录，防止DNS劫持。
-
内容完整性检查： CDN服务提供商可以实施内容完整性检查，以确保通过CDN传输的内容没有被篡改。通过给 link 标签或者 script 标签增加 integrity 属性即可开启 SRI 功能，比如
<script type="text/javascript" src="//s.url.cn/xxxx/aaa.js"
integrity="sha256-xxx sha384-yyy"
crossorigin="anonymous"></script>
内容安全策略（CSP）
内容安全策略（CSP）是一个额外的安全层，用于检测并削弱某些特定类型的攻击，包括跨站脚本（XSS）和数据注入攻击等。无论是数据盗取、网站内容污染还是恶意软件分发，这些攻击都是主要的手段。
安全沙箱（Sandbox）
多进程的浏览器架构将主要分为两块：浏览器内核和渲染内核。而安全沙箱能限制了渲染进程对操作系统资源的访问和修改，同时渲染进程内部也没有读写操作系统的能力，而这些都是在浏览器内核中一一实现了，包括持久存储、网络访问和用户交互等一系列直接与操作系统交互的功能。浏览器内核和渲染内核各自职责分明，当他们需要进行数据传输的时候会通过 IPC 进行。
Iframe
HTML 内联框架元素 (<iframe>) 表示嵌套的browsing context。它能够将另一个 HTML 页面嵌入到当前页面中。
如何让自己的网站不被其他网站的iframe引用？
js的防御方案：将下面这段代码放到网站页面的</body>标签前，这样别人在通过iframe框架引用你的网站网页时，浏览器会自动跳转到你的网站所引用的页面上。
<script>
if (self == top) {
var theBody = document.getElementsByTagName('body')[0];
theBody.style.display = "block";
} else {
top.location = self.location;
}
</script>
使用X-Frame-Options防止网页被iframe：X-FRAME-OPTIONS是微软提出的一个http头，专门用来防御利用iframe嵌套的点击劫持攻击。
DENY // 拒绝任何域加载
SAMEORIGIN // 允许同源域下加载
ALLOW-FROM // 可以定义允许frame加载的页面地址
1585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
