Web网页安全的定义与意义

Web网页安全是指保护基于Web环境的互联网应用不受恶意攻击、破坏或未经授权的访问，确保Web服务器、应用程序和用户数据的安全性和完整性。

用户数据安全保护：前端网页作为用户与应用程序交互的界面，经常涉及用户敏感信息的输入和传输，如用户名、密码、个人数据等。强化前端网页安全可以保护用户数据不被窃取或滥用，维护用户隐私权益。

防范恶意攻击：恶意攻击，如跨站脚本攻击(XSS)、跨站请求伪造(CSRF)等，往往通过前端漏洞入侵系统。加强前端网页安全能有效防止这类攻击，维护系统的稳定和用户数据的安全。

维护业务声誉：一次安全事件就可能导致企业声誉受损，影响用户信任。前端网页安全不仅关乎技术，也关乎企业的品牌形象和信誉。

提升 用户体验 和信任： 一个安全的前端网页可以让用户在使用时更加放心，不用担心个人信息被盗取或误操作导致损失。用户对网站的信任度提升，将直接提高用户体验，进一步巩固网站的用户基础。

Web常见安全漏洞与攻击方式（4种）

跨站脚本攻击（ XSS ）

跨站脚本攻击（Cross-Site Scripting，简称XSS）是一种常见的网络攻击方式。这种攻击主要利用网站对用户输入过滤不足的缺陷，输入可以显示在页面上或者对其他用户造成影响的HTML代码，从而盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害。

根据攻击方式的不同，XSS攻击可以分为反射型XSS和储存型XSS。反射型XSS交互的数据一般不会被存在在数据库里面，只是简单的把用户输入的数据反射给浏览器，一次性，所见即所得。而储存型XSS交互的数据会被存在在数据库里面，永久性存储，具有很强的稳定性。

非持久型 XSS（反射型 XSS ）

一种网络攻击方式，它发生在当用户提交的数据被服务器接收并返回给用户的浏览器时，没有进行适当的验证和过滤，导致这些数据被当做代码执行。这种攻击通常是通过在URL参数或网站搜索栏中输入恶意代码来触发的，而且这些恶意代码只会被执行一次，因此也被称为"非持久性XSS"。

反射型XSS攻击的特征

即时性：反射型XSS攻击在用户提交恶意脚本后立即执行，不需要等待服务器存储和处理数据。这意味着攻击可以迅速传播并影响大量用户。

一次性：反射型XSS攻击的效果通常只持续一次，即当用户访问包含恶意脚本的页面时，脚本会执行一次，然后失效。攻击者需要诱骗用户点击恶意链接或执行恶意操作才能再次发起攻击。

诱骗性：反射型XSS攻击通常需要诱骗用户点击包含恶意脚本的链接或提交恶意数据。攻击者可能会利用社会工程学手段，如伪装成合法网站、发送钓鱼邮件等，来诱骗用户中招。

反馈率低：由于反射型XSS攻击需要用户主动点击恶意链接或提交恶意数据，因此其成功率相对较低。攻击者可能需要大量的尝试才能成功攻击一个目标。

反射性XSS举例

持久型 XSS（存储型 XSS）

持久型 XSS 漏洞，一般存在于 Form 表单提交等交互功能，如文章留言，提交文本信息等，黑客利用的 XSS 漏洞，将内容经正常功能提交进入数据库持久保存，当前端页面获得后端从数据库中读出的注入代码时，恰好将其渲染执行。

持久型XSS攻击的特征

持久性：这是持久型XSS攻击的最显著特征。植入的恶意脚本会被保存在后端数据库或者文件系统中，这意味着无论何时用户访问包含该恶意脚本的页面，脚本都会被执行。这与反射型XSS的一次性执行不同，持久型XSS的影响更为深远和长期。

广泛影响：由于恶意脚本被永久存储并在每次页面加载时执行，这使得持久型XSS攻击能够影响大量的用户，而不仅仅是一次性的或针对特定用户的。

盗取敏感信息：持久型XSS漏洞可能会被利用来盗取用户的敏感信息，如登录凭证、个人信息等。攻击者可以通过注入恶意脚本，在后台静默地收集和发送这些信息。

存储型XSS举例

如何防御XSS攻击

输入验证和过滤：对用户输入进行严格的验证，只接受预期的内容和格式。对于任何用户提交的数据，如表单输入、URL参数等，都需要进行验证和过滤，确保其中不包含恶意脚本或HTML标签。

输出编码：在显示用户输入的内容时，要进行适当的输出编码，防止浏览器将其解析为恶意脚本。可以使用安全的函数或库，如HTML转义函数，将特殊字符转换为对应的HTML实体，从而避免被恶意利用。

避免直接操作DOM：避免使用危险的JavaScript方法直接操作DOM，如使用innerHTML等。应该采用更安全的方式更新页面内容，例如使用textContent或安全的DOM操作API。

跨站请求伪造（ CSRF ）

CSRF（Cross-Site Request Forgery，跨站请求伪造）是一种常见的网络攻击方式，攻击者通过伪造合法用户的请求，以用户的身份执行非授权的操作

攻击过程如下：

用户在已经登录过的站点A上浏览，并且站点A在用户的浏览器上设置了Cookie等身份验证信息。
攻击者在另一个站点B上创建一个包含恶意代码的页面，该页面会向站点A发送一个伪造的请求。
当用户点击站点B上的恶意链接或加载了恶意代码的资源时，用户的浏览器会执行该请求，并附带站点A的身份验证信息。
由于请求是从已经登录的用户的浏览器发送的，并且包含了合法的身份验证信息，站点A会认为是合法用户发出的请求，并执行相应的操作。

这种攻击方式利用了用户在已登录的站点上的身份验证信息，在未经用户授权的情况下执行恶意操作。可能的后果包括更改用户的密码、发表恶意内容、进行非法转账等。

CSRF攻击的特征

跨站性：攻击发生在第三方网站，而不是被直接攻击的网站，利用用户在已登录网站上的身份验证信息进行恶意操作。

伪造请求：攻击者通过伪造合法用户的请求，以该用户的身份执行非授权的操作，如更改密码、转账等。

无需直接获取凭证：与XSS攻击不同，CSRF攻击并不需要直接获取用户的登录凭证（如密码），而只是利用用户已登录的状态。

CSRF攻击举例

假如银行用以执行转账操作的URL地址如下：

ini 复制代码

https://bank.example.com/withdraw?amount=1000&to=PayeeName

一个恶意攻击者在另一个网站中https://evil.com/中放置如下代码

ini 复制代码

<img src="https://bank.example.com/withdraw?amount=1000&to=李四" />

如果有登陆了银行的用户访问恶意站点https://evil.com/，那么就会携带cookie去请求对应的转账URL，向李四转账1000元

如何防御CSRF攻击

使用 CSRF 令牌：在表单中包含一个随机生成的令牌，称为CSRF令牌。当用户提交表单时，服务器端会验证该令牌，确保请求来自于合法的来源。这样，攻击者无法伪造有效的请求，因为他们无法获取到正确的CSRF令牌。

验证HTTP Referer头部：根据HTTP协议，在HTTP头中有一个字段叫Referer，它记录了该HTTP请求的来源地址。服务器可以验证请求的Referer值，确保其来自于合法的页面。但需要注意，Referer头部可以被伪造，因此不能仅依赖Referer验证来防御CSRF攻击。

使用SameSite Cookie 属性：设置Cookie的SameSite属性为Strict或Lax，可以限制Cookie在跨站点请求中的发送。这样，即使攻击者尝试通过其他站点发送伪造的请求，也无法附带用户的身份验证信息。

实施内容安全策略（CSP） ：通过配置CSP，可以限制页面加载外部资源和执行脚本的安全机制。这有助于防止恶意脚本的注入和执行。

规范用户行为：用户不点击可疑链接，只从可信任的源加载资源，并保持对最新安全威胁的了解。提醒用户在使用公共计算机或不受信任的网络时注销敏感账户。

点击劫持（Clickjacking）

点击劫持是一种视觉欺骗的攻击手段。攻击者将需要攻击的网站通过 iframe 嵌套的方式嵌入自己的网页中，并将 iframe 设置为透明，在页面中透出一个按钮诱导用户点击。

点击劫持攻击的特征

隐蔽性：点击劫持利用了HTML中的iframe标签的透明属性，将恶意页面隐藏在正常页面之下，使用户难以察觉。

危害性：点击劫持攻击可以独立存在，也可以与其他攻击方式（如XSS和CSRF攻击）相结合，突破传统的防御措施，提升漏洞的危害程度。

利用用户信任：攻击者常常利用用户信任，例如在正常网页上覆盖一个看似合法的透明层，诱使用户进行点击操作。

跨平台和跨浏览器：点击劫持攻击可以发生在多种浏览器和操作平台上，不受特定环境限制。

难以检测：由于点击劫持攻击的隐蔽性，很难通过常规的安全检测手段来发现。

点击劫持攻击举例

xml 复制代码

<!DOCTYPE html>
<html>

<head>
  <title>Click Jacking</title>
  <style>
    html,
    body {
      overflow: hidden;
    }

    iframe {
      width: 1920px;
      height: 1080px;
      position: absolute;
      top: 100px;
      left: 0px;
      z-index: 2;
      -moz-opacity: 0.0;
      opacity: 0.2;
    }

    button {
      position: absolute;
      top: 361px;
      left: 1181px;
      width: 108px;
      height: 44px;
      border-radius: 0 10px 10px 0;
    }

    ul {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <ul>
    <li>
      购物菜单1
    </li>
    <li>
      购物菜单2
    </li>
    <li>
      购物菜单3
    </li>
    <li>
      购物菜单4
    </li>
    <li>
      购物菜单5
    </li>
  </ul>
  <button>点击前往特惠</button>
  <iframe src="百度一下，你就知道.html" scrolling="no"></iframe>
</body>
</html>

如何防御点击劫持攻击

使用最新版本的浏览器：浏览器厂商会不断修复已知的安全漏洞，确保你使用的浏览器是最新版本，可以减少被攻击的风险。

验证网站的真实性：在点击任何链接或按钮之前，要确保你正在访问的网站是真实的。可以通过查看SSL证书、网址、网站历史记录等验证。

对于重要账户，启用双重认证：即使攻击者成功进行了点击劫持攻击，也需要通过双重认证才能访问你的账户，这可以为你提供额外的安全保障。

X-FRAME-OPTIONS：X-FRAME-OPTIONS是一个HTTP响应头，用来给浏览器指示允许一个页面可否在、、或中展现的标记。它有三个可选的参数值：

DENY：表示该页面不允许在frame中展示，即便是在相同域名的页面中嵌套也不允许。
SAMEORIGIN：表示该页面可以在相同域名页面的frame中展示。
ALLOW-FROM uri：表示该页面可以在指定来源的frame中展示。

JavaScript 防御：对于某些远古浏览器来说，并不能支持上面的这种方式，那我们只有通过 JS 的方式来防御点击劫持了

xml 复制代码

<head>
  <style id="click-jack">
    html {
      display: none !important;
    }
  </style>
</head>
<body>
  <script>
    if (self == top) {
      var style = document.getElementById('click-jack')
      document.body.removeChild(style)
    } else {
      top.location = self.location
    }
  </script>
</body>

以上代码的作用就是当通过 iframe 的方式加载页面时，攻击者的网页直接不显示所有内容了

SQL注入：

SQL注入（SQL lnjection）是发生在Web程序中数据库层的安全漏洞，是比较常用的网络攻击方式之一，它不是利用操作系统的BUG来实现攻击，而是针对程序员编写时的疏忽，通过SQL语句，实现无账号登录，甚至修改数据库。也就是说，SQL注入就是在用户输入的字符串中添加SQL语句，如果在设计不良的程序中忽略了检查，那么这些注入进去的SQL语句就会被数据库服务器误认为是正常的SQL语句而运行，攻击者就可以执行计划外的命令或者访问未授权的数据。

SQL注入攻击的特征

参数长度异常：攻击者通常会在SQL注入攻击中使用长参数来尝试构建恶意语句，因此在网络流量中需要寻找异常长度的参数。

非法字符：攻击者通常使用非法字符来构建恶意SQL语句，如单引号、分号等。

异常请求：攻击者可能会在HTTP请求中包含多个语句或查询，或者在HTTP请求中包含错误或缺失的参数。

错误响应：如果应用程序未正确处理SQL注入攻击，则可能会返回错误响应。攻击者可以通过分析响应以查找此类错误，并尝试进一步攻击。

非常规流量：攻击者可能会在较短时间内发送大量请求，或在同一时间窗口内多次发送相同请求。这种非常规流量模式可能表明攻击正在进行中。

SQL注入工具举例

xml 复制代码

<form action="/login" method="POST">
    <p>Username: <input type="text" name="username" /></p>
    <p>Password: <input type="password" name="password" /></p>
    <p><input type="submit" value="登陆" /></p>
</form>

后端的 SQL 语句可能是如下这样的：

ini 复制代码

let querySQL = `
    SELECT *
    FROM user
    WHERE username='${username}'
    AND password='${password}'
`;
// 接下来就是执行 sql 语句...

我们之前预想的SQL 语句是：

sql 复制代码

SELECT * FROM user WHERE username='admin' AND password='password'

但是恶意攻击者用奇怪用户名将你的 SQL 语句变成了如下形式：

sql 复制代码

SELECT * FROM user WHERE username='admin' --' AND password='password'

在 SQL 中,' --是闭合和注释的意思，-- 是注释后面的内容的意思，所以查询语句就变成了：

sql 复制代码

SELECT * FROM user WHERE username='admin'

所谓的万能密码,本质上就是SQL注入的一种利用方式。

一次SQL注入的过程包括以下几个过程：

获取用户请求参数
拼接到代码当中
SQL语句按照我们构造参数的语义执行成功

如何防御SQL注入攻击

参数化查询：使用参数化查询是防止SQL注入的最有效方法。这种方法通过预定义SQL语句，并将用户输入作为参数传递给查询，而不是直接将其嵌入到SQL语句中。这样可以确保用户输入被视为数据，而不是可执行代码，从而防止SQL注入攻击。

输入验证和过滤：对所有用户输入进行严格的验证和过滤，确保输入符合预期的格式和类型。过滤掉可能导致SQL注入的特殊字符和语句，如单引号、分号等。可以使用白名单验证，只允许已知的、安全的输入。

最小权限原则：为数据库用户分配最小必要的权限。不要使用超级用户或具有广泛权限的账户来连接数据库。限制数据库用户的权限可以减少攻击者在成功注入SQL代码后可以执行的操作。

错误处理：不要直接将数据库错误信息暴露给最终用户。攻击者可以利用这些错误信息来获取有关数据库结构和存储的数据的详细信息。实施适当的错误处理机制，将错误信息记录到日志中，并向用户显示通用的错误消息。

总结

Web网页安全是保护网站和Web应用程序免受恶意攻击和数据泄露的关键领域。通过实施严格的访问控制、输入验证和过滤、加密技术等安全实践，以及进行定期的安全审计和测试，可以显著提高Web应用程序的安全性。同时，加强安全意识培训、日志记录和监控、备份和恢复计划等也是维护Web网页安全的重要组成部分。不断关注最新的安全威胁和漏洞信息，并采取相应的防护措施，是确保Web网页安全的持续努力。

除了以上4种安全措施，其他安全建议：

使用HTTPS：启用HTTPS协议，对传输的数据进行加密，保护用户数据在传输过程中的机密性和完整性。确保使用最新版本的TLS/SSL协议，并定期更新加密套件。

数据备份和恢复：定期备份服务器上的关键数据，并确保备份数据的安全性。制定恢复计划，以便在数据丢失或灾难情况下能够及时恢复数据和服务。

数据反爬监控：数据反爬取是保护网站和应用程序免受未经授权的数据抓取和盗取的重要任务。

加密技术：使用加密技术来保护数据的机密性和完整性。对传输的数据进行加密，如使用SSL/TLS协议，以防止数据在传输过程中被截获。对存储在服务器上的敏感数据进行加密，以防止未经授权的访问和泄露。

安全更新和修补程序：定期更新服务器操作系统、应用程序和相关软件组件，以确保修复已知的安全漏洞。及时应用安全补丁和热修复，以减少被攻击的风险。

防火墙和入侵检测系统（IDS） ：配置防火墙来限制对服务器的非法访问，并监控进出服务器的网络流量。实施入侵检测系统（IDS）来检测并响应潜在的攻击行为。

日志记录和监控：启用日志记录功能，记录服务器上的活动和安全事件。实施监控机制，实时检测可疑行为，并及时响应和处理安全事件。设置警报系统以通知管理员或安全团队。

最小权限原则：为服务器上的应用程序和服务分配最小必要的权限。避免使用超级用户或具有广泛权限的账户来运行应用程序。通过限制权限，可以减少潜在的安全风险。

物理安全：确保服务器的物理环境安全，如限制机房的访问、监控摄像头和物理锁定等。保护服务器的物理安全是防止未经授权的访问和硬件盗窃的重要方面。

响应和应急计划：建立响应和应急计划，定义在发生安全事件时的处理流程和责任分配。进行定期的安全演练和培训，以提高团队的应急响应能力。

web网页安全

Web网页安全的定义与意义

Web常见安全漏洞与攻击方式（4种）

跨站脚本攻击（ XSS ）

非持久型 XSS（反射型 XSS ）

反射型XSS攻击的特征

反射性XSS举例

持久型 XSS（存储型 XSS）

持久型XSS攻击的特征

存储型XSS举例

如何防御XSS攻击

跨站请求伪造 （ CSRF ）

CSRF攻击的特征

CSRF攻击举例

如何防御CSRF攻击

点击劫持（Clickjacking）

点击劫持攻击的特征

点击劫持攻击举例

如何防御点击劫持攻击

SQL注入：

SQL注入攻击的特征

SQL注入工具举例

如何防御SQL注入攻击

总结

跨站请求伪造（ CSRF ）