Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(303)

Side by Side Diff: chrome/browser/resources/ssl_fancy_firefox.html

Issue 14752005: Finch experiments on SSL, malware, and phishing interstitials (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Made changes per Adam L's review Created 7 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <!-- This SSL interstitial is designed to look like the Firefox SSL error, with
3 permission from Firefox to copy the appearance of the page for an A/B
4 experiment. -->
5 <html i18n-values="dir:textdirection">
6 <head>
7 <meta charset="utf-8">
8 <title>Untrusted Connection</title>
9 <style>
10 body {
11 background-color: #444444;
12 color: #555555;
13 margin: 0;
14 padding: 0 1em;
15 }
16 #box {
17 background-color: #ffffff;
18 border-top: 9px solid #ffbd09;
19 margin: 40px auto;
20 max-width: 52em;
21 min-width: 13em;
22 padding: 50px 0px 30px 0px;
23 position: relative;
24 }
25 #exit-button {
26 color: #ffffff;
27 background-color: #4285f4;
28 border: none;
29 padding: 15px;
30 margin-top: 15px;
31 font-weight: bold;
32 -webkit-border-radius: 3px;
33 }
34 h1 {
35 color: #000000;
36 font-size: 160%;
37 font-weight: normal;
38 margin: 0 0 .6em 0;
39 }
40 .icon {
41 position: absolute;
42 }
43 #inner-box {
44 margin: 0 80px 0 30px;
45 }
46 .main {
47 margin: 1em 0 0 95px;
48 }
49 .open {
50 display: none;
51 }
52 #proceed-button {
53 color: #ffffff;
54 background-color: #4285f4;
55 border: none;
56 padding: 15px;
57 margin-top: 5px;
58 font-weight: bold;
59 -webkit-border-radius: 3px;
60 }
61 .small {
62 margin: 1em 0 0 95px;
63 font-size: 87%;
64 }
65 .subtitle {
66 cursor: pointer;
67 font-size: 103%;
68 color: #4285f4;
69 }
70 .title {
71 margin: 0 0 0 95px;
72 }
73 .twisty {
74 cursor: pointer;
75 float:left;
76 padding-right: 8px;
77 padding-top: 3px;
78 }
79 #what-to-do {
80 border-bottom: #f0f0f0 2px solid;
81 padding-bottom: 20px;
82 padding-top: 2px;
83 }
84 #what-to-do-title {
85 color: #000000;
86 font-size: 110%;
87 }
88 </style>
89
90 <script>
91 // Should match SSLBlockingPageCommands in ssl_blocking_page.cc.
92 var CMD_DONT_PROCEED = 0;
93 var CMD_PROCEED = 1;
94 var CMD_FOCUS = 2;
95 var CMD_MORE = 3;
96 var CMD_UNDERSTAND = 4;
97
98 var showedMore = false;
99 var showedUnderstand = false;
100 var keyPressState = 0;
101 var gainFocus = false;
102
103 function $(o) {
104 return document.getElementById(o);
105 }
106
107 function sendCommand(cmd) {
108 window.domAutomationController.setAutomationId(1);
109 window.domAutomationController.send(cmd);
110 }
111
112 function toggleMoreInfo() {
113 var status = !$('more-info-content').hidden;
114 $('more-info-content').hidden = status;
115 if (status) {
116 $('more-info-twisty-closed').style.display = 'inline';
117 $('more-info-twisty-open').style.display = 'none';
118 } else {
119 $('more-info-twisty-open').style.display = 'inline';
120 $('more-info-twisty-closed').style.display = 'none';
121 if (!showedMore) {
122 sendCommand(CMD_MORE);
123 showedMore = true;
124 }
125 }
126 }
127
128 function toggleUnderstand() {
129 var status = !$('understand-content').hidden;
130 $('understand-content').hidden = status;
131 if (status) {
132 $('understand-twisty-closed').style.display = 'inline';
133 $('understand-twisty-open').style.display = 'none';
134 } else {
135 $('understand-twisty-open').style.display = 'inline';
136 $('understand-twisty-closed').style.display = 'none';
137 if (!showedUnderstand) {
138 sendCommand(CMD_UNDERSTAND);
139 showedUnderstand = true;
140 }
141 }
142 }
143
144
145 // Supports UMA timing, which starts after the warning is first viewed.
146 function handleFocusEvent() {
147 if (gainFocus == false) {
148 sendCommand(CMD_FOCUS);
149 gainFocus = true;
150 }
151 }
152
153 // UI modifications and event listeners that take place after load.
154 function setupEvents() {
155 $('proceed-button').addEventListener('click', function() {
156 sendCommand(CMD_PROCEED);
157 });
158
159 $('exit-button').addEventListener('click', function() {
160 sendCommand(CMD_DONT_PROCEED);
161 });
162
163 $('more-info-title').addEventListener('click', function() {
164 toggleMoreInfo();
165 });
166
167 $('more-info-twisty-open').addEventListener('click', function() {
168 toggleMoreInfo();
169 });
170
171 $('more-info-twisty-closed').addEventListener('click', function() {
172 toggleMoreInfo();
173 });
174
175 $('understand-title').addEventListener('click', function() {
176 toggleUnderstand();
177 });
178
179 $('understand-twisty-open').addEventListener('click', function() {
180 toggleUnderstand();
181 });
182
183 $('understand-twisty-closed').addEventListener('click', function() {
184 toggleUnderstand();
185 });
186
187 document.addEventListener('contextmenu', function(e) {
188 e.preventDefault();
189 });
190 }
191
192 window.addEventListener('focus', handleFocusEvent);
193 document.addEventListener('DOMContentLoaded', setupEvents);
194 </script>
195 </head>
196 <body i18n-values=".style.fontFamily:fontfamily">
197 <div id="box">
198 <div id="inner-box">
199 <div class="icon">
200 <img src="ssl_firefox_icon.png" alt="SSL Error Icon">
201 </div>
202
203 <div class="title">
204 <h1 class="titleText">This Connection is Untrusted</h1>
205 </div>
206
207 <div class="main">
208 <p>
209 You have asked Chrome to connect securely to <b><span
210 i18n-values=".innerHTML:domain"></span></b>, but we can't confirm that
211 your connection is secure.
212 </p>
213 <p>
214 Normally, when you try to connect securely, sites will present
215 trusted identification to prove that you are going to the right place.
216 However, this site's identity can't be verified.
217 </p>
218 </div>
219
220 <div class="small" id="what-to-do">
221 <h2 id="what-to-do-title">What Should I Do?</h2>
222 <p>If you usually connect to this site without problems, this error could
223 mean that someone is trying to impersonate the site, and you shouldn't
224 continue.</p>
225 <button id="exit-button">Get me out of here!</button>
226 </div>
227
228 <div class="small">
229 <img class="twisty" id="more-info-twisty-closed"
230 src="ssl_firefox_fancy_twisty_closed.png" border="0">
231 <img class="twisty open" id="more-info-twisty-open"
232 src="ssl_firefox_fancy_twisty_open.png" border="0">
233 <h2 id="more-info-title" class="subtitle">Technical Details</h2>
234 <div id="more-info-content" class="subtext" hidden>
235 <p i18n-values=".innerHTML:moreInfo1"></p>
236 <p i18n-values=".innerHTML:moreInfo2"></p>
237 <p i18n-values=".innerHTML:moreInfo3"></p>
238 <p i18n-values=".innerHTML:moreInfo4"></p>
239 <p i18n-values=".innerHTML:moreInfo5"></p>
240 </div>
241 </div>
242
243 <div class="small">
244 <img class="twisty" id="understand-twisty-closed"
245 src="ssl_firefox_fancy_twisty_closed.png" border="0">
246 <img class="twisty open" id="understand-twisty-open"
247 src="ssl_firefox_fancy_twisty_open.png" border="0">
248 <h2 id="understand-title" class="subtitle">I Understand the Risks</h2>
249 <div id="understand-content" class="subtext" hidden>
250 <p>If you understand what's going on, you can click the button below to
251 proceed to the site. <b>Even if you trust the site, this error could
252 mean that someone is tampering with your connection.</b></p>
253 <p>Don't proceed to the site unless you know there's a good reason why
254 this site doesn't use trusted identification.</p>
255 <button id="proceed-button">Proceed Anyway</button>
256 </div>
257 </div>
258 </div>
259 </div>
260
261 </body>
262 </html>
263
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698