2022.05.12

前端安全方面

前端页面劫持和反劫持

1.跳转型劫持

跳转型劫持就是：用户输入地址 A，但是跳转到地址 B

解决办法 跳转型劫持如果用单纯靠 Web 页面进行检测比较困难，通常对比访问的 URL 是否是之前要访问的 URL，如果 URL 不一致，则记录上报。

1. 注入型劫持

注入型劫持：有别于跳转型型劫持，指通过在正常的网页中注入广告代码（js、iframe 等），实现页面弹窗提醒或者底部广告等，又分为下面三个小类：

• 注入 js 类劫持：在正常页面注入劫持的 js 代码实现的劫持

• frame 类劫持：将正常页面嵌入 iframe 或者页面增加 iframe 页面

• 篡改页面类劫持：正常页面出现多余的劫持网页标签，导致页面整体大小发生变化

注入 js 劫持

注入 js 的方式可以通过 document.write 或者直接改 html 代码片段等方式，给页面增加外链 js，为了做到更难检测，有些运营商会捏造一个不存在的 url 地址，从而不被过滤或者检测

解决办法

改写 document.write 方法 遍历页面 script 标签，给外链 js 增加白名单，不在白名单内 js 外链都上报

iframe 类劫持 解决办法 检测是否被 iframe 嵌套。 这个通过比较 parent 对象，如果页面被嵌套，则 parent!==window，要获取我们页面的 URL 地址，可以使用下面的代码：

function getParentUrl() {
  var url;
  if (parent !== window) {
    try {
      url = parent.location.href;
    } catch (e) {
      url = document.referrer;
    }
  }
  return url;
}

我们按照客户端侧--递归 DNS 服务器--权威 DNS 服务器的路径，将 DNS 劫持做如下分类： 本地 DNS 劫持和 DNS 解析路径劫持和篡改 DNS 权威记录。

DNS 劫持应对策略

1.阿里云域名检测工具(opens new window) 2.whatismydnsresolver(opens new window)

DNS 劫持防范

1. 安装杀毒软件，防御木马病毒和恶意软件；定期修改路由器管理账号密码和更新固件。

2. 选择安全技术实力过硬的域名注册商，并且给自己的域名权威数据上锁，防止域名权威数据被篡改。 型 4. 在客户端和递归 DNS 服务器通信的最后一英里使用 DNS 加密技术，如 DNS-over-TLS，DNS-over-HTTPS 等

简单的话，用白名单+黑名单在 webview 那里做个 url 的过滤和拦截，某些特定的域名直接给禁用了。

用 https 则可以防止别人篡改你原始的 url。

修改 ua 则是一种特殊情况了。如果确定是针对 ua 进行劫持，那么只要在 webview 那里设置一下 ua 就好了。

组件库的规范

1.文件命名 iconfont 和图片使用中划线命名 其他所有文件都使用驼峰命名，less 和 js 文件均用驼峰命名 2.变量命名 变量全部使用驼峰命名 后台传递的变量尽量在 reducer 中转为驼峰 3.严格区分 container 和 component 组件 container 作为一个容器组件，负责数据拉取和处理 component 作为一个展示组件，只负责展示 4.action 和 reducer 的分工 action 仅作为数据 fetch 的配置，接收数据后传递到 reducer 中处理 reducer 中实现数据的预处理，减少页面的处理逻辑 5.组件结构（理想状态） constructor componentWillMount componentDidMount componentWillReceiveProps shouldComponentUpdate componentWillUpdate componentDidUpdate componentWillUnmount clickHandlers + eventHandlers render methods render

如何拆分需求

按系统架构/模块：比如最常见的拆前端、后台，就是这种方式。

按业务/功能：比如批量更新信息的功能，可以拆分成导出模板，导入数据，校验，执行更新等子功能。

按读写维度：有些功能需要关注性能/高并发场景，这个时候可以把读的功能和写的功能拆分开，放到不同的需求里面实现。