安全

XSS 攻击

概述

XSS（跨站脚本攻击）是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代 码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是 JavaScript，但实际上也可以包括 Java、 VBScript、ActiveX、 Flash 或者甚至是普通的 HTML。攻击成功后，攻击者可能得到包括但不限于更高的权限（如执行一些操作）、私密网 页内容、会话和 cookie 等各种内容。形成 XSS 漏洞的主要原因是程序中输入和输出的控 制不够严格。

解决方案

HOS基础平台后端工程定义了 XSS 过滤器针对特殊字符进行过滤，目前过滤器配置的正则表达式。工具 放在 sys-core > utils文件中，使用方法如下：

<!-- 模板中直接使用 -->
<div v-html="$xss(str)"></div>
<!-- 脚本中使用 -->
<script>
	export default {
		data() {
			return {
				filterStr: this.$xss(str),
			}
		},
	}
</script>

更多配置请参见 xss (opens new window)

CSRF 攻击

概述

CSRF（跨站请求伪造）是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认 证过的网站并运行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。由于 浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去运行。这利用了 web 中用户身份验证的一个漏洞：简单的身份验证只能保证请求发自某个用户的浏览器，却不能 保证请求本身是用户自愿发出的。CSRF 攻击之所以能够成功，是因为攻击者可以完全伪造 用户的请求，该请求中所有的用户验证信息都是存在于 cookie 中，因此攻击者可以在不知 道这些验证信息的情况下直接利用用户自己的 cookie 来通过安全验证。

解决方案

1.使用 https 加密

2.传输数据时添加不对称加密算法

接口签名

概述

为保证接口的安全性，保证接口参数不被恶意篡改，对请求的接口进行签名操作

解决方案

pathVariable的处理：

在url地址中存在变量，形如 /user/staff/selectPageStaff/${name}，name为变量。

需要在调用接口时添加自定义对象pathVariable,示例如下：

<script>
  export const api4 = (param) => {
    const { name, phone, email } = param;
    return {
      url:  `/user/staff/selectPageStaff/${name}` ,
      pathVariable:{
        name: name
      },
      method: 'post',
      params: {
        phone: phone
      },
      data: {
        email: email,
        current:1,
        size:10
      }
    }
  }
</script>

签名分全部接口签名和部分接口签名。

1：全部接口签名

在 .env.development 文件里配置 VUE_APP_GLOBAL_SIGN=1

2：部分接口签名：

将上述的配置文件 VUE_APP_GLOBAL_SIGN=0

在需要加签名的接口上配置 needSign:true,代码示例如下：

<script>
/**
 * 根据实体属性条件分页查询
 *
 */
export const selectPage = (param) =>{
  return {
    url: '/user/staff/selectPage',
    method: 'get',
    needSign: true,
    params: param
  }
}
</script>

若需修改签名密钥可在 utils/aes-md5-crypt 内修改对对应的密钥

<script>
// md5密钥
const md5Key = '1234567890123456'
</script>

接口加解密

概述

请求过程中传输的接口数据的安全，防止参数以及接口返回数据被截获

解决方案

接口加密

以AES为例进行接口加密，在 .env.development 文件里配置 VUE_APP_CRYPT_TYPE='aes'另外支持sm4和rsa

第一种：项目内所有接口都加密，在 .env.development 文件里配置 VUE_APP_GLOBAL_CRYPT=1

第二种：项目内部分接口需要加密，将上述文件 .env.development 内的 VUE_APP_GLOBAL_CRYPT=0

在需要加密的接口上增加 needCrypt: true,示例如下：

<script>
export const selectPage = (param) =>{
  return {
    url: '/user/staff/selectPage',
    method: 'get',
    needCrypt: true,
    params: param
  }
}
</script>

第三种：对某些字段值进行加密

<script> 
const obj = JSON.parse(JSON.stringify(this.dialogForm));
      obj.name = this.$m.crypt(obj.name);   
      this.$api(
           this.isEdit ? "staff.updateById" : "staff.insert",obj
      )
</script>

接口解密

以AES为例进行接口解密，在 .env.development 文件里配置 VUE_APP_CRYPT_TYPE='aes'另外支持sm4和rsa

第一种：项目内所有接口都需要解密，在 .env.development 文件里配置 VUE_APP_GLOBAL_DECRYPT=1

第二种：项目内部分接口需要解密，将上述文件 .env.development 内的 VUE_APP_GLOBAL_DECRYPT=0

在需要解密的接口上增加 needDecrypt: true,示例如下：

<script>
export const selectPage = (param) =>{
  return {
    url: '/user/staff/selectPage',
    method: 'get',
    needDecrypt: true,
    params: param
  }
}
</script>

第三种：接口上某些字段值需要解密

<script>
//查询数据name字段值需要解密 调用this.$m.decrypt()方法。
  <template; slot-scope="{row}">
        {;{`{{`}} $m.decrypt(row.name); }}
  </template>
</script>

密钥修改

如需要修改密钥

AES：在 utils/aes-md5-crypt.js文件内修改对应的密钥

<script>
// AES密钥 需要用到的16位字符串的key
const AESKey = '1234567890123456qwertyuiopasdfgh'
</script>

SM4：在 utils/sm-crypt.js文件内修改对应的密钥

<script>
//可以为 16 进制串或字节数组，要求为 128 比特
const key = 'qwertyuiopasdfgh'
</script>

RSA：在 utils/rsa-crypt.js文件内修改对应的公钥和私钥

<script>
// 公钥
const publicKey = '';
// 私钥
const privateKey = ''
</script>