跨站脚本攻击（Cross-site scripting，XSS）

v-html和innerHTML中用户的恶意注入

一般来讲，在Vue中，

<div v-text="text"></div>
<!-- 或者 -->
<div>{{ text }}</div>
export default {
  data() {
    return {
      text: '<h1>11</h1>'
    };
  }
}

都会解析为纯文本内容，而不是HTML标签。 但如果绑定的是

<div v-html="text"></div>

而用户输入以下内容：

<script>alert('XSS Attack!');</script>

则会导致恶意攻击。

<>转义字符

在实际开发过程中，如果直接写< 或者 >的话，有可能被当成HTML标签解析: 因此< , >都需要写成&lt;&gt;

前端加密前端解密，前端加密后端解密

用户输入密码的时候，除了https对数据进行保护，前端也可以通过加密的方式，对数据进行传输。

对称加密 AES

前后端需要约定secretKey的生成

// 生成密钥
const secretKey = CryptoJS.enc.Utf8.parse(
    CryptoJS.MD5('cipherPwd').toString().substr(8, 16)
);
// 加密
const encrypted = CryptoJS.AES.encrypt(
    this.password,
    secretKey,
    {
      mode: CryptoJS.mode.ECB, // CBC算法
      padding: CryptoJS.pad.Pkcs7, //使用pkcs7 进行padding 后端需要注意
    }
);


// 生成密钥
const secretKey = CryptoJS.enc.Utf8.parse(
    CryptoJS.MD5('cipherPwd').toString().substr(8, 16)
);
// 解密
const decrypted = CryptoJS.AES.decrypt(
    this.password.toString(),
    secretKey,
    {
      mode: CryptoJS.mode.ECB, // CBC算法
      padding: CryptoJS.pad.Pkcs7, //使用pkcs7 进行padding 后端需要注意
    }
);