前端安全技术方案

wudi 8/28/2022 安全方案

为了有效防范那些心怀不轨之人的恶意攻击，从而保障系统能够始终处于安全、稳定的运行状态，针对前端安全领域中潜在的各类问题，我们精心制定并实施了极具针对性的一整套解决方案。

# 1.XSS攻击

XSS全称(Cross Site Scripting)跨站脚本攻击，是前端最常见的安全问题。XSS是一种在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其它用户使用的页面中，攻击者通过注入非法的html标签或者javascript代码，从而当用户浏览该网页时，控制用户浏览器。

# 1.1 DOM型XSS攻击

利用DOM本身存在的缺陷进行攻击。

<img src="/xxx" onerror="javascript:alert('网页被入侵')">

# 1.2 反射型xss

反射型XSS也被称为非持久性XSS，是现在最容易出现的一种XSS漏洞。XSS代码出现在URL中，通过引诱用户点击一个链接到目标网站的恶意链接来实施攻击。如下恶意链接，其中，xxx是恶意代码。传到服务器的参数data，被服务器接收之后，响应的页面包含data这个变量的，会将恶意代码注入到页面上面，进行攻击。

# 1.3 存储型xss

存储型XSS又被称为持久性XSS，它是最危险的一种跨站脚本，相比反射型XSS和DOM型XSS具有更高的隐蔽性，所以危害更大，它不需要用户手动触发。当攻击者提交一段XSS代码后，被服务器端接收并存储，当所有浏览者访问某个页面时都会被XSS，其中最典型的例子就是留言板。解决方案

1.过滤。

对用户的输入进行过滤，通过将<> '' ""等字符进行转义，移除用户输入的Style节点、Script节点、Iframe节点。

function filterXss(str){
    var s = "";
    if(str.length == 0) return "";
    s = str.replace(/&/g,"&amp;");
    s = s.replace(/</g,"&lt;");
    s = s.replace(/>/g,"&gt;");
    s = s.replace(/ /g,"&nbsp;");
    s = s.replace(/\'/g,"&#39;");
    s = s.replace(/\"/g,"&quot;");
    return s; 
}

1
2
3
4
5
6
7
8
9
10
11

2.编码根据输出数据所在的上下文来进行相应的编码。数据放置于HTML元素中，需进行HTML编码，放置于URL中，需要进行URL编码。此外，还有JavaScript编码、CSS编码、HTML属性编码、JSON编码等等。
3.httpOnly 在cookie中设置HttpOnly属性，使js脚本无法读取到cookie信息。

# 2.CSRF

CSRF全称(Cross-Site Request Forgeries)跨站请求伪造。指攻击者冒充用户发起请求（在用户不知情的情况下），完成一些违背用户意愿的事情。解决方案

1.使用token 服务器产生一个token存到session中，同时将token发送给客户端，客户端提交表单时带上该token，服务器验证token与session是否一致，一致就允许访问，否则拒绝访问。
2.Referer 验证 Referer 指的是页面请求来源，意思是，只接受本站的请求，服务器才做响应；如果不是，就拦截。
3.使用验证码对于重要请求，要求用户输入验证码，强制用户必须与应用进行交互，才能完成最终请求。

# 3.本地存储数据泄露

很多开发者为了方便，把一些个人信息不经加密直接存到本地或者cookie，这样是非常不安全的，黑客们可以很容易就拿到用户的信息。解决方案

1.不在本地存储重要数据敏感、机密信息（例如银行账号、密码等）不要存储在本地。
2.加密所有在放到cookie中的信息或者localStorage里的信息要进行加密，加密可以用MD5、AES针对不同的场景进行加密，或者用base64进行多次加密然后再多次解码。

# 4.反编译

反编译是指将已编译的代码（如js、css等）还原成可读的源代码。对于Web前端开发者来说，反编译可能会导致源代码泄漏、商业机密被窃取等问题，因此需要采取一些措施来防止反编译。下面是一些常用的方法和技术来帮助前端开发者避免反编译。解决方案

压缩、混淆和加密代码压缩代码可以减小文件体积，使代码更难被阅读和理解；混淆代码是指将代码中的变量、函数、类名等重命名为无意义或难于理解的字符，使其更难以被反编译；加密代码是指将代码进行加密处理，使其只能在特定的解密环境中运行。通过这些操作，可以使反编译者难以获得源代码的可读版本。
懒加载和异步加载懒加载是指延迟加载一些不必要的代码，只在需要的时候再进行加载。这样可以减少代码的量和复杂度，从而提高反编译的难度。异步加载是指在页面加载时，通过动态加载脚本的方式来加载代码，以减少对主要内容的影响，并使代码更难被反编译。

# 5.数据劫持

网站没有安装SSL证书的情况下，用户访问网站的所有信息和数据都是公开暴露的，攻击者很容易就拦截这些明文数据，获取其中的重要信息，比如银行卡号、密码等，给用户的个人财产造成损失，也会给企业的品牌形象带来严重损害。解决方案：SSL证书针对于以上风险，我们会跟站点配置SSL证书，其核心功能是建立一个安全的通道，确保数据在传输过程中的安全性和完整性。SSL证书通过以下几个步骤实现这一目标：

加密通信：SSL证书确保数据在客户端和服务器之间传输时进行加密，即使数据被拦截，也无法被未授权者解读。
身份验证：SSL证书提供了一种验证网站身份的方式，帮助用户确认他们正在与预期的服务器通信，从而避免了“中间人攻击”。
数据完整性：在数据传输过程中，SSL证书能够检测数据是否被篡改，确保接收到的信息与发送时完全一致。

# 6.第三方服务密钥被滥用

在使用第三方服务时，如果前端直接调用第三方服务，前端将密钥暴露在客户端，有被不法分子滥用我们Api的风险，可能造成第三方资费、流量被迅速用完，影响客户正常使用系统的安全风险；若通过前端调用服务端，服务端调用第三方服务，则通过了服务端中转，一定程度上影响了接口的性能；为了兼顾安全和性能，我们采用"代理服务器转发配置密钥“的形式调用第三方接口。 解决方案：通过代理服务器转发 以Nginx反向代理为例，参考以下三个location配置，进行反向代理设置，分别对应自定义地图、海外地图、Web 服务，其中自定义地图和海外地图如果没有使用到相关功能也可以不设置。需要将以下配置中的「你的安全密钥」六个字替换为你刚刚获取的securityJsCode安全密钥。如果你使用了多个 key，需要在代理设置中根据 key 来映射不同的安全密钥。

server {
  listen       80;             #nginx端口设置，可按实际端口修改
  server_name  127.0.0.1;      #nginx server_name 对应进行配置，可按实际添加或修改
  # 自定义地图和海外地图如果没有使用到相关功能可以不设置，但是如果需要设置顺序要与示例一致
  # 自定义地图服务代理
  location /_AMapService/v4/map/styles {
    set $args "$args&jscode=你的安全密钥";
    proxy_pass https://webapi.amap.com/v4/map/styles;
  }
  # 海外地图服务代理
  location /_AMapService/v3/vectormap {
    set $args "$args&jscode=你的安全密钥";
    proxy_pass https://fmap01.amap.com/v3/vectormap;
  }
  # Web服务API 代理
  location /_AMapService/ {
    set $args "$args&jscode=你的安全密钥";
    proxy_pass https://restapi.amap.com/;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

前端安全领域的挑战是持续变化和不断演进的，我们不能有丝毫的懈怠。未来，我们将持续关注技术的发展和威胁的变化，不断优化和完善这些解决方案，以更强大的防护能力和更敏锐的洞察力，为系统的安全稳定运行保驾护航，为用户的数据和隐私提供坚如磐石的保护。

香草拿铁

Choose mode