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