OLD | NEW |
(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="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="firefox_fancy_twisty_closed.png" border="0"> |
| 231 <img class="twisty open" id="more-info-twisty-open" |
| 232 src="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="firefox_fancy_twisty_closed.png" border="0"> |
| 246 <img class="twisty open" id="understand-twisty-open" |
| 247 src="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 |
OLD | NEW |