← CaryC Blog | Home

隐私保护与实用性——Firefox——最佳的浏览器选择，Chrome CSS 文件更改实战，兼论开源软件的天然安全性

2020-05-08 教程
Cover Image

This article was last updated on days ago, the information described in the article may be outdated.

目录

1. 开源的就是好

在之前的几篇文章里我字里行间的表达了对开源软件的喜好，今天我先分析一下为什么开源软件是好的

1.1 什么是开源软件

开源软件（open source software）是符合开源软件标准的软件总称，开放源代码促进会（Open Source Initiative，一个旨在推动开源软件发展的非盈利组织）制定了这一标准。一个容易混淆的定义是开放源代码的软件就是开源软件，非也，AT&T Bell Labs, 和 General Electric 所发行的 Unix 虽然官方提供源代码，但却受制于版权无法再编译发行，故而不可称之为开源软件

1.2 开源为什么好

开放源代码

开放源代码，从而保证代码拥有足够多的曝光量，只要这款软件足够用名气，那么它会一遍遍的被审视。只要被审阅的足够多，问题一定会被发现。这也是 linux 的安全性显著高于 Windows 的重要原因。开源软件将代码公之于众，有后门程序，更容易被检查到，闭源软件则需要通过监控软件行为来获取这些信息

拥有更复杂的发行版本

开源软件允许再编译，从而带来更多的发行版本，因不同版本差异的存在，一款发行版的漏洞不一定波及其他版本，从而提升了攻击者的攻击难度

可定制性

通过审视源代码，你可以更改认为威胁到你的模块，改变自己不喜欢的部分，从而让软件达到最佳的使用体验。甚至你可以用自己的修改版盈利，没有人能阻止你按照自己的意愿来使用这些软件

2. 为什么是 Firefox

选择 Firefox 是兼顾安全性、隐私性、易用性三点而做出的决定。Chrome 以易用性著称，但是在安全与隐私上频出漏洞，Tor 注重安全性与隐私性，但易用性较差

2.1 开源 VS 闭源

Firefox 是完全的开源软件，而 Chrome 是基于开源项目 Chromium 的再定制软件，Chrome 包含闭源模块，严格地说 Chrome 是半开源软件

2.2 非盈利 VS 商业

Firefox 是由非营利组织Mozilla 基金会（Mozilla Foundation）开发的软件。 Chrome 则是 Google 旗下的产品。商业公司有天然的利益导向，对于以广告为主要盈利手段的 Google 必然倾向收集用户信息，从而实现更精准的广告投放。很多互联网隐私保护模块，Firefox 的支持时间均早于其他所有的商业公司开发的浏览器

2.3 中立的 VS 非中立

Chrome 是 Google 旗下的产品。Google 又是知名的互联网公司，旗下的主要产品均以互联网应用的形式运行，很难保证其不在浏览器上做手脚，例如18年的 Chrome 安全事件。这里面的逻辑必然性导致 Chrome 永远不会在隐私保护上做到极致

2.4 小众的 VS 大众的

Firefox 的市场占有率远不及 Chrome，从而在攻击市场里，暴露面远窄于 Chrome。Firefox 的攻击价值性也低于 Chrome。有时候，小众的不一定是不好的，不起眼的，反而是更安全的

2.5 Rust VS C

C 语言容易因为内存使用方面的问题而导致安全漏洞（例如：缓冲区溢出、野指针）。这个缺点是编程语言本身导致的。而 Rust 作为 C 的替代品。避免了以上的弊端。Firefox 使用 Rust 语言来开发 Web 引擎，会大大降低安全漏洞。这是 Firefox 在安全方面相比 Chrome 的一个优势

3. 如何选择 Firefox 版本

以下所讨论的版本均以 Firefox 海外版为前提

3.1 摒弃 Nighty、Developer Edition、Beta 等不稳定版本

喜欢新奇的你或许 iOS 都用的开发版，但是如果追求安全性请不要使用不稳定版本的 Firefox，越是新的版本，意味着代码的监视率越低，重大 Bug 的出现可能性也越高

3.2 使用更加稳定的 Extended Support Release 版本

Extended Support Release 版本是 Firefox 的长期支持版本，一般与最新的稳定版有几个月甚至更久的差距。Extended Support Release 版本有着更长的维护周期，它不会推送功能性更新，主要在现有的功能上完善。在存量上修补，从而不会增加 Bug 只会减少 Bug，不着急升级是你保护隐私的不二法门

4. 定制你的 Firefox

定制 Firefox 的方法很多，你可以通过修改 user.js 甚至 omni.ja 来深度定制你的浏览器，我在这里只讲一些皮毛

4.1 安全插件推荐

HTTPS Everywhere： 强制开启 HTTPS 加密模式
Cookie AutoDelete： 自动清理你的 Cookie 数据
Bitwarden： 我之前推荐的密码管理软件的 Firefox 插件
Decentraleyes： 保护您免受集中式的内容交付网络（CDN）的跟踪
Ghostery： 拦截广告，停止跟踪器，提高网站速度

4.2 通过 CSS 文件定制你的 Firefox

CSS 是什么

层叠样式表（Cascading Style Sheets）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。CSS 可以定制你的 Web 页面的诸多信息。CSS 不是代码，不具有可编程性，所以通过修改它来定制浏览器更加安全。也不会影响浏览器的运行速度

我们要的文件在哪里

Firefox 首页输入 about:support 进入页面

进入 profile 文件夹，这里会有一个 chrome文件夹，　如果你没有 chrome 的文件夹，就创建一个。你可能会疑惑：为什么 Firefox 的配置文件目录，有一个 chrome 文件夹。其实从辈分上来说 Chrome 浏览器应该叫 chrome 文件一声叔叔 　

在chrome文件夹内创建userChrome.css userContent.css 两个文件

请用 Atom 等软件编辑 CSS 文件，使用系统自带笔记本程序打开并编辑会导致不可预见的问题

userChrome.css 举例

userChrome.css 的首行必须如下

1
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

下面与其它 CSS 文件格式一样

Firefox 进入 HTTPS 加密网站后会在网址前方有小图标来表示，但不够明显，我们可以让它更加明显。下面的代码可以使整个网址输入栏都变换颜色，从而让 HTTPS 加密模式一目了然

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
#urlbar
{
  position: relative !important;
  z-index: 1 !important;
}

/* 这里是准备性操作，不要改动 */
#identity-box::after
{
  content: "" !important;
  position: absolute !important;
  height: 100% !important;
  width: 100% !important;
  top: 0 !important;
  left: 0 !important;
  opacity: .5 !important;
  z-index: -1 !important
}

#identity-box.verifiedDomain::after    
{
  background-color: PaleGreen !important;    /* www.color-hex.com 找到你要的颜色并更改 */
}
#identity-box.verifiedIdentity::after    
{
  background-color: PaleGreen !important;    /* www.color-hex.com 找到你要的颜色并更改 */
}
#identity-box.weakCipher::after    
{
  background-color: Salmon !important;    /* www.color-hex.com 找到你要的颜色并更改 */
}
#identity-box.mixedActiveContent::after    
{
  background-color: DeepPink !important;    /* www.color-hex.com 找到你要的颜色并更改 */
}
#identity-box.mixedDisplayContent::after    
{
  background-color: Pink !important;    /* www.color-hex.com 找到你要的颜色并更改 */
}
#identity-box.mixedDisplayContentLoadedActiveBlocked::after    
{
  background-color: Pink !important;    /* www.color-hex.com 找到你要的颜色并更改 */
}

userContent.css 举例

userContent.css 用到了@-moz-document 语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*
【严格匹配网址】语法。
*/
@-moz-document url(https://wdsxhb.club/)


/*
【匹配网址前缀】语法。
*/
@-moz-document url-prefix(https://blog.wdsxhb.)


/*
【匹配域名】语法。
*/
@-moz-document domain(blog.wdsxhb.club)

/*
【正则表达式】语法。
*/
@-moz-document regexp("https:.*")

将 Google 首页的样式改为超级玛丽

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
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
@-moz-document regexp("https?://www.google.(com|([a-z]{2}))(.[a-z]{2})?."), regexp("https?://www.google.(com|([a-z]{2}))(.[a-z]{2})?/((\\?|webhp|search|gfe_rd|auth|gws_rd|#q|imghp|#gfe_rd|#safe|#pws|#tbs|#gws|#tbm).*)"), regexp("https?://encrypted.google.(com|([a-z]{2}))(.[a-z]{2})?/((\\?|webhp|search|gfe_rd|auth|gws_rd|#q|imghp|#gfe_rd|#safe|#pws|#tbs|#gws|#tbm).*)"), regexp("https?://encrypted.google.(com|([a-z]{2}))(.[a-z]{2})?.")
{


  body
  {
    background: transparent url(https://s10.postimg.cc/jkg1hkkcp/mario_gif_by_ivanrussiansky_d9f6x59.gif) center center  fixed !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }

  #fbar
  {
    background: rgba(255,255,255,0.5);
    border-top: 1px solid #e4e4e4 !important;
  }

  #fbar a
  {
    color: #111 !important;
  }

  #fbar._Zvd > div#swml._HR > div._uIb > span
  {
    color: #111 !important;
  }

  #topabar
  {
    background: rgba(92, 148, 252, 0.5) !important;
    border-top: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
  }

  .sfbgg
  {
    background: rgba(237, 237, 248, 0.5) !important;
  }

  body.vasq #hdtbSum
  {
    background: rgba(255, 255, 255, 0.9) !important;
  }

  html > body#gsr.vasq.srp > div#viewport.ctr-p > div#main.content > div#cnt.big > div.mw > div#rcnt > div.col > div#center_col
  {
    background: rgba(237, 237, 248, 0.9) !important;
    padding: 10px !important;
  }

  ._OKe
  {
    background: rgba(237, 237, 248, 0.7) !important;
  }

  html > body#gsr.srp.tbo.vasq > div#main > div#cnt.big > div.mw > div#rcnt > div.col > div#center_col > div#res.med > div#search > div > div#ires > div#rso > div._NId > div.g.mnr-c.g-blk > div.kp-blk._kTi._Rqb._RJe > div#uid_0.r-ipzMKl8jpLfE.xpdbox.xpdclose.xpdns > div._OKe > div > div._Gtj.mod > div._Ixf > div.kno-fb-ctx > div > a.rl_item._Zxn > div._Vjf._Kjf._qkf._Wdh
  {
    background: rgba(237, 237, 248, 0.7) !important;
  }

  #sb_ifc0
  {
    background: rgba(237, 237, 248, 0.5) !important;
    color: #333 !important;
  }

  a:link, .w, #prs a:visited, #prs a:active, .q:active, .q:visited, .kl:active, .tbotu
  {
    color: #0fbd3d !important;
    ;
  }

  .a, cite, cite a:link, cite a:visited, .cite, .cite:link, #_bGc > i, .bc a:link
  {
    color: #361786 !important;
    ;
    font-style: normal;
  }

  ._OKe > div > div._Gtj.mod > div._Ixf > div.kno-fb-ctx > div > a.rl_item._Zxn._pkf > div._Vjf._Kjf._qkf._Wdh
  {
    background: rgba(237, 237, 248, 0.7) !important;
  }

  ._OKe > div > div._Gtj.mod > div._Ixf > div.kno-fb-ctx > div > a.rl_item._Zxn > div._Vjf._Kjf._qkf._Wdh
  {
    background: rgba(237, 237, 248, 0.7) !important;
  }

  #center_col > div#res.med > div#search > div > div#ires > div#rso > div._NId > div.srg > div.g > div.rc > div.s > div > span.st > em
  {
    color: #000 !important;
  }

  div#hplogo
  {
    background: url(https://s24.postimg.cc/yotenw01x/googlelogo.png) no-repeat!important;
    background-size: 272px 92px!important;
    height: 92px!important;
    width: 272px!important;
  }

  div#hplogo:not([title~=Google])
  {
    margin-top: 50px!important;
  }

  div#hplogo>:not([nowrap=''])
  {
    display: none!important;
  }

  img#hplogo
  {
    background: url(https://s24.postimg.cc/yotenw01x/googlelogo.png) no-repeat!important;
    background-size: 272px 92px!important;
    height: 0!important;
    width: 272px!important;
  }

  img#hplogo:not([title~=Google])
  {
    margin-top: 50px!important;
  }

  img#hplogo>:not([nowrap=''])
  {
    display: none!important;
  }

  .logocont > h1 > a#logo > img
  {
    display: none !important;
  }

  #logocont
  {
    width: 140px !important;
    height: 53px !important;
    background: url(https://s27.postimg.cc/gd86chadf/googlelogo1.png) 5px 5px no-repeat;
  }

  #searchform.jhp.big > form#tsf.tsf > div.tsf-p > div.sfibbbc > div#sbtc.sbtc > div.sbibtd
  {
    margin-top: -10px !important;
  }

  .jsb
  {
    margin-top: -10px !important;
  }

  .gb_Ia
  {
    border: 1px solid #ccc;
    background: #ddd !important;
  }


/*


p,div,span{
  color:#777 !important;
}

.jsb > center > input{
   background: rgba(255,255,255,0.7) !important;
   color:#333 !important;
   border:1px solid #999 !important;
}


  #lga{
    margin-top:30px !important;
  }


*/


  #topabar
  {
    background: transparent !important;
    border-top: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
  }

  #appbar
  {
    background: rgba(0, 0, 0, 0.3) !important;
  }

  #resultStats
  {
    color: #fff;
  }

  .sfbgg
  {
    background: transparent !important;
  }

  body.vasq #hdtbSum
  {
  }

  #fbar
  {
    background: rgba(255, 255, 255, 0.3) !important;
    border-top: 1px solid #333 !important;
  }

  #hdtb
  {
    background: transparent !important;
  }

  .sfbg
  {
    background: transparent !important;
  }

  .sfbgg
  {
    background: transparent !important;
  }

  .sfbgx
  {
    background: transparent !important;
  }

  #hdtbSum
  {
    background: transparent !important;
  }

  .sfbgx
  {
    border: 0px !important;
  }

  #hdtb
  {
    background: transparent !important;
    border: 0px !important;
    margin-top: -15px !important;
  }

  .tsf-p > div.jsb > center > input
  {
    background: rgba(255,255,255,0.7) !important;
  }

  #topabar
  {
    background: rgba(92, 148, 252, 0.9) !important;
    border-top: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
  }
}

成果展示

你可以在 Stylish 找到更多的 CSS 模板，会有惊喜的发现。说不定搞一搞，你也能成为一名前端工程师

Author: CaryC

文章默认使用 CC BY-NC-SA 4.0 协议进行许可，使用时请注意遵守协议。

Permalink: https://blog.wdsxhb.club/2020/05/08/firefox/

最后更新于：2020-05-07

教程
# 软件分享 # 开源软件 # Firefox

Comments

Unable to load Disqus, please make sure your network can access.

首页 标签 归档 关于