Hugging Face's logo

Spaces:
cwadayi
/
Googlesecurity
Running

App Files Community
cwadayi commited on
Commit
75b9c9e
·
verified ·
1 Parent(s): b74adb1

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +49 -85
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Google 安全轉型之旅</title>
7
  <style>
8
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');
9
 
@@ -16,6 +16,7 @@
16
  --accent-red: #DB4437; /* Google Red */
17
  --accent-green: #0F9D58; /* Google Green */
18
  --timeline-color: #dcdfe6;
 
19
  }
20
 
21
  body {
@@ -113,6 +114,11 @@
113
  left: -10px;
114
  }
115
 
 
 
 
 
 
116
  .timeline-content {
117
  padding: 2rem;
118
  background-color: var(--card-bg);
@@ -127,6 +133,10 @@
127
  margin-top: 0;
128
  color: var(--accent-blue);
129
  }
 
 
 
 
130
 
131
  .timeline-content .tag {
132
  font-size: 0.9rem;
@@ -141,6 +151,7 @@
141
  .tag.problem { background-color: var(--accent-red); }
142
  .tag.solution { background-color: var(--accent-green); }
143
  .tag.tech { background-color: #757575; }
 
144
 
145
  .point-list { list-style: none; padding-left: 0; }
146
  .point-list li {
@@ -157,18 +168,17 @@
157
  }
158
 
159
  /* Specific content styles */
160
- .gus-diagram-container { padding: 1rem; }
161
  .gus-diagram { width: 100%; max-width: 450px; margin: auto; display: block; }
162
- .accordion-container { margin-top: 1rem; }
163
  .defense-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
164
- .defense-item {
165
- background-color: var(--bg-color);
166
- padding: 1rem;
167
- border-radius: 12px;
168
- font-size: 0.95rem;
169
- }
170
  .defense-item .icon { font-size: 1.5rem; margin-right: 0.8rem; }
171
-
 
 
 
 
 
 
172
  footer { text-align: center; padding: 2rem; color: #757575; }
173
 
174
  /* Responsive */
@@ -179,6 +189,7 @@
179
  .timeline-item:nth-child(even) { left: 0; }
180
  .timeline-dot { left: 6px; }
181
  .defense-grid { grid-template-columns: 1fr; }
 
182
  }
183
 
184
  /* Animation Keyframes */
@@ -194,89 +205,47 @@
194
  </div>
195
 
196
  <div class="timeline-container">
197
- <div class="timeline-item">
198
- <div class="timeline-dot"></div>
199
- <div class="timeline-content">
200
- <span class="tag problem">起點的困境</span>
201
- <h2>傳統安全的五大挑戰</h2>
202
- <ul class="point-list">
203
- <li><span class="icon">🏰</span> <b>堡壘模型：</b>只防外部，不防內部，一旦突破全盤皆輸。</li>
204
- <li><span class="icon">😫</span> <b>人工分析：</b>安全團隊深陷日誌海洋，疲於奔命。</li>
205
- <li><span class="icon">🤷‍♂️</span> <b>被動應對：</b>總是事後補救，缺乏事前規劃。</li>
206
- <li><span class="icon">🧩</span> <b>附加式安全：</b>安全性像補丁，而非原生能力。</li>
207
- <li><span class="icon">🔑</span> <b>繁瑣的驗證：</b>密碼系統既不安全，又影響使用者體驗。</li>
208
- </ul>
209
- </div>
210
- </div>
211
 
212
- <div class="timeline-item">
213
  <div class="timeline-dot"></div>
214
  <div class="timeline-content">
215
- <span class="tag solution">轉捩點的思維</span>
216
- <h2>新世代安全的五大革新</h2>
217
- <ul class="point-list">
218
- <li><span class="icon">🛡️</span> <b>零信任模型：</b>預設永不信任，總是驗證所有存取。</li>
219
- <li><span class="icon">🤖</span> <b>AI 驅動：</b>讓 AI 成為 7x24 小時不休息的資安分析師。</li>
220
- <li><span class="icon">📋</span> <b>主動規劃：</b>預先制定應變手冊，臨危不亂。</li>
221
- <li><span class="icon">🏗️</span> <b>原生架構：</b>安全性從設計之初就內建於系統。</li>
222
- <li><span class="icon">✨</span> <b>無縫驗證：</b>提供既安全又無感的身份驗證體驗。</li>
223
- </ul>
224
- </div>
225
- </div>
226
-
227
- <div class="timeline-item">
228
- <div class="timeline-dot"></div>
229
- <div class="timeline-content">
230
- <span class="tag tech">解決方案</span>
231
- <h2>Google 統一安全生態系 (GUS)</h2>
232
- <p>為了實現新世代安全，Google 打造了一個協同作戰的生態系統，其核心由 AI 與統一數據層驅動。</p>
233
- <div class="gus-diagram-container">
234
- <img src="https://i.imgur.com/8N0C1gX.png" alt="Google Unified Security Diagram" class="gus-diagram">
235
  </div>
236
- </div>
237
- </div>
238
 
239
- <div class="timeline-item">
240
- <div class="timeline-dot"></div>
241
- <div class="timeline-content">
242
- <span class="tag tech">核心引擎</span>
243
- <h2>Gemini AI 的實際應用</h2>
244
- <p>Gemini AI 如何在安全運營的四大階段中，將自然語言轉化為強大的行動力？</p>
245
- <ul class="point-list">
246
- <li><span class="icon">🔍</span> <b>調查：</b>快速總結案例，用口語搜尋複雜日誌。</li>
247
- <li><span class="icon">📡</span> <b>偵測：</b>用自然語言就能創建高信賴度的偵測規則。</li>
248
- <li><span class="icon">⚙️</span> <b>應對：</b>AI 自動推薦應對措施，並協助建立應變手冊。</li>
249
- <li><span class="icon">🏹</span> <b>獵捕：</b>根據最新威脅情報，主動搜尋潛在威脅。</li>
250
- </ul>
251
- </div>
252
- </div>
253
-
254
- <div class="timeline-item">
255
- <div class="timeline-dot"></div>
256
- <div class="timeline-content">
257
- <span class="tag tech">堅實後盾</span>
258
- <h2>AI 的自我防護機制</h2>
259
- <p>當 AI 成為防禦核心，其自身的安全至關重要。Google 採用多層次策略保護 Gemini：</p>
260
- <div class="defense-grid">
261
- <div class="defense-item"><span class="icon">🤺</span> <b>主動紅隊演練：</b>在駭客前找到漏洞。</div>
262
- <div class="defense-item"><span class="icon">💪</span> <b>對抗性訓練：</b>讓 AI 學會抵抗攻擊。</div>
263
- <div class="defense-item"><span class="icon">🚦</span> <b>輸入/輸出過濾：</b>攔截惡意指令與內容。</div>
264
- <div class="defense-item"><span class="icon">📜</span> <b>安全政策微調：</b>設定不可逾越的紅線。</div>
265
- <div class="defense-item"><span class="icon">🌐</span> <b>整合威脅情報：</b>保持對最新威脅的認知。</div>
266
- <div class="defense-item"><span class="icon">🔒</span> <b>數據隔離隱私：</b>保護客戶數據絕不外洩。</div>
267
  </div>
268
  </div>
269
  </div>
270
  </div>
271
 
272
  <footer>
273
- <p>"This Is How Google Runs Today"</p>
274
- <p style="font-size:0.9rem; margin-top:-1rem;">Make Google part of your security team.</p>
275
  </footer>
276
 
277
  <script>
278
  const timelineItems = document.querySelectorAll('.timeline-item');
279
-
280
  const observer = new IntersectionObserver(entries => {
281
  entries.forEach(entry => {
282
  if (entry.isIntersecting) {
@@ -284,13 +253,8 @@
284
  observer.unobserve(entry.target);
285
  }
286
  });
287
- }, {
288
- threshold: 0.1 // Trigger when 10% of the item is visible
289
- });
290
-
291
- timelineItems.forEach(item => {
292
- observer.observe(item);
293
- });
294
  </script>
295
  </body>
296
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Google 安全轉型之旅 & 鴻海實踐案例</title>
7
  <style>
8
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');
9
 
 
16
  --accent-red: #DB4437; /* Google Red */
17
  --accent-green: #0F9D58; /* Google Green */
18
  --timeline-color: #dcdfe6;
19
+ --foxconn-blue: #002855;
20
  }
21
 
22
  body {
 
114
  left: -10px;
115
  }
116
 
117
+ /* Foxconn case study dot */
118
+ .timeline-item.foxconn .timeline-dot {
119
+ border-color: var(--foxconn-blue);
120
+ }
121
+
122
  .timeline-content {
123
  padding: 2rem;
124
  background-color: var(--card-bg);
 
133
  margin-top: 0;
134
  color: var(--accent-blue);
135
  }
136
+
137
+ .timeline-content h2.foxconn-title {
138
+ color: var(--foxconn-blue);
139
+ }
140
 
141
  .timeline-content .tag {
142
  font-size: 0.9rem;
 
151
  .tag.problem { background-color: var(--accent-red); }
152
  .tag.solution { background-color: var(--accent-green); }
153
  .tag.tech { background-color: #757575; }
154
+ .tag.case-study { background-color: var(--foxconn-blue); }
155
 
156
  .point-list { list-style: none; padding-left: 0; }
157
  .point-list li {
 
168
  }
169
 
170
  /* Specific content styles */
 
171
  .gus-diagram { width: 100%; max-width: 450px; margin: auto; display: block; }
 
172
  .defense-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
173
+ .defense-item { background-color: var(--bg-color); padding: 1rem; border-radius: 12px; font-size: 0.95rem; }
 
 
 
 
 
174
  .defense-item .icon { font-size: 1.5rem; margin-right: 0.8rem; }
175
+
176
+ /* Foxconn section styles */
177
+ .global-stats { display: flex; justify-content: space-around; text-align: center; margin: 1.5rem 0; }
178
+ .stat-item h3 { font-size: 2rem; margin: 0; color: var(--foxconn-blue); }
179
+ .stat-item p { margin: 0; color: #555; }
180
+ .strategy-list .point-list li { align-items: flex-start; }
181
+
182
  footer { text-align: center; padding: 2rem; color: #757575; }
183
 
184
  /* Responsive */
 
189
  .timeline-item:nth-child(even) { left: 0; }
190
  .timeline-dot { left: 6px; }
191
  .defense-grid { grid-template-columns: 1fr; }
192
+ .global-stats { flex-direction: column; gap: 1rem; }
193
  }
194
 
195
  /* Animation Keyframes */
 
205
  </div>
206
 
207
  <div class="timeline-container">
208
+ <div class="timeline-item"><div class="timeline-dot"></div><div class="timeline-content"><span class="tag problem">起點的困境</span><h2>傳統安全的五大挑戰</h2><ul class="point-list"><li><span class="icon">🏰</span> <b>堡壘模型：</b>只防外部，不防內部，一旦突破全盤皆輸。</li><li><span class="icon">😫</span> <b>人工分析：</b>安全團隊深陷日誌海洋，疲於奔命。</li><li><span class="icon">🤷‍♂️</span> <b>被動應對：</b>總是事後補救，缺乏事前規劃。</li><li><span class="icon">🧩</span> <b>附加式安全：</b>安全性像補丁，而非原生能力。</li><li><span class="icon">🔑</span> <b>繁瑣的驗證：</b>密碼系統既不安全，又影響使用者體驗。</li></ul></div></div>
209
+ <div class="timeline-item"><div class="timeline-dot"></div><div class="timeline-content"><span class="tag solution">轉捩點的思維</span><h2>新世代安全的五��革新</h2><ul class="point-list"><li><span class="icon">🛡️</span> <b>零信任模型：</b>預設永不信任，總是驗證所有存取。</li><li><span class="icon">🤖</span> <b>AI 驅動：</b>讓 AI 成為 7x24 小時不休息的資安分析師。</li><li><span class="icon">📋</span> <b>主動規劃：</b>預先制定應變手冊，臨危不亂。</li><li><span class="icon">🏗️</span> <b>原生架構：</b>安全性從設計之初就內建於系統。</li><li><span class="icon">✨</span> <b>無縫驗證：</b>提供既安全又無感的身份驗證體驗。</li></ul></div></div>
210
+ <div class="timeline-item"><div class="timeline-dot"></div><div class="timeline-content"><span class="tag tech">解決方案</span><h2>Google 統一安全生態系 (GUS)</h2><p>為了實現新世代安全，Google 打造了一個協同作戰的生態系統，其核心由 AI 與統一數據層驅動。</p><img src="https://i.imgur.com/8N0C1gX.png" alt="Google Unified Security Diagram" class="gus-diagram"></div></div>
211
+ <div class="timeline-item"><div class="timeline-dot"></div><div class="timeline-content"><span class="tag tech">核心引擎</span><h2>Gemini AI 的實際應用</h2><p>Gemini AI 如何在安全運營的四大階段中，將自然語言轉化為強大的行動力？</p><ul class="point-list"><li><span class="icon">🔍</span> <b>調查：</b>快速總結案例，用口語搜尋複雜日誌。</li><li><span class="icon">📡</span> <b>偵測：</b>用自然語言就能創建高信賴度的偵測規則。</li><li><span class="icon">⚙️</span> <b>應對：</b>AI 自動推薦應對措施，並協助建立應變手冊。</li><li><span class="icon">🏹</span> <b>獵捕：</b>根據最新威脅情報，主動搜尋潛在威脅。</li></ul></div></div>
212
+ <div class="timeline-item"><div class="timeline-dot"></div><div class="timeline-content"><span class="tag tech">堅實後盾</span><h2>AI 的自我防護機制</h2><p>當 AI 成為防禦核心，其自身的安全至關重要。Google 採用多層次策略保護 Gemini：</p><div class="defense-grid"><div class="defense-item"><span class="icon">🤺</span> <b>主動紅隊演練</b></div><div class="defense-item"><span class="icon">💪</span> <b>對抗性訓練</b></div><div class="defense-item"><span class="icon">🚦</span> <b>輸入/輸出過濾</b></div><div class="defense-item"><span class="icon">📜</span> <b>安全政策微調</b></div><div class="defense-item"><span class="icon">🌐</span> <b>整合威脅情報</b></div><div class="defense-item"><span class="icon">🔒</span> <b>數據隔離隱私</b></div></div></div></div>
 
 
 
 
 
 
 
 
 
213
 
214
+ <div class="timeline-item foxconn">
215
  <div class="timeline-dot"></div>
216
  <div class="timeline-content">
217
+ <span class="tag case-study">實踐案例</span>
218
+ <h2 class="foxconn-title">鴻海 Foxconn 的全球資安佈局</h2>
219
+ <p>作為全球最大的電子製造服務龍頭，鴻海正從「科技服務」邁向「科技創新」（如電動車、AI工廠），其龐大的全球版圖與先進的技術藍圖，使其面臨著巨大的資安挑戰。</p>
220
+
221
+ <div class="global-stats">
222
+ <div class="stat-item"><h3>24</h3><p>國家/地區</p></div>
223
+ <div class="stat-item"><h3>233</h3><p>廠區/辦公室</p></div>
224
+ <div class="stat-item"><h3>154</h3><p>亞洲據點</p></div>
 
 
 
 
 
 
 
 
 
 
 
 
225
  </div>
 
 
226
 
227
+ <h3 style="margin-top: 2rem; color: var(--foxconn-blue);">策略核心：共性 & 聯防</h3>
228
+ <p>為了保護這座科技帝國，鴻海採取了五大資安策略，將安全深植於企業文化與運營中：</p>
229
+ <div class="strategy-list">
230
+ <ul class="point-list">
231
+ <li><span class="icon">🎯</span> <b>理解挑戰，制定策略：</b>盤點集團的資安挑戰，以此為基礎制定頂層策略。</li>
232
+ <li><span class="icon">🗺️</span> <b>規劃藍圖，實施策略：</b>將頂層策略轉化為可執行的具體資安實施策略。</li>
233
+ <li><span class="icon">⚖️</span> <b>健全制度，完善治理：</b>建立全面的資安治理與管理制度，確保有法可依。</li>
234
+ <li><span class="icon">🚀</span> <b>導入 Google 技術，並行管理：</b>引進 Google 的先進安全技術，並與現有管理制度結合，加速落地。</li>
235
+ <li><span class="icon">🤝</span> <b>跨部門協作，共享情資：</b>強化內部協作與情資分享，提升整體應變能力與韌性。</li>
236
+ </ul>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
237
  </div>
238
  </div>
239
  </div>
240
  </div>
241
 
242
  <footer>
243
+ <p>"Make Google part of your security team"</p>
244
+ <p style="font-size:0.9rem; margin-top:-1rem;">本頁面內容根據 Google Cloud Security Forum 演講簡報製作。</p>
245
  </footer>
246
 
247
  <script>
248
  const timelineItems = document.querySelectorAll('.timeline-item');
 
249
  const observer = new IntersectionObserver(entries => {
250
  entries.forEach(entry => {
251
  if (entry.isIntersecting) {
 
253
  observer.unobserve(entry.target);
254
  }
255
  });
256
+ }, { threshold: 0.1 });
257
+ timelineItems.forEach(item => { observer.observe(item); });
 
 
 
 
 
258
  </script>
259
  </body>
260
  </html>