网易易盾web端H5接入

零凌林

1482人浏览 · 2022-11-28 21:01:43

零凌林 · 2022-11-28 21:01:43 发布

接入步骤

该文档是针对于vue3+js的指导手册,如果是vue2的话,注意this指向问题,需在init方法最外层定义 const that = this;用that来代替this

index.html中引入易盾的源

 <script src="https://cstaticdun.126.net/load.min.js?t=<MINUTE_TIMESTAMP>"></script>

//注意：在删除嵌入广告中加入以下代码，以防易盾被删除
if(iframe.className.includes('yidun_cover-frame'))return

在对应使用的页面里使用,原来的发送验证码方法@click=hanleSend点击调用就可以删掉了，因为下面的代码会把hanleSend的点击事件挂载到发送验证码的容器上;

注意点:

1.验证码按钮切换成倒计时,挂载code_send的发送验证码的容器.需要把v-if都改成v-show,否则挂载的方法会在第一次验证结束后被移除掉;倒计时建议仍然使用v-if,方便归零重新倒计时

2.在发送验证码的接口里加入NECaptchaValidate这个参数字段,用来把易盾验证的结果返给后端

3.该文档是针对于vue3的指导手册,如果是vue2的话,注意this指向问题,需在init方法最外层定义 const that = this;用that来代替this

4.captchaId需要更换为对应端app的id,找对应产品要,进行更换

<template>
   <!-- 存放易盾 -->
   <div id="captcha"></div>
   <span v-show="!showTime" class="code_send">发送验证码</span>
   <van-count-down v-if="!isSend" :time="time" class="get_code_btn_time" format="ss" @finish="onFinish" />
</template>

<script>
    let captchaIns = null
      // 网易易盾
    function init() {
      // 若使用降级方案接入
      // initNECaptcha 替换成 initNECaptchaWithFallback
      window.initNECaptcha(
        {
          popupStyles: {
            position: 'fixed',
            top: '20%',
          },
           //该id为,对应app需要找对应产品要
          captchaId: '2653391aaddf440ba795438f299d2168',
          element: '#captcha',
          mode: 'popup',
          width: '320px',
          theme: 'dark',
          apiVersion: 2,
          onVerify: (err, data) => {
            // 当验证失败时, 内部会自动 refresh 方法, 无需手动再调用一次
            console.log(12321321321, err)
            if (err) return
            // 以下为业务侧逻辑
            console.log('以下为业务侧逻辑')
            captchaIns.refresh()
            //把易盾的验证结果传给后端
            handleSendCode(data.validate)
          },
        },
        function onload(instance) {
          captchaIns = instance
          console.log(captchaIns)
        },
        function onerror(err) {
          // 初始化失败后触发该函数, err 对象描述当前错误信息
          console.log(err)
        }
      )
      //挂载在触发方法的容器上
      document.querySelector('.code_send').addEventListener('click', function () {
       if (!data.form.mobile||data.form.mobile.length !== 11) {
        Toast.fail('请输入正确的手机号')
        return
        }
        captchaIns && captchaIns.verify()
      })
    }
    onMounted(init)  
</script>

拓展

网易易盾是什么？

网易易盾是网易数智旗下的一站式数字内容风控品牌，它依托网易超过26年的技术积累和一线实践经验，作为国内领先的数字内容风控服务商，为面向数字化业务的客户提供专业可靠的安全服务。这些服务涵盖了内容安全、业务安全、应用安全以及安全专家服务四大领域，全方位保障客户业务的合规性、稳健性和安全运营

核心功能与服务

内容安全

网易易盾提供文本、图片、视频和音频等多种形式的内容检测服务，能够高效地识别并过滤色情、广告、涉政、暴恐等有害信息。其智能审核管理系统支持7x24小时全天候人工审核，确保内容的安全性。此外，针对不同行业的特点，如音视频行业、社交娱乐行业等，网易易盾还提供了定制化的解决方案，帮助企业在各自领域内实现内容的有效管理和监控。

业务安全

在业务安全保障方面，网易易盾推出了行为式验证码、号码认证、实人信息认证等一系列产品，用以防范恶意注册、登录保护、营销反作弊等问题。特别是对于电商、金融等行业而言，这些措施有助于减少因黑产攻击造成的经济损失，并增强用户信任度。

应用安全

为了应对日益增长的应用程序安全威胁，网易易盾提供了手游智能反外挂、Android/iOS应用加固等服务。例如，在游戏行业中，网易易盾的手游智能反外挂系统利用多年的游戏安全实战经验，有效抵御了各类外挂和破解行为；而对于移动应用，则通过VMP虚拟机源码保护技术来防止逆向分析、二次打包等情况的发生，从而保障开发者和用户的权益。

网络安全

除了上述提到的服务之外，网易易盾还涉足网络安全领域，包括但不限于DDoS高防服务、渗透测试服务及Web应用防火墙等。这些服务旨在为企业构建坚固的网络防御体系，抵御来自外部的各种网络攻击，维护业务的连续性和稳定性。

行业影响力与成就

自成立以来，网易易盾已经服务于数千家头部企业，间接覆盖了99%以上的网民群体。凭借卓越的技术实力和服务质量，网易易盾赢得了市场的广泛认可，获得了多项荣誉奖项，如36氪“影响未来的产品Great100”、AI最佳掘金案例榜“最佳业务安全守卫奖”等。不仅如此，网易易盾还积极参与国内外多个重要活动和技术竞赛，持续推动行业发展和技术进步。

综上所述，网易易盾不仅是一个专注于数字内容风控的品牌，更是众多企业在数字化转型过程中不可或缺的安全合作伙伴。它不断探索新技术的应用，致力于打造更加安全可靠的网络环境，助力各行业健康发展。

web前端安全方面可以做的措施有哪些？

在Web前端安全方面，开发者可以采取一系列措施来保护应用程序免受各种类型的攻击。以下是综合了多份资料中提到的几种关键的安全实践和技术手段：

1. 输入验证与过滤

确保所有用户提交的数据都经过严格的验证和清理，防止恶意代码注入。这包括对表单输入、URL参数、Cookie等进行检查，并且应该避免直接将未经处理的用户输入嵌入到HTML页面中。例如，在显示用户提供的内容之前，应对其进行HTML编码以去除或修正潜在的恶意脚本。

2. 内容安全策略（CSP）

通过配置Content Security Policy (CSP)，限制网页上允许加载的内容来源，从而减少恶意代码执行的风险。CSP可以通过HTTP响应头或者<meta>标签设置，它定义了一个白名单机制，用来指定哪些资源是可以被加载和执行的。例如，禁止加载外部域名下的脚本文件，限制内联样式及脚本的使用等6。

3. 防止XSS攻击

对于反射型XSS，需要确保任何从请求中获取并返回给浏览器的数据都被正确地转义。

存储型XSS要求服务端在接受到数据时就要做好过滤工作，在存储前就清除掉可能存在的危险字符。

DOM型XSS则强调前端JavaScript代码的安全性，确保动态插入DOM的操作不会导致未过滤的数据被执行。

4. 防止CSRF攻击

添加CSRF Token：在每次请求时生成唯一的Token，并将其附加到请求中；服务器端接收后会验证Token的有效性，确保请求是由合法用户发起的。

设置SameSite属性：对于Cookie，可以设置SameSite属性为Lax或Strict，这样可以阻止跨站请求携带该Cookie，降低CSRF风险。

5. 使用HTTPS协议

采用SSL/TLS加密传输层协议，保证客户端与服务器之间的通信安全，防止中间人攻击窃取敏感信息。此外，HTTPS还可以保护Cookie不被劫持，尤其是在设置了Secure标志的情况下。

6. 设置HttpOnly标记

对于包含重要信息如Session ID的Cookie，应当设置HttpOnly属性，使得这些Cookie不能被JavaScript访问，从而减少了XSS攻击者窃取Cookie的可能性。

7. 环境隔离

当涉及到执行用户提交的代码时，应该在一个沙盒环境中运行，确保此代码执行环境与主应用环境是完全隔离的，以此来限制潜在的危害范围。

8. 定期更新和审查代码

保持软件及其依赖库处于最新版本，及时修补已知漏洞，并进行代码审查，查找并修复潜在的安全隐患。此外，还应对第三方库的选择加以谨慎考虑，优先选用经过社区审核并通过安全审计的产品。

9. 避免使用LocalStorage存储敏感信息

尽量不要把敏感数据存放在LocalStorage里，因为这里的存储是没有额外的安全防护措施的，容易成为攻击目标。如果确实需要保存，则建议先对数据进行加密处理。

10. 验证码机制

为了防止自动化工具滥用API接口，可以在关键操作处加入验证码验证步骤，比如图形验证码或是滑块验证等方式。

11. 静态代码分析工具的应用

利用静态分析工具扫描源代码中的潜在问题，提前发现并解决安全隐患。这类工具可以帮助识别诸如XSS、SQL注入之类的常见漏洞。