🌹 喇賽的人 Blog 🌹

🌹 喇低喇賽 🌹

0%

常見的迷片網站功能

亂寫於 更新於 Disqus：
廢話字數： 11k 所需傷眼時間 ≈ 10 分鐘

 
迷片網站功能

更新 Chrome 或掃毒

這個應該很常見 , 不過偽裝成 chrome 更新就很賤 , 大部分不懂 IT 的人上當機率很高 .. 這類手法還是要小心點
另外還有假裝你電腦中毒之類的 , 你一定會按確定 , 不過其實點取消也是會中計 , 這時候馬上關閉是你最好的選擇 XD
我這個 example 是跑去 chrome 官網並無害 , 如果想要讓 href 失效的話可以這樣寫 href="javascript:;"
css 部分則用了很久沒寫的 inline-block 特性 , 設定 inline-block 以後只要設定 text-align: center 在子項目就可以居中

See the Pen Untitled by 喇賽人 (@weber87na) on CodePen. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<html lang="zh-Hant">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: '微軟正黑體';
        }

        a {
            text-decoration: none;
            color: #fff;
            background-color: #4086F4;
            width: 100px;
            display: inline-block;
            text-align: center;
            padding: 5px;
            border-radius: 5px;
        }
        .top{
            display: flex;
            justify-content: center;
            align-items: center;
            /* background-color: #f0a; */
        }

        .top img {
            width: 72px;
            height: 72px;
            float: left;
            padding: 10px;
        }
        .top p{
            padding: 10px;
            
        }

        .bottom {
            position: absolute;
            bottom: 0;
            margin: 0 auto;
            left: 0;
            right: 0;
            /* background-color: #fcc; */
            text-align: center;
            margin: 5px;
        }

        .ad {
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            position: fixed;
            width: 300px;
            height: 130px;
            top: 0;
            left: calc(50% - 300px / 2);
        }

    </style>
</head>

<body>
    <div class="ad">
        <div class="top">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Google_Chrome_icon_%28September_2014%29.svg/128px-Google_Chrome_icon_%28September_2014%29.svg.png"
                alt="chrome">
                <p>警告 , 您的電腦有遭受入侵的風險 , 請盡速更新 Chr0me</p>
        </div>
        <div class="bottom">
            <!-- <a href="javascript:;">Update</a>
            <a href="javascript:;">No Thanks</a> -->

            <a href="https://www.google.com/intl/zh-TW/chrome/?brand=JJTC&gclid=CjwKCAjwyaWZBhBGEiwACslQowTAoVI1vSDnWZuHAtmZHdrq2OVfHBMVekzK7QZ7uwPd7H4guZbv2BoCSzcQAvD_BwE&gclsrc=aw.ds">Update</a>
            <a href="https://www.google.com/intl/zh-TW/chrome/?brand=JJTC&gclid=CjwKCAjwyaWZBhBGEiwACslQowTAoVI1vSDnWZuHAtmZHdrq2OVfHBMVekzK7QZ7uwPd7H4guZbv2BoCSzcQAvD_BwE&gclsrc=aw.ds">No Thanks</a>
        </div>
    </div>
</body>

</html>

交友網站效果

最近三不五時搜尋 ptt 就會跳一些阿薩布魯的 , 試著模擬看看怎麼寫 , 練練手 , 其實搞迷片網站的工程師還滿厲害低 XD
比較難寫的地方大概就是 checked 那段要注意 html 結構 , 一開始沒規劃好不然可以寫更好點 , 應該要讓他可以切換之類的 , 放生 XD

See the Pen Social Web Site AD Message by weber87na (@weber87na) on CodePen. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<html lang="zh-Hant">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: '微軟正黑體';
        }

        body {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #000;
        }


        .wrap{
            position: fixed;
            right: 50px;
            bottom: 30px;
        }

        .box {
            width: 300px;
            height: 100px;
            background-color: #fff;
            border-radius: 15px;
            padding: 20px;
            box-sizing: border-box;
            position: relative;
            box-shadow: 0 0 10px #fff;
        }
        .box::after {
            position: absolute;
            content: '';
            top: 20px;
            left: -10px;
            width: 20px;
            height: 20px;
            background-color: #fff;
            transform: rotate(45deg);
        }

        .close{
            width: 30px;
            height: 30px;
            position: absolute;
            right: -50px;
            margin: auto;
            top: 0;
            bottom: 0;
            color: #ccc;
        }
        input{
            display: none;
        }
        input:checked ~ .box ,
        input:checked ~ .close{
            display: none;
        }
        .ball {
            position: absolute;
            width: 80px;
            content: '';
            height: 80px;
            background-color: #ccc;
            border-radius: 50%;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            transform: translateX(calc(-150px - 40px - 20px));
        }
        .ball::before{
            content: '1';
            color: white;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: auto;
            position: absolute;
            top: -2.5px;
            left: -2.5px;
            width: 25px;
            height: 25px;
            box-sizing: border-box;
            border: 3px solid #fff;
            border-radius: 50%;
            background-color: #f00;
        }


        .title {
            position: relative;
            text-indent: 35px;
            display: flex;
            align-items: center;
            margin: 5px 0;
        }

        .title::before {
            content: '';
            width: 30px;
            height: 30px;
            background-color: #ccc;
            border-radius: 50%;
            position: absolute;
            display: flex;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <input type="checkbox" name="close" id="close">
        <div class="close">
            <label for="close">x</label>
        </div>
        <div class="box">
            <div class="ball"></div>
            <p class="title">怡婷(24) 在線 ~ 0.3 km</p>
            <p>HI 你好嗎</p>
        </div>
    </div>
</body>

</html>

title 警告功能

相信 99% 都有被詐騙網站跳的警告訊息搞過 , 曹植有七步成詩 , 這串警告的 code 其實也只要七行

1
2
3
4
5
6
7
var messages = ['(1) 您有一則新訊息!' , '警告!'];
var messageCounter = 0;
setInterval(function () {
	if (messageCounter % 2 === 0) document.title = messages[0];
	else document.title = messages[1];
	messageCounter++;
}, 1000);

開開腦洞做個數羊版本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <title>🐐</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🐐</text></svg>">
</head>

<body>
    <script>
        var goat = '🐐';
        var str = '';
        var messageCounter = 1;
        var exit = 10;
        setInterval(function () {
            if(messageCounter == exit){
                str = ''; 
                messageCounter = 0;
            } 
            str += goat;
            document.title = str;
            messageCounter++;
        }, 1000);

    </script>
</body>

</html>

關閉 window 時跳出煩人的訊息

這類網站通常會跳一堆 window 出來 , 然後又搞個你中獎了或是中毒了之類的訊息
主要通過 beforeunload 這個 event , 然後進行客製化的控制 , 大概會長這樣

1
2
3
4
window.onbeforeunload = function() {
	return '離開此頁?';

}

或是這樣寫

1
2
3
4
window.addEventListener('beforeunload', function (e) {
    e.preventDefault();
    e.returnValue = '';
});

在 chrome 51 以前 , 如果你的網頁有狀態概念可以運用這樣防止使用者忘了存檔
不過 google 為了防止這類的詐騙? 已經不能自訂訊息 , 會直接給你預設的訊息
可以參考這個討論看看

1
2
3
4
5
window.onbeforeunload = function() {
	if(status === 1){
		return '離開此頁?';
	}
}

蓋板廣告

這個功能很常見 , 通常會故意把關閉的 icon 設計讓你點下去也關不掉 , 或是點下去又跳其他 window 出來 , 大概類似這樣寫
反正就是將 css 的 position 設定為 fixed 接著置中 , 然後設定一個接近全螢幕的範圍即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var panel = document.createElement('div');
panel.style.height = '500px';
panel.style.width = '500px';
panel.style.position = 'fixed';
panel.style.top = 'calc(50% - 250px)';
panel.style.left = 'calc(50% - 250px)';
panel.style.backgroundColor = '#fff';
panel.style.border = 'solid 1px #dedede';
panel.style.zIndex = "9999";
document.body.appendChild(panel);
var closeButton = document.createElement('p');
closeButton.style.textAlign = 'center';
closeButton.innerHTML = '<a href="javascript:;">Close</a>';
closeButton.style.backgroundColor = '#fa0';
closeButton.style.fontSize = '36px';
closeButton.style.padding = '20px';
closeButton.style.right = '0px';
closeButton.style.top = '0px';

panel.appendChild(closeButton);
closeButton.addEventListener('click', function () {
    panel.parentNode.removeChild(panel)
});

嵌入廣告 方法 1

一直以來都很賭爛 iframe 這個神祕的 tag , 很常在 3rd 廣告上看到使用他的蹤影 , 做謎片的朋友也想開放這個功能擺在其他網站上 , 所以玩看看

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var html = `
<html>
<head>
    <style>
    *{
        margin:0;
        padding:0;
        overflow: hidden;
    }
    </style>
</head>
<body>
<img src="https://raw.githubusercontent.com/weber87na/flowers/master/15.jpg"  height="100%" alt=""></img>
</body>
</html>
`;

var iframe = document.createElement('iframe');
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
iframe.frameBorder = 0;
document.body.appendChild(iframe);

然後隨便找個地方加上去就搞定

1
<script src="test.js"></script>

此外印象中之前有學過等比例影片 , 不過現在也忘光光 , 大概可以參考這篇

嵌入廣告 方法 2

後來想一想如果只放圖片的話 , 其實這樣寫就好了

1
document.write(`<a target='_blank' href="https://weber87na.github.io/"><img src="https://raw.githubusercontent.com/weber87na/flowers/master/15.jpg" width="300" alt=""/></a>`);

一樣無腦引用即可

1
<script src="test.js"></script>

常見的無法點選鎖法

今天看 cakeresume 發現分頁標籤沒辦法點 , 剛好很多迷片網站也有類似功能 , 大多是因為 css 上面有加上這兩個障眼法屬性 , 只要移除即可
如果還是沒辦法的話 , 可能在 js 上面有做些手腳 , 如果是前端擋的話爬爬他的 url 即可搞定

1
2
cursor: not-allowed;
user-select: none;

另外一個很常見的就是增加模糊濾鏡 , 一樣移除掉即可解鎖 XD

1
filter: blur(3)

讓人火大的捲動跳窗

有的網站很討厭 , 會搞些捲動然後跳另外一個視窗 , 今天來玩看看怎麼寫 XD
仔細想想還滿簡單的 , 定義一個捲動事件在 document 上 , 然後呼叫 window.open 就好了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html lang="zh-Hant">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Document</title>
    <style>
        body{
            height: 2000px;
            width: 100%;
        }
    </style>
</head>

<body>
    <script>
        document.addEventListener('scroll', function(e){
            window.open('http://www.google.com.tw', '_blank')
        } )
    </script>
</body>

</html>
關閉