博客 (27)

ChatGPT:

当你从 <textarea> 中获取到的数据中包含换行符时,如果直接在 Vue 模板中使用插值表达式 {{}} 显示,是无法保持换行的。因为在 HTML 中,多个连续的空格和换行符都会被视为一个空格,因此如果直接将 \n 显示在模板中,会被渲染成一个空格。

解决这个问题的方法之一是使用 CSS 样式来控制换行的显示。可以为显示数据的元素添加 white-space: pre-wrap; 样式,该样式可以保留换行符并自动换行。

例如,假设你的数据保存在 text 变量中,可以这样在模板中使用:

<pre style="white-space: pre-wrap;">{{ text }}</pre>

在上面的例子中,使用 <pre> 元素来包裹要显示的数据,并添加 white-space: pre-wrap; 样式,这样数据中的换行符就能被保留并自动换行了。

另外,如果你在 Vue 组件中使用了 v-html 指令来显示数据,也可以在数据中使用 <br> 标签来手动添加换行符,然后使用 v-html 来渲染数据。但是,这种方法需要注意 XSS 攻击的问题,因为 v-html 可以渲染任意的 HTML 标签和内容,如果数据中包含恶意代码,很容易被攻击者利用。

xoyozo 1 年前
1,052

论坛出现动态页面打开或刷新非常慢(超过半分钟),甚至打不开,该页无法显示,502 Bad Gateway 等情况,TTFB 计时需要好几秒。

微信图片_20220528233028.png

切换 nginx 版本、php 版本 等均无效果,甚至购买新的 ECS 重新搭建环境也是效果甚微。

最终在阿里云 RDS 管理中,手动主备库切换,问题得以解决。

image.png

因此大概率是原主库有问题(有损坏的表需要修复或锁等情况)。

查询故障时间段的慢 SQL,发现某表的锁等待时间特别长,不知道是不是这个表的原因导致的。

image.png

次日,提交工单得到回复是原主库(现备库)会自动修复,经再次主备库切换测试得到了肯定的结果。

再次日,又遇到同样的打开慢的情况,这次直接找到慢 SQL 中锁等待时间较长的表,优化(OPTIMIZE TABLE)(虽然是 InnoDB),立刻解决了问题。

xoyozo 2 年前
2,280

今天进入阿里云 ECS Windows Server 服务器时,猛然发现 C 盘、D 盘根目录下都出现了“!aegis”和“zaegis”快捷方式(硬连接):

image.png

通过查看“属性”发现指向目录 C:\ProgramData\hipsdata\private

image.png

目录内部有 aaa、bbb 等目录,每个目录(包括最外层目录)都有许多以随机串命名的文件,后缀名各不相同,用记事本打开后也仅看到一长串随机字符串:

image.png

第一反应肯定是服务器被入侵了!

可是找了一圈也没发现哪里有问题,突然想起是不是前几天购买了阿里云的“云安全中心”这个产品,提交工单后得到了一个令人放心的结果:

image.png

这个是云安全中心诱饵目录文件,监控未知勒索病毒使用的。请参考:勒索病毒防护原理

xoyozo 3 年前
4,348

按产品类型查询:费用 - 费用分析,右侧可筛选产品,可按月按天查询,自动合计

按实例查询:费用 - 费用账单,搜索实例ID,按月查询

另:已通过提交工单确认无法查询 OSS 按 Bucket 的账单及 CDN 按域名的账单。

xoyozo 3 年前
1,474

【阿里云】尊敬的@aliyun.com:为了保障服务器的稳定运行,您的IP:  实例名称: 已启动限流保护措施。阈值与产品规格相关,您可以登录云盾控制台调整清洗阈值,若超出调整范围请提交售后工单反馈或电话95187-1进行咨询。

【阿里云】尊敬的@aliyun.com:您的IP: 受到攻击流量已超过云盾DDoS基础防护的带宽峰值,服务器的所有访问已被屏蔽,如果300分钟后攻击停止将自动解除否则会延期解除。详情请登录【云盾控制台】-【DDoS基础防护】查看或致电95187-1进行咨询。

恭喜,你的 ECS 服务器受到 DDoS 攻击了。这个时候,工单客服和电话客服都会极力推销高防 IP 这个产品(DDoS高防(新BGP)),为了抵挡一年才会遇到几分钟的攻击,咱们还是选择更为经济的方式来解决攻击这个问题吧。

ECS 等产品都会自带流量清洗这个功能,在阈值范围内的攻击流量会免费处理掉,超过阈值就把 ECS 拉入黑洞,以防止同机房的其它服务受到影响。一般攻击才持续 5~20 分钟,关小黑屋就等 5 个小时,谁比较善良。

既然受攻击的是 ECS 公网 IP,那么我们可以借用负载均衡(SLB)使用 ECS 的私网 IP 来请求业务。

初期可以创建一个按量付费的 SLB,熟悉费用后可再次调整。选择“私网”(文末解释为什么不选择“公网”)

image.png

服务地址绑定到 ECS,按业务需求添加监听端口:

image.png


此时,SLB 已经和 ECS 打通了,但是这个私网 SLB 并没有公网 IP,所以继续购买一个叫弹性公网 IP (EIP)的产品,用于打通公网与私网。同样初期选择按量付费。

将 SLB 与 EIP 绑定(各自的管理界面都有相关操作入口)。

最后,将域名解析到 EIP 即可,顺便将 TTL 改为最小值。

解析生效后,外部的请求通过 EIP 到 SLB 再到 ECS 的私网 IP 访问成功,但 ECS 主动的出流量仍然通过其公网 IP 流出,在黑洞期间相关的操作仍然会失败(如上传文件到外部图床),这个等后续遇到再补充解决方案。


一旦 DDoS 改为攻击 EIP,那么只要重新创建一个新的 EIP,将 SLB 绑定到该新的 EIP,并解析域名即可。


既然本例的 SLB 是私网到私网的,是不是可以省去 SLB,由 EIP 直接到 ECS?

经实践证明,EIP 绑定 ECS 会提示 ECS 已存在公网 IP,无法绑定。而且,带宽计费方式为按固定带宽的包年包月实例,不支持将公网 IP 转换为弹性公网 IP。


SLB 为什么不选择“公网”?

本方案仅为临时防止 DDoS 攻击,所以一旦再次受到攻击需要立即做出反应,而 SLB 的配置相对于 EIP 会更为复杂,所以我们选择新建 EIP 的方式来代替新建公网 SLB。费用方面,私网 SLB 没有流量费用,EIP 的流量费用与公网 SLB 相同,所以两种方案的费用是相差不大的。


最后,推荐使用阿里云 SDK 通过 API 接口来实现一键部署/更换 EIP 功能。

进阶功能:使用接口 DescribeEipAddresses 判断 EIP 的 LockReason 状态是否为 security,若是则自动切换 EIP,实现无人值守全自动防 DDoS。

xoyozo 3 年前
3,266

这个现象在国产浏览器上使用极速内核时出现,原因是百度编辑器上传图片功能通过 <form /> 提交到 <iframe /> 时,因跨域导致 cookie 丢失。

ASP.NET 的 ASP.NET_SessionId 默认的 SameSite 属性值为 Lax,将其设置为 None 即可:

protected void Session_Start(object sender, EventArgs e)
{
    // 解决在部分国产浏览器上使用百度编辑器上传图片时(iframe),未通过 cookie 传递 ASP.NET_SessionId 的问题
    string ua = Request.UserAgent ?? "";
    var browsers = new string[] { "QQBrowser/" /*, "Chrome/" 不要直接设置 Chrome,真正的 Chrome 会出现正常页面不传递 Cookie 的情况 */ };
    bool inWeixin = ua.Contains("MicroMessenger/"); // 是否在微信中打开(因微信PC端使用QQ浏览器内核,下面的设置会导致其网页授权失败)
    if (browsers.Any(c => ua.Contains(c)) && !inWeixin)
    {
        Response.Cookies["ASP.NET_SessionId"].SameSite = SameSiteMode.None;
    }
}

以上代码加入到 Global.asaxSession_Start 方法中,或百度编辑器所在页面。

注意一:SameSite=None 时会将父页面的 cookie 带入到 iframe 子页的请求中,从而导致 cookie 泄露,请确保项目中无任何站外引用,如网站浏量统计器、JS组件远程CDN等!

注意二:微信PC版的内嵌浏览器使用QQ浏览器内核,以上代码会导致其微信网页授权不能正常执行。

xoyozo 4 年前
3,437

form 提交 checkbox

<form method="get" asp-action="Index">
    <input type="checkbox" name="a" value="1" /> 一
    <input type="checkbox" name="a" value="2" /> 二
</form>

get 方式的 url 中会出现多个相同名称的参数

/abc?a=1&a=2

C# 使用数组类型接收参数

public IActionResult Index(string[] a)
{
}


xoyozo 4 年前
2,927

image.png

Unify Template 提供三种文件上传样式(如上图),“Plain File Input”和“File input”使用传统 <form /> 提交,“Advanced File input”调用组件实现。


ASP.NET Core 实现传统 <form /> 提交(以“Plain File Input”为例):

<form class="g-brd-around g-brd-gray-light-v4 g-pa-30 g-mb-30" id="form_avatar_upload" asp-action="AvatarUpload" enctype="multipart/form-data" method="post">
    <!-- Plain File Input -->
    <div class="form-group mb-0">
        <p>Plain File Input</p>
        <label class="u-file-attach-v2 g-color-gray-dark-v5 mb-0">
            <input id="fileAttachment" name="Avatar" type="file" onchange="form_avatar_upload.submit()">
            <i class="icon-cloud-upload g-font-size-16 g-pos-rel g-top-2 g-mr-5"></i>
            <span class="js-value">Attach file</span>
        </label>
    </div>
    <!-- End Plain File Input -->
</form>
public class AvatarUploadModel
{
    public IFormFile Avatar { get; set; }
}

[HttpPost]
public IActionResult AvatarUpload(AvatarUploadModel Item)
{
    return RedirectToAction("");
}


ASP.NET Core 调用 HSFileAttachment 组件实现:

<div class="form-group mb-20">
    <label class="g-mb-10">上传作品文件(包)</label>
    <input class="js-file-attachment_project" type="file" name="" id="file_project">
    <div style="display: none;" id="file_project_tip">
        <div class="u-file-attach-v3 g-mb-15" id="file_project_tip_content">
            <h3 class="g-font-size-16 g-color-gray-dark-v2 mb-0">拖曳文件到此处或者 <span class="g-color-primary">浏览你的电脑</span></h3>
            <p class="g-font-size-14 g-color-gray-light-v2 mb-0">
                如果您的作品包含多个文件,请添加到压缩包再上传
            </p>
            <p class="g-font-size-14 g-color-gray-light-v2 mb-0">
                支持的文件格式:
                <code>zip</code>
                <code>rar</code>
                <code>7z</code>
                <code>psd</code>
                <code>ai</code>
                <code>cdr</code>
                <code>jpg</code>
                <code>png</code>
                <code>gif</code>
                <code>tif</code>
                <code>webp</code>
            </p>
            <p class="g-font-size-14 g-color-gray-light-v2 mb-0">文件(包)的大小不能超过 <span>@options.Value.MaxSizeOfSigleFile_MB</span> MB</p>
        </div>
    </div>
    <small class="form-control-feedback">请上传作品文件</small>
</div>

<!-- JS Implementing Plugins -->
<script src="//cdn.***.com/unify/unify-v2.6.2/html/assets/vendor/jquery.filer/js/jquery.filer.min.js"></script>
<!-- JS Unify -->
<script src="//cdn.***.com/unify/unify-v2.6.2/html/assets/js/helpers/hs.focus-state.js"></script>
<script src="//cdn.***.com/unify/unify-v2.6.2/html/assets/js/components/hs.file-attachement.js"></script>
<!-- JS Plugins Init. -->
<script>
    $(document).on('ready', function () {
        // initialization of forms
        $.HSCore.components.HSFileAttachment.init('.js-file-attachment_project', {
            changeInput: $('#file_project_tip').html(),
            uploadFile: {
                url: url_UploadFile,
                data: { type: 'project' },
                success: function (data, element) {
                    console.log(data);

                    if (!data.success) {
                        var parent = element.find(".u-progress-bar-v1").parent();
                        element.find(".u-progress-bar-v1").fadeOut("slow", function () {
                            $("<div class=\"text-error g-px-10\"><i class=\"fa fa-minus-circle\"></i> Error</div>").hide().appendTo(parent).fadeIn("slow");
                        });

                        alert(data.err_msg);
                    } else {
                        var parent = element.find(".u-progress-bar-v1").parent();
                        element.find(".u-progress-bar-v1").fadeOut("slow", function () {
                            $("<div class=\"text-success g-px-10\"><i class=\"fa fa-check-circle\"></i> Success</div>").hide().appendTo(parent).fadeIn("slow");
                        });

                        $('#file_project_tip_content').slideUp();

                        upload_project_id = data.id;
                    }
                }
            }
        });
        $.HSCore.helpers.HSFocusState.init();
    });
</script>
public IActionResult UploadFile([FromForm(Name = "[]")]IFormFile file, string type)
{
    return Ok(new { id = 1 });
}


xoyozo 4 年前
2,562

经 2020.02.22 提交工单咨询回复,阿里云控制台暂无法针对 CDN 的域名或 OSS 的 Bucket 来区分费用账单,但 ECS、RDS 可根据实例 ID 来查询:

image.png

虽然不能准确查询 CDN 各域名的消费情况,但我们可以在 CDN 的统计分析中查询域名排行,从而可以按流量占比再结合 CDN 的总体费用来计算各域名的大致费用:

image.png

当然,能把 HTTPS 等增值服务和资源包等因素考虑进去会更加合理。

xoyozo 4 年前
3,109

微信支付商户可以直接注册,也可以由公众号、小程序、开放平台等开通。

直接注册时可勾选使用的公众号、小程序、APP、PC 网站等,并填写相应的 APPID。

填写资料提交审核,等待 1~2 工作日。

审核通过后签约,选择“手动提现”或“自动提现”,建议“手动提现”,原因如下:


用户付款、退款、企业付款等流程

以乐趣到家为例,

用户 A 提交搬家需要,并支付 100 元搬家费(其中的 10 元是平台抽成,90 元是服务者 B 的收入)。

那么 A 付款成功后,100 元打入商户的“未结算”中,在结算周期后扣除手续费变成“已结算”(若手续费 0.6% 则变成 99.4 元),如果商户开通了自动提现,则直接打入对公账户。

当 A 申请退款时,如果“未结算”资金充足,那么从“未结算”资金中退款给 A,如果不足,则从“可用余额”中退款(从商户角度来说应该是“企业付款”)。

若服务正常完成,则从可用余额中付款 90 元给 B。


可用余额(简称余额)是专用于支付的资金,其资金来源可以是充值或从“已结算”资金转入(前提是未开通自动提现)。

如果开通了“企业付款”,那么相关资金也是从余额中扣除的。


所以,退款(用户角度的“退款”)直接从“未结算”中扣是最划算的,只当“未结算”中资金不足时采用余额退款(用户角度的“退款”,商户角度的“企业付款”)。

由于退款(商户角度的“退款”)的前提是有相应的订单,所以上例中的 90 元支付给 B 时不能使用商户的退款功能,只能从余额支付(企业付款),而从“已结算”转到“余额”是最划算的,如从“已结算”到“对公账户”再充值到“余额”就会涉及开票缴税。


下面是如何关闭和再次开通“自动提现”。(注意:并非所有的商户都有此功能!据我所知,结算周期为 T+1 的有关闭功能,T+7 的不能关闭)

image.pngimage.png


以上系本人经验总结,仅供交流,不承担任何责任,如有错误敬请指正。QQ 940534113


xoyozo 5 年前
4,647