龙空技术网

JavaScript奇技淫巧:代码复制陷阱

JShaman 471

前言:

目前小伙伴们对“拷贝css”大致比较重视,小伙伴们都想要知道一些“拷贝css”的相关文章。那么小编同时在网上收集了一些关于“拷贝css””的相关内容,希望看官们能喜欢,大家快快来了解一下吧!

JavaScript奇技淫巧:代码复制陷阱

编程人员在日常的工作中,经常会在网上查找资料、复制一些现成代码使用。

这是很习惯性的操作,但有危险隐含其中,特别是JS代码。

代码复制陷阱效果展示

比如,看看下面的操作是不是很神奇:

先选中并复制网页中的内容:

然后粘贴。怪异的是:粘贴后出现的并不是只是刚刚复制的信息,而是有多出的内容:

代码复制陷阱的危害

本文的例子中,仅是增加了一行alert代码。

假如上面例子中额外的JS代码是恶意的,比如是“img洪水”、“挖矿”等等代码,甚至是木马、后门。如果直接复制使用了,那么,后果可能很严重。

代码复制陷阱原理

如上图所示操作,技术原理是:接管页面或某个元素的oncopy事件,即:复制事件,在劫持的copy事件函数中,对复制内容进行增加、修改。

代码复制陷阱源码

<!doctype html>

<html>

<head>

<title>copy</title>

<meta charset="utf-8">

<style>

pre {

background-color: #eee;

padding: .5em;

}

</style>

</head>

<body>

<h2>请复制下面这行代码:</h2>

<pre id="code">

alert("JShaman:专业的JS代码混淆加密平台");

</pre>

<script>

code.oncopy = function(e) {

var text = code.textContent

var s = 'alert("这是额外的代码,可能是恶意代码。");' + text;

navigator.clipboard.writeText(s)

document.getElementById("zt").style.display = "block";

}

</script>

<div id="zt" style="display: none;">

<h2>复制后请粘贴试试:</h2>

<textarea style="width: 700px;">

</textarea>

</div>

</body>

</html>

保存为html,打开即可测试其效果。

复制代码真正的危险

从上面代码中可以看到,核心操作只有区区几行,读源码即可知道原理。

可能有人说:复制时就能看到代码,有没有风险一看便知。

道理似乎没错,但如果复制的代码量大呢?特别是:如果代码经过加密处理了呢?

比如用JShaman可以对JS代码混淆加密:

混淆加密后的JS代码会成为:

这样,便很难看出代码的含义,即使有危险的操作,也无法察觉。

因此,再次友情提示:复制代码有风险,COPY需谨慎。

标签: #拷贝css