查看完整版本: 一種防止文章複製方法(免javascrpt)
頁: [1]

ren1244 發表於 2016-2-23 12:42 PM

一種防止文章複製方法(免javascrpt)

這個想法來自於古典密碼學的"密碼棒(scytale)"。

思考方向不在於禁止使用者複製文字，而是使用者複製的文字順序是混亂的，只要讓重新排列文字的時間成本高於重新打字的成本目的就達到了。

優點：
1.不怕禁用javascript。
2.因為還是文字，所以不像轉成圖片那樣檔案體積暴增。
3.即使檢視原始碼，也跟直接複製一樣不易復原

缺點：
1.人工編碼不易，需要後臺或是程式編排。
2.涉及到排版，所以需特別注意跨瀏覽器時文字出現的位置是否如預期。
3.對於中英混雜的文章較難編碼。(但應該還是可以靠程式解決)

我同時也做了一個範例：http://re-web.site44.com/demo/scytale.html
您可以複製貼上試試看效果如何。

這主要是拋一個概念，我想可以有更多的變化，例如做成不同的「層」，完整的文章要各層疊加起來才看得到等…。

上面範例的原始碼如下：(可以發現內容的文字也是打亂的)
<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>anti-copy</title>
        <style type="text/css">
                .L1{display:inline-block;font-size:16px;width:16px;vertical-align:top;word-break: break-all;}
        </style>
</head>
<body>
        <div class="L1">天下於皇時</div>
        <div class="L1">地則人路窮</div>
        <div class="L1">有為曰當節</div>
        <div class="L1">正河浩清乃</div>
        <div class="L1">氣嶽然夷見</div>
        <div class="L1">，<br>，<br>，<br>，<br>，</div>
        <div class="L1">雜上沛含一</div>
        <div class="L1">然則乎和一</div>
        <div class="L1">賦為賽吐垂</div>
        <div class="L1">流日蒼明丹</div>
        <div class="L1">形星冥庭青</div>
        <div class="L1">。<br>。<br>。<br>。<br>。</div>
</body>
</html>



...<div class='locked'><em>瀏覽完整內容，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div><div></div>

snowflying 發表於 2016-2-24 09:25 PM

但是能夠轉換過去，再轉換一次就又回去了 (相當於轉置)
對於真的有心的人來說，還是有辦法 {:10:}

ren1244 發表於 2016-2-24 11:15 PM

本帖最後由 ren1244 於 2016-2-24 11:24 PM 編輯

我想表達的概念主要是「把完整的文字拆到不同地方再組合，達到使用者看起來正常，但是要複製並還原回原文很花時間，不如自己打字」。所以轉置只是一種做法。

再舉另一種方法，利用「圖層」的概念，使用者看到的內容是各個「圖層」疊加起來。

Demo：http://re-web.site44.com/demo/scytale2.html

原始碼<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>anti-copy</title>
        <style type="text/css">
                .Layers{margin:0px;padding:0px;display:inline-block;font-size:16px;position:relative;}
        </style>
</head>
<body>
        <div class='Layers' style='left:-0px;'>天　有正　　雜　　流形。<br>
　　　　　　上　　日　　<br>
　　　　　　　乎塞　冥　<br>
　　當　　　　和　明庭　<br>
　窮　　　　一一　丹青　<br>
</div><div class='Layers' style='left:-192px;'>　　　　　，　然　　　　<br>
　則　　　，　　為　星　<br>
於人　浩然，沛　　　　　<br>
　　　清　，含　　　　　<br>
時　　　　，　　　　　。<br>
</div><div class='Layers' style='left:-384px;'>　地　　氣　　　賦　　　<br>
下　為河嶽　　則　　　。<br>
　　曰　　　　　　蒼　。<br>
皇路　　夷　　　吐　　。<br>
　　節乃見　　　垂　　　<br>
</div>
</body>
</html>
...<div class='locked'><em>瀏覽完整內容，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div>

honchichan 發表於 2016-3-15 11:30 PM

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>anti-copy</title>
<style type="text/css">
body {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
}
.Layers{margin:0px;padding:0px;display:inline-block;font-size:16px;position:relative;}
</style>
</head>
<body oncopy="return false" oncut="return false" onpaste="return false">
        <div class='Layers' style='left:-0px;'>天　有正　　雜　　流形。<br>
　　　　　　上　　日　　<br>
　　　　　　　乎塞　冥　<br>
　　當　　　　和　明庭　<br>
　窮　　　　一一　丹青　<br>
</div><div class='Layers' style='left:-192px;'>　　　　　，　然　　　　<br>
　則　　　，　　為　星　<br>
於人　浩然，沛　　　　　<br>
　　　清　，含　　　　　<br>
時　　　　，　　　　　。<br>
</div><div class='Layers' style='left:-384px;'>　地　　氣　　　賦　　　<br>
下　為河嶽　　則　　　。<br>
　　曰　　　　　　蒼　。<br>
皇路　　夷　　　吐　　。<br>
　　節乃見　　　垂　　　<br>
</div>
</body>
</html>可以加入CSS 和 Javascript，對於一般使用者會有一定作用...<div class='locked'><em>瀏覽完整內容，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div>
頁: [1]