网站安全性

最新推荐文章于 2024-09-08 13:25:37 发布
最新推荐文章于 2024-09-08 13:25:37 发布
阅读量433 收藏 1
点赞数
分类专栏： 前端高频知识点 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43526403/article/details/128545137
版权

目录

前端安全问题

如何提高网站的安全性？

前端安全相关-XSS和CSRF

url的加密解密

sql 注入

前端数据安全

其他建议

前端安全问题

1. XSS：跨站脚本攻击

就是攻击者想尽一切办法将可以执行的代码注入到网页中。

存储型（server端）：

  • 场景：见于带有用户保存数据的网站功能，如论坛发帖、商品评论、用户私信等。
  • 攻击步骤：
    • i）攻击者将恶意代码提交到目标网站的数据库中
    • ii）用户打开目标网站时，服务端将恶意代码从数据库中取出来，拼接在HTML中返回给浏览器
    • iii）用户浏览器在收到响应后解析执行，混在其中的恶意代码也同时被执行
    • iv）恶意代码窃取用户数据，并发送到指定攻击者的网站，或者冒充用户行为，调用目标网站的接口，执行恶意操作

反射型（Server端）

与存储型的区别在于，存储型的恶意代码存储在数据库中，反射型的恶意代码在URL上

  • 场景：通过 URL 传递参数的功能，如网站搜索、跳转等。
  • 攻击步骤：
    • i）攻击者构造出特殊的 URL，其中包含恶意代码。
    • ii）用户打开带有恶意代码的 URL 时，网站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器。
    • iii）用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
    • iv）恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

Dom 型(浏览器端）

DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，而其他两种 XSS 都属于服务端的安全漏洞。

  • 场景：通过 URL 传递参数的功能，如网站搜索、跳转等。
  • 攻击步骤：
    • i）攻击者构造出特殊的 URL，其中包含恶意代码。
    • ii）用户打开带有恶意代码的 URL。
    • iii）用户浏览器接收到响应后解析执行，前端 JavaScript 取出 URL 中的恶意代码并执行。
    • iv）恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

预防方案：（防止攻击者提交恶意代码，防止浏览器执行恶意代码）

  • i）对数据进行严格的输出编码：如HTML元素的编码，JS编码，CSS编码，URL编码等等
    • 避免拼接 HTML；Vue/React 技术栈，避免使用 v-html / dangerouslySetInnerHTML
  • ii）CSP HTTP Header，即 Content-Security-Policy、X-XSS-Protection
    • 增加攻击难度，配置CSP(本质是建立白名单，由浏览器进行拦截)
    • Content-Security-Policy: default-src 'self'-所有内容均来自站点的同一个源（不包括其子域名）
    • Content-Security-Policy: default-src 'self' *.trusted.com-允许内容来自信任的域名及其子域名 (域名不必须与CSP设置所在的域名相同)
    • Content-Security-Policy: default-src https://yideng.com-该服务器仅允许通过HTTPS方式并仅从yideng.com域名来访问文档
  • iii）输入验证：比如一些常见的数字、URL、电话号码、邮箱地址等等做校验判断
  • iv）开启浏览器XSS防御：Http Only cookie，禁止 JavaScript 读取某些敏感 Cookie，攻击者完成 XSS 注入后也无法窃取此 Cookie。
  • v）验证码

2. CSRF：跨站请求伪造

攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。

攻击流程举例

  • i）受害者登录 a.com，并保留了登录凭证（Cookie）
  • ii）攻击者引诱受害者访问了b.com
  • iii）b.com 向 a.com 发送了一个请求：a.com/act=xx浏览器会默认携带a.com的Cookie
  • iv）a.com接收到请求后，对请求进行验证，并确认是受害者的凭证，误以为是受害者自己发送的请求
  • v）a.com以受害者的名义执行了act=xx
  • vi）攻击完成，攻击者在受害者不知情的情况下，冒充受害者，让a.com执行了自己定义的操作

攻击类型

  • i）GET型：如在页面的某个 img 中发起一个 get 请求
  • ii）POST型：通过自动提交表单到恶意网站
  • iii）链接型：需要诱导用户点击链接

预防方案：

CSRF通常从第三方网站发起，被攻击的网站无法防止攻击发生，只能通过增强自己网站针对CSRF的防护能力来提升安全性。）

  • i）同源检测：通过Header中的Origin Header 、Referer Header 确定，但不同浏览器可能会有不一样的实现，不能完全保证
  • ii）CSRF Token 校验：将CSRF Token输出到页面中（通常保存在Session中），页面提交的请求携带这个Token，服务器验证Token是否
    正确
  • iii）双重cookie验证：
    • 流程：
      • 步骤1：在用户访问网站页面时，向请求域名注入一个Cookie，内容为随机字符串（例如csrfcookie=v8g9e4ksfhw）
      • 步骤2：在前端向后端发起请求时，取出Cookie，并添加到URL的参数中（接上例POST https://www.a.com/comment?csrfcookie=v8g9e4ksfhw）
      • 步骤3：后端接口验证Cookie中的字段与URL参数中的字段是否一致，不一致则拒绝。
    • 优点：
      • 无需使用Session，适用面更广，易于实施。
      • Token储存于客户端中，不会给服务器带来压力。
      • 相对于Token，实施成本更低，可以在前后端统一拦截校验，而不需要一个个接口和页面添加。
    • 缺点：
      -Cookie中增加了额外的字段。
      -如果有其他漏洞（例如XSS），攻击者可以注入Cookie，那么该防御方式失效。
      -难以做到子域名的隔离。
      -为了确保Cookie传输安全，采用这种防御方式的最好确保用整站HTTPS的方式，如果还没切HTTPS的使用这种方式也会有风险。
  • iv）Samesite Cookie属性：Google起草了一份草案来改进HTTP协议，那就是为Set-Cookie响应头新增Samesite属性，它用来标明这个 Cookie是个“同站 Cookie”，同站Cookie只能作为第一方Cookie，不能作为第三方Cookie，Samesite 有两个属性值，Strict 为任何情况下都不可以作为第三方 Cookie ，Lax 为可以作为第三方 Cookie , 但必须是Get请求

3. iframe 安全

说明：

  • i）嵌入第三方 iframe 会有很多不可控的问题，同时当第三方 iframe 出现问题或是被劫持之后，也会诱发安全性问题
  • ii）点击劫持
    • 攻击者将目标网站通过 iframe 嵌套的方式嵌入自己的网页中，并将 iframe 设置为透明，诱导用户点击。
  • iii）禁止自己的 iframe 中的链接外部网站的JS

预防方案：

  • i）为 iframe 设置 sandbox 属性，通过它可以对iframe的行为进行各种限制，充分实现“最小权限“原则
  • ii）服务端设置 X-Frame-Options Header头，拒绝页面被嵌套，X-Frame-Options 是HTTP 响应头中用来告诉浏览器一个页面是否可以嵌入 >iframe< 中
    • eg.X-Frame-Options: SAMEORIGIN
    • SAMEORIGIN: iframe 页面的地址只能为同源域名下的页面
    • ALLOW-FROM: 可以嵌套在指定来源的 iframe 里
    • DENY: 当前页面不能被嵌套在 iframe 里
  • iii）设置 CSP 即 Content-Security-Policy 请求头
  • iv）减少对 iframe 的使用

4. 错误的内容推断

说明：

文件上传类型校验失败后，导致恶意的JS文件上传后，浏览器 Content-Type Header 的默认解析为可执行的 JS 文件

预防方案：

设置 X-Content-Type-Options 头

5. 第三方依赖包

减少对第三方依赖包的使用，如之前 npm 的包如：event-stream 被爆出恶意攻击数字货币；

6.HTTPS

描述：

黑客可以利用SSL Stripping这种攻击手段，强制让HTTPS降级回HTTP，从而继续进行中间人攻击。

预防方案：

使用HSTS（HTTP Strict Transport Security），它通过下面这个HTTP Header以及一个预加载的清单，来告知浏览器和网站进行通信的时候强制性的使用HTTPS，而不是通过明文的HTTP进行通信。这里的“强制性”表现为浏览器无论在何种情况下都直接向务器端发起HTTPS请求，而不再像以往那样从HTTP跳转到HTTPS。另外，当遇到证书或者链接不安全的时候，则首先警告用户，并且不再
用户选择是否继续进行不安全的通信。

7.本地存储数据

避免重要的用户信息存在浏览器缓存中

8.静态资源完整性校验

描述

使用 内容分发网络 (CDNs) 在多个站点之间共享脚本和样式表等文件可以提高站点性能并节省带宽。然而，使用CDN也存在风险，如果攻击者获得对 CDN 的控制权，则可以将任意恶意内容注入到 CDN 上的文件中 （或完全替换掉文件），因此可能潜在地攻击所有从该 CDN 获取文件的站点。

预防方案

将使用 base64 编码过后的文件哈希值写入你所引用的 <script> 或 标签的 integrity 属性值中即可启用子资源完整性能。

9.网络劫持

描述：

  • DNS劫持（涉嫌违法）：修改运行商的 DNS 记录，重定向到其他网站。DNS 劫持是违法的行为，目前 DNS 劫持已被监管，现在很少见 DNS 劫持
  • HTTP劫持：前提有 HTTP 请求。因 HTTP 是明文传输，运营商便可借机修改 HTTP 响应内容（如加广告）。

预防方案

全站 HTTPS

10.中间人攻击：

中间人攻击（Man-in-the-middle attack, MITM），指攻击者与通讯的两端分别创建独立的联系，并交换其所收到的数据，使通讯的两端认为他们正在通过一个私密的连接与对方直接对话，但事实上整个会话都被攻击者窃听、篡改甚至完全控制。没有进行严格的证书校验是中间人攻击着手点。目前大多数加密协议都提供了一些特殊认证方法以阻止中间人攻击。如 SSL （安全套接字层）协议可以验证参与通讯的用户的证书是否有权威、受信任的数字证书认证机构颁发，并且能执行双向身份认证。攻击场景如用户在一个未加密的 WiFi下访问网站。在中间人攻击中，攻击者可以拦截通讯双方的通话并插入新的内容。

场景

  • i）在一个未加密的Wi-Fi 无线接入点的接受范围内的中间人攻击者，可以将自己作为一个中间人插入这个网络
  • ii）Fiddler / Charles （花瓶）代理工具
  • iii）12306 之前的自己证书

过程

  • i）客户端发送请求到服务端，请求被中间人截获
  • ii）服务器向客户端发送公钥
  • iii）中间人截获公钥，保留在自己手上。然后自己生成一个【伪造的】公钥，发给客户端
  • iv）客户端收到伪造的公钥后，生成加密hash值发给服务器
  • v）中间人获得加密hash值，用自己的私钥解密获得真秘钥,同时生成假的加密hash值，发给服务器
  • vi）服务器用私钥解密获得假密钥,然后加密数据传输给客户端

使用抓包工具fiddle来进行举例说明

  • 首先通过一些途径在客户端安装证书
  • 然后客户端发送连接请求，fiddle在中间截取请求，并返回自己伪造的证书
  • 客户端已经安装了攻击者的根证书，所以验证通过
  • 客户端就会正常和fiddle进行通信，把fiddle当作正确的服务器
  • 同时fiddle会跟原有的服务器进行通信，获取数据以及加密的密钥，去解密密钥

常见攻击方式

  • 嗅探：嗅探是一种用来捕获流进和流出的网络数据包的技术，就好像是监听电话一样。比如：抓包工具
  • 数据包注入：在这种，攻击者会将恶意数据包注入到常规数据中的，因为这些恶意数据包是在正常的数据包里面的，用户和系统都很难发现这个内容。
  • 会话劫持：当我们进行一个网站的登录的时候到退出登录这个时候，会产生一个会话，这个会话是攻击者用来攻击的首要目标，因为这个会话，包含了用户大量的数据和私密信息。
  • SSL剥离：HTTPS是通过SSL/TLS进行加密过的，在SSL剥离攻击中，会使SSL/TLS连接断开，让受保护的HTTPS，变成不受
    保护的HTTP（这对于网站非常致命）
  • DNS欺骗，攻击者往往通过入侵到DNS服务器，或者篡改用户本地hosts文件，然后去劫持用户发送的请求，然后转发到攻击者想要转发到的服务器
  • ARP欺骗，ARP(address resolution protocol)地址解析协议，攻击者利用APR的漏洞，用当前局域网之间的一台服务器，来冒充客户端想要请求的服务端，向客户端发送自己的MAC地址，客户端无从得到真正的主机的MAC地址，所以，他会把这个地址当作真正
    的主机来进行通信，将MAC存入ARP缓存表。
  • 代理服务器

预防方案：

  • i）用可信的第三方CA厂商
  • ii）不下载未知来源的证书，不要去下载一些不安全的文件
  • iii）确认你访问的URL是HTTPS的，确保网站使用了SSL，确保禁用一些不安全的SSL，只开启：TLS1.1，TLS1.2
  • iv）不要使用公用网络发送一些敏感的信息
  • v）不要去点击一些不安全的连接或者恶意链接或邮件信息

如何提高网站的安全性？

前端常见安全问题的7个方面：

  1. iframe
  2. opener
  3. CSRF（跨站请求伪造）
  4. XSS（跨站脚本攻击）
  5. ClickJacking（点击劫持）
  6. HSTS（HTTP严格传输安全）
  7. CND劫持

解析：

  1. iframe

    a.如何让自己的网站不被其他网站的 iframe 引用？

// 检测当前网站是否被第三方iframe引用
// 若相等证明没有被第三方引用，若不等证明被第三方引用。当发现被引用时强制跳转百度。
if(top.location != self.location){
    top.location.href = 'http://www.baidu.com'
}

​ b.如何禁用，被使用的 iframe 对当前网站某些操作？

sandbox是html5的新属性，主要是提高iframe安全系数。iframe因安全问题而臭名昭著，这主要是因为iframe常被用于嵌入到第三方中，然后执行某些恶意操作。
现在有一场景：我的网站需要 iframe 引用某网站，但是不想被该网站操作DOM、不想加载某些js（广告、弹框等）、当前窗口被强行跳转链接等，我们可以设置 sandbox 属性。如使用多项用空格分隔。

  • allow-same-origin：允许被视为同源，即可操作父级DOM或cookie等
  • allow-top-navigation：允许当前iframe的引用网页通过url跳转链接或加载
  • allow-forms：允许表单提交
  • allow-scripts：允许执行脚本文件
  • allow-popups：允许浏览器打开新窗口进行跳转
  • “”：设置为空时上面所有允许全部禁止
  1. opener

如果在项目中需要 打开新标签 进行跳转一般会有两种方式

// 1) HTML -> <a target='_blank' href='http://www.baidu.com'>
// 2)  JS  -> window.open('http://www.baidu.com')

/* 
 * 这两种方式看起来没有问题，但是存在漏洞。
 * 通过这两种方式打开的页面可以使用 window.opener 来访问源页面的 window 对象。
 * 场景：A 页面通过 <a> 或 window.open 方式，打开 B 页面。但是 B 页面存在恶意代码如下：
 * window.opener.location.replace('https://www.baidu.com') 【此代码仅针对打开新标签有效】
 * 此时，用户正在浏览新标签页，但是原来网站的标签页已经被导航到了百度页面。
 * 恶意网站可以伪造一个足以欺骗用户的页面，使得进行恶意破坏。
 * 即使在跨域状态下 opener 仍可以调用 location.replace 方法。
 */

​ a.

<a target="_blank" href="" rel="noopener noreferrer nofollow">a标签跳转url</a>

<!-- 
  通过 rel 属性进行控制：
  noopener：会将 window.opener 置空，从而源标签页不会进行跳转（存在浏览器兼容问题）
  noreferrer：兼容老浏览器/火狐。禁用HTTP头部Referer属性（后端方式）。
  nofollow：SEO权重优化，详情见 https://blog.csdn.net/qq_33981438/article/details/80909881
 -->

​ b.window.open()

<button οnclick='openurl("http://www.baidu.com")'>click跳转</button>

function openurl(url) {
    var newTab = window.open();
    newTab.opener = null;
    newTab.location = url;
}
  1. CSRF / XSRF（跨站请求伪造）

你可以这么理解 CSRF 攻击：攻击者盗用了你的身份，以你的名义进行恶意请求。它能做的事情有很多包括：以你的名义发送邮件、发信息、盗取账号、购买商品、虚拟货币转账等。总结起来就是：个人隐私暴露及财产安全问题。

/*
 * 阐述 CSRF 攻击思想：（核心2和3）
 * 1、浏览并登录信任网站（举例：淘宝）
 * 2、登录成功后在浏览器产生信息存储（举例：cookie）
 * 3、用户在没有登出淘宝的情况下，访问危险网站
 * 4、危险网站中存在恶意代码，代码为发送一个恶意请求（举例：购买商品/余额转账）
 * 5、携带刚刚在浏览器产生的信息进行恶意请求
 * 6、淘宝验证请求为合法请求（区分不出是否是该用户发送）
 * 7、达到了恶意目标
 */

防御措施（推荐添加token / HTTP头自定义属性）

  • 涉及到数据修改操作严格使用 post 请求而不是 get 请求
  • HTTP 协议中使用 Referer 属性来确定请求来源进行过滤（禁止外域）
  • 请求地址添加 token ，使黑客无法伪造用户请求
  • HTTP 头自定义属性验证（类似上一条）
  • 显示验证方式：添加验证码、密码等
  1. XSS/CSS（跨站脚本攻击）

XSS又叫CSS（Cross Site Script），跨站脚本攻击：攻击者在目标网站植入恶意脚本（js / html），用户在浏览器上运行时可以获取用户敏感信息（cookie / session）、修改web页面以欺骗用户、与其他漏洞相结合形成蠕虫等。

浏览器遇到 html 中的 script 标签时，会解析并执行其中的js代码

针对这种情况，我们对特殊字符进行转译就好了（vue/react等主流框架已经避免类似问题，vue举例：不能在template中写script标签，无法在js中通过ref或append等方式动态改变或添加script标签）

XSS类型：

  • 持久型XSS：将脚本植入到服务器上，从而导致每个访问的用户都会执行
  • 非持久型XSS：对个体用户某url的参数进行攻击

防御措施（对用户输入内容和服务端返回内容进行过滤和转译）

  • 现代大部分浏览器都自带 XSS 筛选器，vue / react 等成熟框架也对 XSS 进行一些防护
  • 即便如此，我们在开发时也要注意和小心
  • 对用户输入内容和服务端返回内容进行过滤和转译
  • 重要内容加密传输
  • 合理使用get/post等请求方式
  • 对于URL携带参数谨慎使用
  • 我们无法做到彻底阻止，但是能增加黑客攻击成本，当成本与利益不符时自然会降低风险
  1. ClickJacking（点击劫持）

ClickJacking 翻译过来被称为点击劫持。一般会利用透明 iframe 覆盖原网页诱导用户进行某些操作达成目的。

防御措施

  • 在HTTP投中加入 X-FRAME-OPTIONS 属性，此属性控制页面是否可被嵌入 iframe 中【DENY：不能被所有网站嵌套或加载；SAMEORIGIN：只能被同域网站嵌套或加载；ALLOW-FROM URL：可以被指定网站嵌套或加载。】
  • 判断当前网页是否被 iframe 嵌套（详情在第一条 firame 中）
  1. HSTS（HTTP Strict Transport Security：HTTP严格传输安全）

网站接受从 HTTP 请求跳转到 HTTPS 请求的做法，例如我们输入“http://www.baidu.com”或“www.baidu.com”最终都会被302重定向到“[https://www.baidu.com](https://link.zhihu.com/?target=https%3A//www.baidu.com)”。这就存在安全风险，当我们第一次通过 HTTP 或域名进行访问时，302重定向有可能会被劫持，篡改成一个恶意或钓鱼网站。
HSTS：通知浏览器此网站禁止使用 HTTP 方式加载，浏览器应该自动把所有尝试使用 HTTP 的请求自动替换为 HTTPS 进行请求。用户首次访问时并不受 HSTS 保护，因为第一次还未形成链接。我们可以通过 浏览器预置HSTS域名列表 或 将HSTS信息加入到域名系统记录中，来解决第一次访问的问题。

  1. CDN劫持

出于性能考虑，前端应用通常会把一些静态资源存放到CDN（Content Delivery Networks）上面，例如 js 脚本和 style 文件。这么做可以显著提高前端应用的访问速度，但与此同时却也隐含了一个新的安全风险。如果攻击者劫持了CDN，或者对CDN中的资源进行了污染，攻击者可以肆意篡改我们的前端页面，对用户实施攻击。
现在的CDN以支持SRI为荣，script 和 link 标签有了新的属性 integrity，这个属性是为了防止校验资源完整性来判断是否被篡改。它通过 验证获取文件的哈希值是否和你提供的哈希值一样来判断资源是否被篡改。
使用 SRI 需要两个条件：一是要保证 资源同域 或开启跨域，二是在<script>中 提供签名 以供校验。

integrity 属性分为两个部分，第一部分是指定哈希值的生成算法（例：sha384），第二部分是经过编码的实际哈希值，两者之前用一个短横(-)来分隔

前端安全相关-XSS和CSRF

XSS（Cross-site scripting），指的是跨站脚本攻击，攻击者通过向页面A注入代码，达到窃取信息等目的，本质是数据被当作程序执行。XSS危害是很大的，一般XSS可以做到以下的事情：

  • 获取页面的数据，包括dom、cookies、localStorage等
  • 劫持前端逻辑
  • 发送请求

CSRF(Cross Site Request Frogy)指的是跨站请求伪造。与XSS不同的是，XSS是攻击者直接对我们的网站A进行注入攻击，CSRF是通过网站B对我们的网站A进行伪造请求。

举个例子，你登录购物网站A之后点击一个恶意链接B，B请求了网站A的下单接口，结果是你在网站A的帐号真的会生成一个订单。其背后的原理是：网站B通过表单、get请求来伪造网站A的请求，这时候请求会带上网站A的cookies，若登录态是保存在cookies中，则实现了伪造攻击。

解析：

XSS

  1. XSS的类型

    • 反射型（非持久）：通过URL参数直接注入
    • 存储型（持久）：存储到数据库后读取时注入
    • 基于DOM：被执行的恶意脚本会修改页面脚本结构

  2. XSS的注入点

    • HTML的节点内容或属性
    • javascript代码
    • 富文本

  3. XSS的防御

    3.1 浏览器的防御

    防御和“X-XSS-Protection”有关，默认值为1，即默认打开XSS防御，可以防御反射型的XSS，不过作用有限，只能防御注入到HTML的节点内容或属性的XSS，例如URL参数中包含script标签。不建议只依赖此防御手段。

    3.2 防御HTML节点内容

    存在风险的代码：

    <template>
    <p>{{username}}</p>
</template>

<script>
    username = "<script>alert('xss')</script>"
</script>

    编译后的代码：

    <p>
    <script>alert('xss')</script>
</p>

    以上例子是采用vue语法，但其实在vue这样的框架中，{{username}}中的内容是经过字符串化的，所以是不会被浏览器执行的，若换其他模板语言例如jade，则可能存在风险。下同。

    防御代码：

    通过转义<为&lt以及>为&gt来实现防御HTML节点内容。

    <template>
    <p>{{username}}</p>
</template>
<script>
    escape = function(str){
        return str.replace(/</g, '&lt;').replace(/>/g, '&gt;')
    }
    username = escape("<script>alert('xss')</script>")
</script>

    3.3 防御HTML属性

    <template>
    <img :src="image" />
</template>
<script>
    image = 'www.a.com/c.png" οnlοad="alert(1)'
</script>

    编译后代码：

    <img src="www.a.com/c.png" οnlοad="alert(1)" />

    防御代码：

    通过转义"为&quto;、'为'来实现防御，一般不转义空格，但是这要求属性必须带引号！

    <template>
    <img :src="image" />
</template>
<script>
    escape = function(str){
        return str.replace(/"/g, '&quto;').replace(/'/g, '&#39;').replace(/ /g, '&#32;')
    }
    image = escape('www.a.com/c.png" οnlοad="alert(1)')
</script>

    3.4 防御javaScript代码

    假设访问页面地址为www.a.com?id=1";alert(1);"

    风险代码：

    var id = getQuery('id')

    编译后代码：

    var id = "1";alert(1);""

    防御代码：

    通过将数据进行JSON序列化

    escape = function(str){
    return JSON.stringify(str)
}

    3.5 防御富文本

    风险代码：

    <template>
    <p v-html="richTxt"></p>
</template>

<script>
    richTxt = '<a οnmοuseοver=alert(document.cookie)>点击</a>'
</script>

    上面的这段代码中，当鼠标移动到“点击”上面时，就会触发alert弹窗！这在vue中是会发生的。

    防御富文本是比较复杂的工程，因为富文本可以包含HTML和script，这些难以预测与防御，建议是通过白名单的方式来过滤允许的HTML标签和标签的属性来进行防御，大概的实现方式是：

    • 将HTML代码段转成树级结构的数据

    • 遍历树的每一个节点，过滤节点的类型和属性，或进行特殊处理

    • 处理完成后，将树级结构转化成HTML代码

      当然，也可以通过开源的第三方库来实现，类似的有js-xss

    3.6 CSP 内容安全策略

    CSP(content security policy)，是一个额外的安全层，用于检测并削弱某些特定类型的攻击，包括跨站脚本 (XSS) 和数据注入攻击等。

    CSP可以通过HTTP头部（Content-Security-Policy）或``元素配置页面的内容安全策略，以控制浏览器可以为该页面获取哪些资源。比如一个可以上传文件和显示图片页面，应该允许图片来自任何地方，但限制表单的action属性只可以赋值为指定的端点。一个经过恰当设计的内容安全策略应该可以有效的保护页面免受跨站脚本攻击。

url的加密解密

JavaScript中有三个可以对字符串编码的函数，分别是：escape,encodeURI, encodeURIComponent，

相应3个解码函数：unescape,decodeURI,decodeURIComponent 。

三种方式的特点：escape()除了 ASCII 字母、数字和特定的符号外，对传进来的字符串全部进行转义编码，因此如果想对URL编码，最好不要使用此方法。而encodeURI() 用于编码整个URI,因为URI中的合法字符都不会被编码转换。encodeURIComponent方法在编码单个URIComponent（指请求参数）应当是最常用的，它可以讲参数中的中文、特殊字符进行转义，而不会影响整个URL。

解析：

1.escape()函数

定义和用法
escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。

语法
escape(string)

参数 描述
string 必需。要被转义或编码的字符串。

返回值
已编码的 string 的副本。其中某些字符被替换成了十六进制的转义序列。

说明
该方法不会对 ASCII 字母和数字进行编码，也不会对下面这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。其他所有的字符都会被转义序列替换。

*2.encodeURI()函数
*定义和用法
encodeURI() 函数可把字符串作为 URI 进行编码。

语法
encodeURI(URIstring)

参数 描述
URIstring 必需。一个字符串，含有 URI 或其他要编码的文本。

返回值
URIstring 的副本，其中的某些字符将被十六进制的转义序列进行替换。

说明
该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。

该方法的目的是对 URI 进行完整的编码，因此对以下在 URI 中具有特殊含义的 ASCII 标点符号，encodeURI() 函数是不会进行转义的：;/?:@&=+$,#

3.encodeURIComponent() 函数

定义和用法
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。

语法
encodeURIComponent(URIstring)

参数 描述
URIstring 必需。一个字符串，含有 URI 组件或其他要编码的文本。

返回值
URIstring 的副本，其中的某些字符将被十六进制的转义序列进行替换。

说明
该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。

其他字符（比如 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

提示和注释
提示：请注意 encodeURIComponent() 函数 与 encodeURI() 函数的区别之处，前者假定它的参数是 URI 的一部分（比如协议、主机名、路径或查询字符串）。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。

sql 注入

描述：就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗数据库服务器执行恶意的SQL命令,从而达到和服务器
进行直接的交互

预防方案：

  • i）后台进行输入验证，对敏感字符过滤。
  • ii）使用参数化查询，能避免拼接SQL，就不要拼接SQL语句。

前端数据安全

描述：反爬虫。如猫眼电影、天眼查等等，以数据内容为核心资产的企业

预防方案：

  • i）font-face拼接方式：猫眼电影、天眼查
  • ii）background 拼接：美团
  • iii）伪元素隐藏：汽车之家
  • iv）元素定位覆盖式：去哪儿
  • v）iframe 异步加载：网易云音乐

其他建议

  • i）定期请第三方机构做安全性测试，漏洞扫描
  • ii）使用第三方开源库做上线前的安全测试，可以考虑融合到CI中
  • iii）code review 保证代码质量
  • iv）默认项目中设置对应的 Header 请求头，如 X-XSS-Protection、 X-Content-Type-Options 、X-Frame-Options Header、Content-Security-Policy 等等
  • v）对第三方包和库做检测：NSP(Node Security Platform)，Snyk
Kw_Chng
关注
专栏目录
网站安全性：C#防SQL注入代码的实现方法
12-22
对于网站的安全性，是每个网站开发者和运营者关心的问题。网站一旦出现漏洞，那势必将造成很大的损失。为了提高网站的安全性，首先网站要防注入，重要的是服务器的安全设施要做到位。 　下面说下网站防注入的几点...
网页设计方案中的网页安全性保护措施
light86的专栏
01-02 507
网页设计方案中的网页安全性保护措施
如何确保网站的安全性
Uguardsec的博客
10-18 3075
大部分企业通过网站平台来进行信息发布、交流及宣传、推广企业业务，用户可以通过网站对企业进行初步的了解，并进一步获取咨询服务。企业网站不光是一个展示企业形象的平台，更是一种有效的营销方式，当然其安全性也是至关重要。随着网站的普遍应用，企业网站安全问题从而受到越来越多人的关注。 安全性一直是网站维护的重点，网站常见的安全问题有网站服务器系统存在漏洞、DDoS攻击、网页篡改、网站数据泄露等。面对网络威胁的不确定性，企业该如何保障网站安全？ 1.确保网站服务器安全 尽可能选择安全性较高、稳定性较强的服务器，同时，服
如何做好网络安全
最新发布
dexunyun的博客
09-08 1113
面对日益复杂的网络威胁，企业必须高度重视网站安全，建立全面的安全防护体系，加强内部和外部安全防护，制定详细的应急响应计划，确保在发生安全事件时能够迅速响应并恢复服务。及时报警、零误报 基于智能监测分波算法对全国超50个监测节点智能任务分配，适应不同运营商、不同线路的网络状况，模拟真实的网络环境，提供精准、迅速的监测结果，并通过可视化风险评估报表、安全报告及风险告警等手段构建完善监测体系。一旦网站遭受攻击，这些数据可能被窃取、篡改或泄露，不仅损害企业利益，还可能侵犯用户隐私，导致法律纠纷和声誉损失。
增强Web的安全性
Alinker
03-03 3014
增强Web的安全性 转自:动态网制作指南 www.knowsky.com通过互联网，人们可以做网上交易等各种事情。如何使信息不被窃取、站点不被破坏，就成了网络应用开发者、网管员的重要责任。本文介绍了几种提高Web站点安全的原则和方法。 一、应用环境 一般来说，提供数据库应用服务的Web站点主要由操作系统服务器、数据库服务器和Web服务器三项构成，由此，我们对Web站点的安全设置就可以从这三方面入手
网站的安全性如何保障？
Spontaneous_0的博客
11-28 1249
网站的安全性一直是互联网发展中的一个重要议题，它关乎着用户的隐私安全、数据保护以及信息传输的可靠性。为了保障网站的安全性，各个网站都采取了一系列的措施。首先，加密技术是保障网站安全性的重要手段之一。网站会使用SSL（Secure Sockets Layer）或TLS（Transport Layer Security）等加密协议，对用户和服务器之间的通信进行加密，确保数据在传输过程中不会被窃取或篡改。这种加密技术能有效地保护用户的个人信息和敏感数据。其次，网站安全性的保障还需要依靠漏洞修复和安全更新。
asp网站安全性心得
02-05
自己写的几条关于网站开发过程中，最基本的几条网站安全性，当然还有很多方面我在里面没有写的，主要是我不想改这个文档了，其实网站安全性还有一个最重要的方面，就是要尽量多几层封装，尽量使用参数来传参，包括...
网站安全性风险及防范措施
05-25
介绍了网络与网站安全的类型,其中包括病毒、木马程序、堵塞攻击、安全漏洞等几类,同时简要介绍了网络安全的防御问题,详细介绍了javascript保护网站、ASP技术保护代码、及ASP文件的安全设置与防范,可以给读者一个安全...
如何提高网站安全性，预防网站被攻击（干货教程）！ddos攻击网站被抓.doc
10-22
如何提高网站安全性，预防网站被攻击（干货教程）！ddos攻击网站被抓.doc
安全性测试技术
03-23
例如，公共漏洞和披露网站CVE(CommonVulnerabilitiesandExpo　安全性测试技术 软件测试　1.网页安全漏洞检测-　一些设计不当的网站系统可能包含很多可以被利用的安全漏洞，这些安全漏洞如同给远程攻击者开了一个...
你知道的提高前端安全的手段有哪些
dzqxwzoe的博客
12-30 813
指攻击者与通讯的两端分别创建独立的联系，并交换其所收到的数据，使通讯的两端认为他们正在通过一个私密的连接与对方直接对话，但事实上整个会话都被攻击者完全控制。因为入门学习阶段知识点比较杂，所以我讲得比较笼统，大家如果有不懂的地方可以找我咨询，我保证知无不言言无不尽，需要相关资料也可以找我要，我的网盘里一大堆资料都在吃灰呢。从时代发展的角度看，网络安全的知识是学不完的，而且以后要学的会更多，同学们要摆正心态，既然选择入门网络安全，就不能仅仅只是入门程度而已，能力越强机会才越多。②CTF技术文档（最全中文版）
前端常见的安全问题
laihongfeng的博客
03-07 7765
一、XSS （Cross-Site Scripting）跨站脚本攻击 通常指通过“HTML注入”篡改了网页，插入了恶意的脚本，从而在用户浏览网页时，获取用户信息、控制用户浏览器等的一种攻击 分类：持久性（存储型xss） 指攻击者通过漏洞将恶意内容写在数据库中，然后当其他用户访问含有这些恶意数据的网页时，就遭受了攻击。攻击位置常常在留言板，阅读列表等。 非持久性（ 反射型xss） 把用户输入的数据或者url携带的数据“反射”给浏览器，往往是黑客通过诱使用户点击一个恶意链接从而达到攻击目的 非持
如何提高网站的安全性？
BoGo专栏.PHP
02-11 5675
古人有句话说的比较好，工欲善其事必先利其器，我们想要提高网站安全性，先要明白有那些因素会影响到网站的安全问题。       一、网站程序问题       很多网站的安全问题大多是由于网站程序存在漏洞，所以想要提高网站安全性，必须要选择安全的后台cms系统，若有能力可以自己去开发网站后台，这样安全性能得到极大的提高，若是从网上选择一些免费开源的源码来做网站，需要注意以下两点：      
如何提升网站安全性
weixin_43724402的博客
08-05 1649
现在越来越多的中小型企业通过建站的方式为企业的产品进行推广服务，通过网站为产品导流是一个重要的手段。 如何提升网站安全性如何提升网站安全性 建站很容易，但是做好网站的安全维护却是一件不容易的事情，随着逐年增加的网络攻击，网络黑客通过漏洞对网站进行攻击。为了避免网站遭到攻击，需要提升网站的安全性，同时不影响用户的体验。 在实际的运营管理当中，很多企业对于网站的安全性不够重视，网站存在很多安全隐患。比...
网站安全性问题有哪些？
互零网络科技有限公司
08-26 1251
我相信很多人已经意识到网站对企业的重要性， 很多人通过网站获得很多好处。 同时，我相信许多人对网站保持冷漠的态度。 我今天要说的是，如果您准备制作网站，请务必了解网站行业中的一些棘手问题。 对人来说最重要的是什么？ 健康！ 那么，什么对网站最重要？ 安全！ 不管网站是否做得好，安全都是最重要的。 不安全的网站不仅不能提高效果，反而会给企业造成很多不必要的麻烦。 对于公司而言，我要谈论的网站安全主要包括两点： 一，网站程序应该是安全的 每个人都会或多或少地知道，我们经常遇到一些被攻击的网站，正式的公
如何做好网站的安全性测试
Jaylon Wang的专栏
08-29 2万+
安全性保护数据以防止不合法用户故意造成的破坏； 完整性保护数据以防止合法用户无意中造成的破坏； 安全性测试（security testing）是有关验证应用程序的安全服务和识别潜在注意： 安全性测试并不最终证明应用程序是安全的，而是用于验证所设立策略的有效性，这些对策是基于威胁分析阶段所做的假设而选择的。 一个完整的WEB安全性测试可以从部署与基础结构、输入验证、身
web大前端开发中一些常见的安全性问题
热门推荐
在web前端的道路上,越走越远!
08-27 2万+
1  跨站脚本攻击(XSS攻击)         XSS(Cross Site Scripting)，跨站脚本攻击。XSS是常见的Web攻击技术之一.所谓的跨站脚本攻击指得是:恶意攻击者往Web页面里注入恶意Script代码，用户浏览这些网页时，就会执行其中的恶意代码，可对用户进行盗取cookie信息、会话劫持等各种攻击. 解决方案: (1) 输入过滤。永远不要相信用户的输入，对用户输入的数
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值