惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Y
Y Combinator Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
博客园 - 司徒正美
Blog — PlanetScale
Blog — PlanetScale
博客园 - 聂微东
月光博客
月光博客
量子位
大猫的无限游戏
大猫的无限游戏
Stack Overflow Blog
Stack Overflow Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
The Cloudflare Blog
P
Proofpoint News Feed
B
Blog RSS Feed
美团技术团队
腾讯CDC
C
Check Point Blog
Engineering at Meta
Engineering at Meta
F
Fortinet All Blogs
N
Netflix TechBlog - Medium
Recent Announcements
Recent Announcements
J
Java Code Geeks
S
SegmentFault 最新的问题
WordPress大学
WordPress大学
宝玉的分享
宝玉的分享

张鑫旭-鑫空间-鑫生活

1分钟速度了解text-align match-parent声明 « 张鑫旭-鑫空间-鑫生活 光标的形状也能设置了,就是CSS caret-shape属性 « 张鑫旭-鑫空间-鑫生活 pretext与文字四面环绕效果的实现 « 张鑫旭-鑫空间-鑫生活 JSON.rawJSON方法的作用是什么? « 张鑫旭-鑫空间-鑫生活 如何使用CSS判断鼠标从哪个方向进入元素? « 张鑫旭-鑫空间-鑫生活 借助mediabunny纯JS实现视频水印、剪裁、合成等功能 « 张鑫旭-鑫空间-鑫生活 务必谨慎使用JS WeakRef弱引用 « 张鑫旭-鑫空间-鑫生活 CSS六边形头像的实现与蜂巢布局 « 张鑫旭-鑫空间-鑫生活 CSS corner-shape与背景底纹技术 « 张鑫旭-鑫空间-鑫生活 浅学WebTransport API:下一代Web双向通信技术 « 张鑫旭-鑫空间-鑫生活 HTML dialog元素新支持了closedBy属性 « 张鑫旭-鑫空间-鑫生活 HTML interestfor属性与悬停popover交互效果 « 张鑫旭-鑫空间-鑫生活 CSS3模拟window7炫酷界面效果展示 « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 纯js无图片无外链CSS图片幻灯片播放插件 « 张鑫旭-鑫空间-鑫生活 CSS border三角、圆角图形生成技术简介 « 张鑫旭-鑫空间-鑫生活 CSS “渐进增强”在web制作中常见应用举例 « 张鑫旭-鑫空间-鑫生活 让IE6/IE7/IE8浏览器支持CSS3属性 « 张鑫旭-鑫空间-鑫生活 jQuery – 高亮动态显示页面HTML代码插件 « 张鑫旭-鑫空间-鑫生活 翻译 – 逐渐消失的Flash网站 « 张鑫旭-鑫空间-鑫生活 CSS reset的重新审视 – 避免样式重置 « 张鑫旭-鑫空间-鑫生活 新浪微博插入话题后部分文字选中的js实现 « 张鑫旭-鑫空间-鑫生活 JavaScript实现http地址自动检测并添加URL链接 « 张鑫旭-鑫空间-鑫生活 CSS实现兼容性的渐变背景(gradient)效果 « 张鑫旭-鑫空间-鑫生活 CSS content内容生成技术以及应用 « 张鑫旭-鑫空间-鑫生活 CSS gradient渐变之webkit核心浏览器下的使用 « 张鑫旭-鑫空间-鑫生活 CSS渐变之CSS3 gradient在Firefox3.6下的使用 « 张鑫旭-鑫空间-鑫生活 区分IE8/IE7/IE6及其他浏览器-CSS “\9″hack « 张鑫旭-鑫空间-鑫生活 CSS实现跨浏览器兼容性的盒阴影效果 « 张鑫旭-鑫空间-鑫生活 CSS3&HTML5各浏览器支持情况一览表 « 张鑫旭-鑫空间-鑫生活
瞎折腾,使用JS让中文内容莫名其妙、狗屁不通 « 张鑫旭-鑫空...
张鑫旭,zhangxinxu · 2023-03-17 · via 张鑫旭-鑫空间-鑫生活

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=10791 鑫空间-鑫生活
本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。

封面图示意

一、文字保护突发奇想

突然奇想,写一段JS,让中文内容变得奇奇怪怪,就是读起来好像通常,但细细一看,错误百出这种。

可以用来对文字内容进行保护。

举个例子,文章内容不希望对方复制,很多人的做法是禁止右键,禁止选中,这个体验并不好。

还有一些网站的做法是在复制内容最后加一段版权描述,代码示意:

document.addEventListener('copy', function (event) {
    var clipboardData = event.clipboardData || window.clipboardData;
    if (!clipboardData) { return; }
    var text = window.getSelection().toString();
    if (text) {
        event.preventDefault();
        clipboardData.setData('text/plain', text + '\n\n鑫空间版权所有');
    }
})

这些都是目前市面上比较流行的做法,但流行的并不一定是最合适的,如果悄悄地让复制的内容出现一些不容易发现的错误(例如常见的错别字,关键词汇意思反转),效果应该会更好,因为更加隐蔽。

说干就干,趁着周日有空,代码梭起来。

二、粗糙的实现

思路如下,数字随机变化,“你我他”还有“的地得”随机映射,然后一些词汇反义。

反义的话,我就想到弄个中文反义词库,找了下,有对应的Github文档,见这里

里面反义词数量巨多,全部使用显然不行,一是没必要,二是性能差,三是对技术要求比较高,犯不着。

所以,只需要单个字的反义词就好了,就是这些。

单个字反义词示意

然后处理成需要的一对一键值映射的对象,就可以了。

这是实现的JavaScript代码:

String.prototype.disorder = function () {
  // 代码略...?
}

执行非常简单,假设原始正确文本变量名是text,则混淆后的代码获得可以这么表示:

const textDisorder = text.disorder();

案例演示

我找了一段没有任何营养的新闻:

3月18日,俞敏洪以“永不言弃”为主题在亚布力做商业心灵分享,谈起东方甄选的“知识分享”型直播带货,他说,直播的特点就是能说会道,但是网络上那种买买买的嚎叫,我是完全看不起的。

俞敏洪认为,直播带货应该是一种心平气和的对产品进行知识性讲解的,存在讲解之余还能进行其他的知识的传播。

“所以东方甄选第一场这是我做的,当时新东方是完全不知道怎么选品,选的都是全中国最贵的农产品,但是我依然拿着地图,拿着地理书,拿着历史书,把每一个产品的采地和这个采地的历史条分缕析的讲给第一批东方甄选的购买者听。”他说。

然后使用写好的 JS 润了下,结果是:

错误文字示意

意思大致懂,但是读起来莫名其妙,哈哈哈。

不过,从案例来看,文字的混淆命中率还是非常高的,实际上应该可以再降低50%,因为现在混淆太多,已经太明显了。

大家可以根据实际使用需求修改JS代码中的概率或者映射字符数量。

哦,忘了展示JS代码了,您可以狠狠地点击这里:中文内容变得阅读混乱demo

实现源码就在上面这个红色文字的demo页面中,而前面提到的概率可以参照下图所示的代码位置示意进行修改,目前是50%的概率:

概率设置代码示意

三、如何使用与实地测试

使用方法如下:

  1. 引入对应的JS文件:
    <script src="./disorder.js"></script>
  2. 目标字符的输入输出:
    strTo = strFrom.disorder();

over~

OK,回到一开始提到的那个场景,复制文字内容干扰。

我悄悄在本文档页面引入了对应的JS,并绑定了如下所示的JS代码:

document.addEventListener('copy', function (event) {
    var clipboardData = event.clipboardData || window.clipboardData;
    if (!clipboardData) { return; }
    var text = window.getSelection().toString();
    if (text) {
        event.preventDefault();
        clipboardData.setData('text/plain', text.disorder());
    }
})

所以,大家可以试试复制本文的文字内容,再找个地方粘贴,看看文案内容是不是有些许不同了呢,嘿嘿嘿~ ???

然后,本文所展示的代码并非最佳实现,因为有些词句反义字替换后明显就读不下去了,这个其实并不好,所以,究竟哪些字词需要变化处理,还需要多多打磨,最好和中文的智能词法分析结合,达到最佳效果。

总而言之一句话,本文重在抛砖引玉。

四、再唠嗑一会儿吧

来上海这么多年,昨天还是第一次去金山游玩,去的是枫泾镇,不过没去古镇上,江沪浙的古镇基本上都是一个模子里刻出来的,没什么意思,去的是画村,看农名画展,还有个波兰颠倒屋,都是25一个人。

颠倒屋房子里面都是倒的,地面倾斜,非常适合拍一些特效照片。

就是看起来就像是倒立的那种,弄几个图给大家瞅瞅。

倒立2 倒立1

附近700多米有个钓鱼的地方,叫做“荷风嬉鱼度假村”,有个可以钓鱼的地方,30元一小时,鱼小鱼少价格贵,不过环境不错,可以只钓两小时,我个人是比较喜欢这样的钓点的,贵点无所谓,重要的是人少环境好,这个地方就满足我的需求。

具体环境如何可以看我的抖音视频,欢迎关注我的抖音号,每周分享钓鱼生活。

抖音,我

本文为原创文章,欢迎分享,勿全文转载,如果实在喜欢,可收藏,永不过期,且会及时更新知识点及修正错误,阅读体验也更好。
本文地址:https://www.zhangxinxu.com/wordpress/?p=10791

(本篇完)