业务开发中的一些问题及解决方案

Egg项目

问题现象

JS实现点击复制链接方法：

方法一

优点：有点简单，代码量少，

缺点：必须要一个输入框的这类东西

<input type="text" size="30" id="url" value="//baidu.com/">
<input type="button" value="复制链接2" onClick="url.select();document.execCommand('Copy')">
<input type="text" size="30" id="url" value="//baidu.com/">
<input type="button" value="复制链接2" onClick="url.select();document.execCommand('Copy')">
<input type="text" size="30" id="url" value="//baidu.com/">
<input type="button" value="复制链接2" onClick="url.select();document.execCommand('Copy')">

方法二

使用Flash插件，

优点：兼容各个浏览器

缺点：要引用两个插件文件，而且代码非常多。

方法三

使用clipboard.js 插件，

优点：代码量少，使用方便，

缺点：需要引入clipboard.js。

<script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js"></script>
<button class="btn" data-clipboard-text="你已经复制到内容了">复制链接</button>
<script type="text/javascript">
   new ClipboardJS('.btn');
</script>
<script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js"></script>



<button class="btn" data-clipboard-text="你已经复制到内容了">复制链接</button>


<script type="text/javascript">


   new ClipboardJS('.btn');


</script>
<script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js"></script>



<button class="btn" data-clipboard-text="你已经复制到内容了">复制链接</button>


<script type="text/javascript">


   new ClipboardJS('.btn');


</script>

本文采用方法一。

实现目标：点击页面上分享模块的复制链接按钮，通过请求后端接口将网页的URL转换成短链接（将敏感信息脱敏），然后把该链接复制到剪贴板，再ctrl+v 能够粘贴出该链接。

但是，在win7系统下复制失败。

原因分析

win7系统，异步情况下无法成功复制链接到剪贴板。

解决⽅案

刚进页面就调用长链接转短链接的API，将结果存为全局变量，如copyLink。

当点击复制链接按钮时，把刚存好的全局变量，存进剪贴板即可。

html代码如下：
<input type='text' style="display:none;" id="copy_link_data" />
html代码如下：



<input type='text' style="display:none;" id="copy_link_data" />
html代码如下：



<input type='text' style="display:none;" id="copy_link_data" />

js代码如下：
    $('body').on('click', '.copy_share', function (e) {
        let $copyDataObj = document.getElementById("copy_link_data")
        $copyDataObj.style.display = 'block'
        $copyDataObj.value = copyLink
        $copyDataObj.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        $copyDataObj.style.display = 'none'
        $.alert('提示', '複製成功')
    })
js代码如下：



    $('body').on('click', '.copy_share', function (e) {


        let $copyDataObj = document.getElementById("copy_link_data")


        $copyDataObj.style.display = 'block'


        $copyDataObj.value = copyLink

        $copyDataObj.select(); // 选择对象

        document.execCommand("Copy"); // 执行浏览器复制命令

        $copyDataObj.style.display = 'none'

        $.alert('提示', '複製成功')

    })
js代码如下：



    $('body').on('click', '.copy_share', function (e) {


        let $copyDataObj = document.getElementById("copy_link_data")


        $copyDataObj.style.display = 'block'


        $copyDataObj.value = copyLink

        $copyDataObj.select(); // 选择对象

        document.execCommand("Copy"); // 执行浏览器复制命令

        $copyDataObj.style.display = 'none'

        $.alert('提示', '複製成功')

    })

注：（win10系统不存在该问题）

场景

base64前后端的编码不一致问题

问题现象

在用户登录系统时候，特定密码出现无法登录的现象，但是不是全部会出现。

原因分析

经过排查，是由于后端自带的 base64 编码方式与现代浏览器自带的 window.btoa 方法不一致，window.atob会用 “=”来补位，而目前后端的不会补位。例如：

window.btoa('jb123456'); // "amIxMjM0NTY=" // 后端编码则会为 "amIxMjM0NTY"

解决方案

import { Base64 } from 'js-base64' // 解决低版本的浏览器不支持 window.btoa
const base64Text = text => {
  let code = Base64.encode(text)
  code = code.replace(/\=/g, '') // 删除 "=" 的补位情况
  return code
}
import { Base64 } from 'js-base64' // 解决低版本的浏览器不支持 window.btoa
const base64Text = text => {
  let code = Base64.encode(text)
  code = code.replace(/\=/g, '') // 删除 "=" 的补位情况
  return code
}
import { Base64 } from 'js-base64' // 解决低版本的浏览器不支持 window.btoa
const base64Text = text => {
  let code = Base64.encode(text)
  code = code.replace(/\=/g, '') // 删除 "=" 的补位情况
  return code
}

场景

ios访问微信签名失效

问题现象

苹果手机微信打开H5页面时，第一次调用微信API无效，报错提示签名失效，刷新之后正常。

原因分析

ios内的微信的url，浏览器记录到的是初次进入的 url，而不是当前页。

解决方案

1: 进入到需要调用微信 API 的页面时，可以 reload 整个页面，这样就会获得有效签名。

缺点: 刷新影响用户体验，而且会导致 store 中的数据失效。

2: 在进入页面时获取微信签名，其他需要调用的地方只需要在 wx.ready 的回调里面执行即可

场景

微信和支付宝定位误差过大

问题现象

微信定位和支付宝定位误差大约400米，在不同的手机表现可能不一样

原因分析

市面上有几种不同的定位坐标系，包括高德地图以及谷歌中国区地图使用的是GCJ-02坐标系，微信内置默认使用WGS-84坐标系，支付宝默认使用高德地图坐标系，还有百度地图使用的BD-09坐标系。需要采用同一种坐标系才可以进行更加精确的定位。

解决方案

使用同一种地图，比如微信内和支付宝同时使用高德坐标系；

将其中一种转换为另一种坐标系，网上有很多的转换公式，可以自行搜索。本项目中使用方案2

场景描述：

前端安全扫描出关于cookie设置httponly 不生效

如果cookie中设置了HttpOnly属性，那么通过js脚本将无法读取到cookie信息，这样能有效的防止XSS攻击，窃取cookie内容，这样就增加了cookie的安全性，即便是这样，也不要将重要信息存入cookie。XSS全称Cross SiteScript，跨站脚本攻击，是Web程序中常见的漏洞，XSS属于被动式且用于客户端的攻击方式，所以容易被忽略其危害性。其原理是攻击者向有XSS漏洞的网站中输入(传入)恶意的HTML代码，当其它用户浏览该网站时，这段HTML代码会自动执行，从而达到攻击的目的。如，盗取用户Cookie、破坏页面结构、重定向到其它网站等。

httponly 一般设置样例：

response.setHeader(``"Set-Cookie"``, "cookiename=httponlyTest;Path=/;Domain=domainvalue;Max-Age=seconds;HTTPOnly");

关于gg架构解决方案   EGG架构安全攻防

解决方案

在项目默认配置文件config.degault.js文件下配置如下代码

'use strict';
    module.exports = appInfo => {
    let config = {}
    config.security = {
    domainWhiteList: [ 'http://localhost:8002'],
    csrf: {
        enable:true,
        useSession: true,
        cookieName: 'csrfToken',
        sessionName: 'csrfToken',
        bodyName: '_csrf',
        queryName: '_csrf'
    }
 }
'use strict';
    module.exports = appInfo => {
    let config = {}
    config.security = {
    domainWhiteList: [ 'http://localhost:8002'],
    csrf: {
        enable:true,
        useSession: true,
        cookieName: 'csrfToken',
        sessionName: 'csrfToken',
        bodyName: '_csrf',
        queryName: '_csrf'
    }
 }
'use strict';
    module.exports = appInfo => {
    let config = {}
    config.security = {
    domainWhiteList: [ 'http://localhost:8002'],
    csrf: {
        enable:true,
        useSession: true,
        cookieName: 'csrfToken',
        sessionName: 'csrfToken',
        bodyName: '_csrf',
        queryName: '_csrf'
    }
 }

小结

以上是业务开发中遇到的一些问题汇总，希望对你有帮助)

更多前端文章汇总在我的 www.yuque.com/lufeilizhix… 持续更新，欢迎关注、点赞

以上均出自原创或业务中的设计及实现，感兴趣的可多交流