-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
210 lines (203 loc) · 11.4 KB
/
index.html
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE html>
<html lang="zh-Hant">
<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" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="shortcut icon" href="./picture/icon_purple_purple.png" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC&family=Noto+Serif+TC&family=Roboto&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./style/style.css" />
<link rel="stylesheet" href="./style/card.css" />
<link rel="stylesheet" href="./style/animation.css" />
<link rel="stylesheet" href="./style/btn.css" />
<title>CSOs 數位防禦手冊</title>
</head>
<body>
<section id="cup" class="animation">
<div class="cup">
<span class="steam"></span>
<span class="steam"></span>
<span class="steam"></span>
<div class="cup-handle"></div>
</div>
</section>
<main>
<section class="backImage">
<a href="https://ocf.tw/"
><img class="logo" src="./picture/icon_purple_purple.png" alt=""
/></a>
<div class="typewriter">
<h1>CSOs 數位防禦手冊</h1>
</div>
<div>
<a class="dlbtn is-success"
target="_blank"
href="https://drive.google.com/file/d/1Yj6xmmJWHbleFRzbxVM1XbRzfFNGZg8w/view">下載手冊全文 2024.07 更版</a>
</div>
<div>
<a class="dlbtn is-primary"
target="_blank"
href="https://forms.gle/PPqqeUYoZD8vsFGY6">前測問卷</a>
</div>
<div>
<a class="dlbtn is-primary"
target="_blank"
href="https://forms.gle/Tb6qsBtGwGke8b2B7">後測問卷</a>
</div>
</section>
<section class="start">
<section>
<h3 id="數位安全是什麼？哪裡重要？">數位安全是什麼？哪裡重要？</h3>
<hr />
<p>
隨著幾乎所有工作都要上網的時代到來，世界上的公民團體也越來越習慣利用數位工具進行倡議。舉凡日常的行政運作、內外人員的往來溝通、勸募、記者會或宣傳，都需要使用到網路設備。然而，我們的數位生活也已經成為駭客的攻擊目標，尤其是由極權國家資助的駭客，更容易針對公民團體，進行竊取或監控的數位攻擊。
</p>
<p>
對尋常使用者而言，不注重數位安全可能導致重要資訊外洩、或是電腦被植入惡意軟體來監控，例如金融帳號或是公司的業務機密。但對於關注人權的公民團體而言，無論是行政專員的工作檔案、捐款人的資訊，或是正在聯繫政治犯的身份與管道，都極可能在外洩後對倡議進程帶來重大危害。
</p>
<p>
其實，大多數位攻擊經常是針對使用者日常生活使用網路行為，例如使用瀏覽器、輸入帳號密碼就是每天上網都會發生，但不一定會隨時保持良好習慣的環節。或是公民團體的組織工作者會需要使用雲端硬碟分享資訊、架設網站進行宣傳與溝通，也常會因為只求方便、或缺乏相關專業知識的參考管道，憑藉個人習慣操作數位工具，而在無形中提供駭客可以攻擊的漏洞。
</p>
<p>
這份手冊的目標，就是介紹開放原始碼（開放源碼、開源）的替代工具，令所有人都可以藉此提升基本的數位安全能力。以下先分享一些貫穿全冊的相關概念，再依序介紹安全的瀏覽器、密碼管理器、自己架設雲端硬碟、保護組織網站的幾個方案。
</p>
<section class="section-card">
<div class="row">
<div class="col-1-of-4">
<a href="./browser.html">
<div class="card-box">
<img
style="width: 10rem; height: 10rem"
src="./picture/LibreWolf_icon.svg.png"
alt=""
/>
<h3 class="card-title">開源與安全的瀏覽器</h3>
<p class="card-ph">是否要接受Cookie?</p>
<p class="card-ph">擔心搜尋紀錄被側錄?</p>
<p class="card-ph">你用的瀏覽器安全嗎?</p>
</div>
</a>
</div>
<div class="col-1-of-4">
<a href="./KeePassXC.html">
<div class="card-box">
<img
style="width: 10rem; height: 10rem"
src="./picture/KeePass_icon.png"
alt=""
/>
<h3 class="card-title">安全保管所有密碼</h3>
<!-- <h3 class="card-title">KeePassXC</h3> -->
<p class="card-ph">又忘記密碼了？</p>
<p class="card-ph">密碼太多太繁雜?</p>
<p class="card-ph">還在使用同一組密碼？</p>
</div>
</a>
</div>
<div class="col-1-of-4">
<a href="./Nextcloud.html">
<div class="card-box">
<img
style="width: 10rem; height: 10rem"
src="./img/71278-icons-android-computer-nextcloud-free-transparent-image-hq.png"
alt=""
/>
<h3 class="card-title">掌控自己的雲端資料</h3>
<!-- <h3 class="card-title">Nextcloud</h3> -->
<p class="card-ph">協作時需要檔案傳輸?</p>
<p class="card-ph">想對資料有完整掌控權?</p>
<p class="card-ph">想在各裝置同步&管理檔案?</p>
</div>
</a>
</div>
<div class="col-1-of-4">
<a href="./Deflect&eQpress.html">
<div class="card-box">
<img
style="width: 10rem; height: 10rem"
src="./picture/Deflect.png"
alt=""
/>
<h3 class="card-title">保障你的網路安全</h3>
<!-- <h3 class="card-title">Deflect & eQpress</h3> -->
<p class="card-ph">網站有被攻擊的疑慮?</p>
<p class="card-ph">網站沒有專業技術團隊維護?</p>
<p class="card-ph">想避免遭受DDoS、資安攻擊?</p>
</div>
</a>
</div>
</div>
</section>
<h3 id="開源的工具為什麼對數位安全來說很重要？">
開源的工具為什麼對數位安全來說很重要？
</h3>
<hr />
<p>
關於前述提到的<strong style="font-size: 2rem"
>開放原始碼、開源</strong
>，直接意思就是將原始程式碼開放出來，日常中我們在電腦或手機使用的所有硬體、軟體、網站、服務都是建立在一大堆程式碼之上，這些程式碼也就是英文的
code，並且決定了軟硬體怎麼運作。然而，很多程式碼都被企業基於營利考量隱藏起來，不提供人們公開檢視，這也形成了一定的安全或隱私漏洞，畢竟我們無從得知哪些程式碼有問題、或有後門偷偷將我們的資料傳送出去。
</p>
<p>
「開放原始碼」與「開源」（Open Source
code）是相同的意思，也就是公開程式碼給所有人檢閱，並且極大地提高被監督的可能。而且，有些開放原始碼軟體也允許使用者自由地使用、修改、再發佈軟體。
</p>
<p>
更重要的是，開放原始碼軟體經常由工程師社群中的志願者共同開發，並在網路上提供下載，很少受到商業利益的限制，可以更加以使用者的安全與隱私為首要考量。
</p>
<h3 id="雲端是什麼？伺服器是什麼？它對隱私及安全而言有什麼影響？">
雲端是什麼？伺服器是什麼？它對隱私及安全而言有什麼影響？
</h3>
<hr />
<p>
「雲端」、「伺服器」這可能是你偶爾聽見的科技詞彙，但是它們其實就是同樣的意思，座落在地球上某處的電腦主機。在你需要的時候，使用網路將資料從雲端伺服器傳到你的電腦或手機，或可以反過來讓你存放資料。例如
Google
或微軟就在世界各地租了超大的倉庫作為機房，將我們的資料存放在那裏，隨時提供我們連線使用。
</p>
<!-- <img src="" alt=""> -->
<p>
總之，雲端畢竟就是別人的電腦，我們很難、甚至無法知道檔案經過誰的手上、具體位置在哪裡。這也形成了資安及隱私憂慮，畢竟，這些伺服器所在位置的國家可能有權力命令執法單位扣押主機、取走檔案。瞭解自己的檔案被誰管理、誰可以看得到、要將怎樣的資料放在上面，是公民團體使用雲端硬碟的重要課題。
</p>
<h3 id="什麼是網域？跟網址有什麼差別嗎？公民團體需要自己的網域嗎？">
什麼是網域？跟網址有什麼差別嗎？公民團體需要自己的網域嗎？
</h3>
<hr />
<p>
我們每天都在瀏覽器看到的網址，就如同地圖上的地址一樣，會告訴電腦該去哪裡取得資料、將檔案傳到哪裡。例如
drive.google.com 就是 Google 雲端硬碟的網址，前面的 drive
代表硬碟的意思，相當於街道名稱，而 google.com
代表這間公司承租的網域，相當於行政區名稱。也可以說，網域相當於一個組織單位在網路世界裏的名稱，網址則是相當於組織內部門、功能的門牌。
</p>
<p>
在數位世界裡，網域就跟辦公室一樣是需要租賃的，才能向全世界的電腦宣告這一串網址屬於誰。就如同一個組織需要承租辦公室提供客戶造訪，一個組織的網站也需要租賃一個網域，才能提供所有人造訪自己的網站。這也是在網路世界建立信任關係的重要關鍵，有自己的網域，才能令使用者確保自己正在造訪正牌的辦公室，而不是駭客偷偷架設的冒牌貨。
</p>
</section>
</section>
</main>
<footer>
<p>
Contributed By
<img
style="width: 25px; height: 25px; margin: 2px"
src="./picture/icon_purple_purple.png"
alt=""
/>
開放文化基金會 Azazel
</p>
</footer>
</body>
<script src="./app.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-X3DG2E5E3W"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-X3DG2E5E3W');
gtag('event', 'page_view', { 'send_to': 'G-X3DG2E5E3W' });
</script>
</html>