Skoro hotovo.
This commit is contained in:
Greenscreener
parent
c1227502d8
commit
cc547e876c
BIN
assets/gifs/autofill.gif
Normal file
BIN
assets/gifs/autofill.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
BIN
assets/images/adobe-reset.png
Normal file
BIN
assets/images/adobe-reset.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
assets/images/dashlane.png
Normal file
BIN
assets/images/dashlane.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
assets/images/googleconfirm.png
Normal file
BIN
assets/images/googleconfirm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
assets/images/hashes.png
Normal file
BIN
assets/images/hashes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
assets/images/haveibeenpwned.png
Normal file
BIN
assets/images/haveibeenpwned.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 229 KiB |
BIN
assets/images/iphoneclipart.png
Normal file
BIN
assets/images/iphoneclipart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 482 KiB |
BIN
assets/images/password-years.png
Normal file
BIN
assets/images/password-years.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
BIN
assets/images/passwordmanagers.png
Normal file
BIN
assets/images/passwordmanagers.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 542 KiB |
BIN
assets/images/suggestedpass.png
Normal file
BIN
assets/images/suggestedpass.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
assets/images/youwanttosave.png
Normal file
BIN
assets/images/youwanttosave.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
270
index.html
270
index.html
@ -27,6 +27,53 @@
|
||||
section > section {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.reveal {
|
||||
counter-reset: fn;
|
||||
}
|
||||
|
||||
a.fn {
|
||||
font-variant-position: super;
|
||||
counter-increment: fn;
|
||||
}
|
||||
a.fn::after {
|
||||
content: "[↗]";
|
||||
}
|
||||
|
||||
.red-strike {
|
||||
text-decoration-color: rgba(255,0,0,0) !important;
|
||||
}
|
||||
|
||||
.red-strike.visible {
|
||||
text-decoration-color: red !important;
|
||||
text-decoration-thickness: 5px !important;
|
||||
}
|
||||
|
||||
.reveal .slides section .fragment.no {
|
||||
opacity: 1;
|
||||
visibility: inherit;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fragment.no.visible {
|
||||
color: #ff2c2d;
|
||||
}
|
||||
.fragment.no.visible::before {
|
||||
content: "";
|
||||
border-top: solid 4px red;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: scale(1.2) rotate(25deg);
|
||||
}
|
||||
|
||||
.nonf {
|
||||
color: #ff2c2d;
|
||||
text-decoration-line: line-through;
|
||||
text-decoration-color: red;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -42,6 +89,9 @@
|
||||
<section data-state="stopHAXX">
|
||||
<h1>Hesla</h1>
|
||||
<div style="font-size: 2rem; color: #93a1a1; display: inline-flex; align-items: center;"><div><p>Jan Černohorský</p><p>Šimon Jan Šustek</p></div><div style="width: 1px; background-color: #93a1a1; height: 5em; margin: 1em;"></div><patek-logo title="Talks" subtitle="Pátek"></patek-logo></div>
|
||||
<p style="font-size: medium">Slidy jsou dostupné na <a href="https://patek.cz/talks/passwords">patek.cz/talks/passwords</a> </p>
|
||||
<p style="font-size: medium"> Obsahují užitečné odkazy <a href="https://patek.cz/talks/passwords" class="fn"></a> </p>
|
||||
|
||||
</section>
|
||||
<section>
|
||||
<h2>
|
||||
@ -69,96 +119,224 @@
|
||||
<p class="fragment">vymazat všechna data ve vašem telefonu</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>S vaším heslem můžu být vy.</h3>
|
||||
<h3>S vaším heslem můžu být vy. <a href="https://www.youtube.com/watch?v=dM72LqTb5jA" class="fn"></a></h3>
|
||||
<p class="fragment">(to nechcete)</p>
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<h2>
|
||||
Znám vaše heslo
|
||||
</h2>
|
||||
<section>
|
||||
<code class="fragment" data-fragment-index="0" style="font-size:2.5em"><span class="fragment highlight-red" data-fragment-index="1">Karlicka</span><span class="fragment highlight-green" data-fragment-index="2">84</span><span class="fragment highlight-blue" data-fragment-index="3">!</span></code>
|
||||
<p class="fragment" data-fragment-index="1" style="color: #ff2c2d;">slovo s velkým písmenem - nějaké jméno (čehokoliv)</p>
|
||||
<p class="fragment" data-fragment-index="2" style="color: #17ff2e;">číslo - číslo popisné, datum narození, lomítko rč</p>
|
||||
<p class="fragment" data-fragment-index="3" style="color: #1b91ff;">speciální znak, ! nebo @, ale jenom když musím</p>
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<h2>
|
||||
Ale jak?
|
||||
</h2>
|
||||
<img style="width: 100%" src="assets/images/password-years.png" alt="">
|
||||
<p><a href="https://cybernews.com/best-password-managers/most-common-passwords/" class="fn"></a></p>
|
||||
</section>
|
||||
<!-- Stačí říct
|
||||
<section>
|
||||
<h2>
|
||||
Hesla <i>jsou předvídatelná</i>
|
||||
</h2>
|
||||
</section>
|
||||
-->
|
||||
<section>
|
||||
<h2>
|
||||
Hesla <i>unikají stránkám</i>
|
||||
</h2>
|
||||
<section>
|
||||
<img src="assets/images/adobe-reset.png" style="" alt="">
|
||||
</section>
|
||||
<section>
|
||||
<p><q>The attackers may have obtained access to your Adobe ID and <b>encrypted</b> password.</q></p>
|
||||
<p><q>We have reset your password.</q></p>
|
||||
</section>
|
||||
<section>
|
||||
<img src="assets/images/hashes.png" alt="">
|
||||
</section>
|
||||
<section>
|
||||
<h3>Hashování je fajn, ale</h3>
|
||||
<p>mnoho stránek ho stále nepoužívá <a class="fn" href="https://pulse.michalspacek.cz/passwords/storages"></a></p>
|
||||
<p>slabé heslo se dá rychle <q>cracknout</q><a href="https://www.youtube.com/watch?v=oYNnvTXwlAw" class="fn"></a></p>
|
||||
</section>
|
||||
<section>
|
||||
<p>a unikají pořád <a href="https://www.google.com/search?tbm=nws&q=password+leak" class="fn"></a></p>
|
||||
</section>
|
||||
<section data-background-opacity=".3" data-background="assets/images/haveibeenpwned.png">
|
||||
<p>ověřte si svoji emailovou adresu na haveibeenpwned.com <a href="https://haveibeenpwned.com" class="fn"></a></p>
|
||||
<p class="fragment">nastavte si notifikace</p>
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<h2>
|
||||
Hesla <i>unikají vám</i>
|
||||
Hesla <i>unikají vám</i> (tahle sekce chce ještě rozšířit)
|
||||
</h2>
|
||||
<section>
|
||||
Michael Reeves a phishing <a href="https://www.youtube.com/watch?v=O502R_LugE4" class="fn"></a>
|
||||
</section>
|
||||
<section>
|
||||
accounts.snoogle.ml
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<h2>
|
||||
<p>Hesla <i>jsou na h<img src="/assets/gifs/glič1.gif" alt="glič" class="glič"><img src="/assets/gifs/glič1.gif" alt="glič" class="glič">o</i>,</p>
|
||||
<p> ale co s tím? </p>
|
||||
|
||||
</h2>
|
||||
</section>
|
||||
<section>
|
||||
<h2>
|
||||
Co můžu dělat?
|
||||
</h2>
|
||||
<h2>Jak vytvořit dobré heslo?</h2>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Musí být dlouhé</h2>
|
||||
<section>
|
||||
<p>alespoň</p>
|
||||
<p style="font-size: 1.5em">
|
||||
<span class="fragment"><span class="fragment strike">8</span></span>
|
||||
<span class="fragment"><span class="fragment strike">12</span></span>
|
||||
<span class="fragment">20?</span>
|
||||
</p>
|
||||
<p>znaků</p>
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Nepředvídatelné</h2>
|
||||
<section>
|
||||
<p><code class="fragment strike red-strike highlight-red" style="font-size: 1.5em">Pepik92</code></p>
|
||||
</section>
|
||||
<section>
|
||||
<p><code class="fragment strike red-strike highlight-red">correct horse battery staple</code></p>
|
||||
</section>
|
||||
<section>
|
||||
<p><code class="fragment strike red-strike highlight-red">Ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn</code></p>
|
||||
</section>
|
||||
<section>
|
||||
<p><code class="fragment highlight-green" data-fragment-index="1" style="font-size: 1.5em">d!13p$*W1Z2RnxUc</code></p>
|
||||
<p class="fragment" data-fragment-index="1">náhodné = <span style="font-size: 2em">👍</span></p>
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Unikátní</h2>
|
||||
<section>
|
||||
<p style="font-size: 1.5em">jeden účet = jedno heslo</p>
|
||||
</section>
|
||||
<section>
|
||||
<div class="fragment no">
|
||||
<p>d!13p$*W1Z2RnxUc1</p>
|
||||
<p>d!13p$*W1Z2RnxUc2</p>
|
||||
<p>d!13p$*W1Z2RnxUc3</p>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<h2>
|
||||
<i>Unikátnost</i>
|
||||
Kdo si to má pamatovat?
|
||||
</h2>
|
||||
<br>
|
||||
<h2 class="fragment">
|
||||
Password manager!
|
||||
</h2>
|
||||
</section>
|
||||
<section>
|
||||
<h2>
|
||||
<i>Nepředvídatelnost</i>
|
||||
</h2>
|
||||
<h2>Password manager</h2>
|
||||
<section>
|
||||
<h4 class="fragment">Program, který se o hesla stará za vás</h4>
|
||||
</section>
|
||||
<section>
|
||||
<br>
|
||||
<h4>pamatuje si hesla</h4>
|
||||
<img src="assets/images/dashlane.png" alt="">
|
||||
</section>
|
||||
<section>
|
||||
<h4>generuje silná hesla</h4>
|
||||
<img src="assets/images/suggestedpass.png" alt="">
|
||||
</section>
|
||||
<section>
|
||||
<h4>vyplňuje hesla za vás</h4>
|
||||
<img src="assets/gifs/autofill.gif" alt="">
|
||||
</section>
|
||||
<section>
|
||||
<h4>Kde to seženu?</h4>
|
||||
<div class="fragment">
|
||||
<p>Umí to váš prohlížeč.</p>
|
||||
<img src="assets/images/youwanttosave.png" height="300" alt="">
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<img src="assets/images/passwordmanagers.png" alt="">
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<p>
|
||||
Do password manageru se musím přihlásit...
|
||||
</p>
|
||||
<p class="fragment">
|
||||
...heslem.
|
||||
</p>
|
||||
<p class="fragment">
|
||||
Jak ale takové heslo vymyslet?
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Jak vytvořit heslo?</h2>
|
||||
<section>
|
||||
<p><span class="nonf">password</span> ⟶ passphrase
|
||||
<p style="font-size: .8em" class="fragment">V heslech <b>můžou</b> být mezery. </p>
|
||||
</section>
|
||||
<section>
|
||||
<p style="font-size: .8em"><code>Somewhere between the sacred silence and sleep</code></p>
|
||||
<p>↓</p>
|
||||
<p style="font-size: .8em"><code>S_ |3| the s"d s_! n /eep</code></p>
|
||||
<p style="font-size: .8em"><code>So@ewh_re betveen t%- sacr^d si!e_ &+ s9p</code></p>
|
||||
</section>
|
||||
<section>
|
||||
<p>Diceware - generování hesel pomocí kostek <a href="https://theworld.com/~reinhold/diceware.html" class="fn"></a></p>
|
||||
<p><code style="white-space: pre-line; font-size: .8em; text-align: left; display: inline-block">
|
||||
22423 hanka
|
||||
35631 nq
|
||||
21656 foton
|
||||
21344 eur
|
||||
33162 máslo
|
||||
63646 výkres
|
||||
</code></p>
|
||||
<br>
|
||||
<code>hanka nq fot$n eur máslo výkres</code>
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<h2>
|
||||
<i>Délka</i>
|
||||
<p style="font-size:.9em">Hesla <i>jsou ale na h<img src="/assets/gifs/glič1.gif" alt="glič" class="glič"><img src="/assets/gifs/glič1.gif" alt="glič" class="glič">o</i>, ne?</p>
|
||||
</h2>
|
||||
<p>Jsou...</p>
|
||||
<p>...ale co s tím?</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>
|
||||
No to je super, ale kdo si to má pamatovat?
|
||||
</h2>
|
||||
<h1>Password Managers!!!</h1>
|
||||
</section>
|
||||
<section>
|
||||
<h2>
|
||||
A kde se to dá sehnat?
|
||||
</h2>
|
||||
</section>
|
||||
<section>
|
||||
<h2>
|
||||
Do Password Manageru máte jedno silné heslo, které si pamatujete. V Password Manageru máte všechna ostatní hesla, která si nepamatujete.
|
||||
</h2>
|
||||
</section>
|
||||
<section>
|
||||
<h2>
|
||||
Nojo, ale kde to jedno silné heslo seženu?
|
||||
</h2>
|
||||
</section>
|
||||
<section>
|
||||
<h2>
|
||||
Fajn, tak to by bylo. Pojďme se vrátit na začátek.
|
||||
</h2>
|
||||
</section>
|
||||
<section>
|
||||
<h2>
|
||||
Nejdete to lépe?
|
||||
</h2>
|
||||
</section>
|
||||
<section>
|
||||
<h2>
|
||||
Multifaktorové přihlašovaní
|
||||
Vícefaktorové přihlašovaní
|
||||
</h2>
|
||||
<section>
|
||||
<p class="fragment">Heslo není jediný způsob, jak ověřit uživatele</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>tři faktory:</h3>
|
||||
<p class="fragment"><strong>něco, co vím </strong> <span class="fragment">- klasické heslo</span></p>
|
||||
<p class="fragment"><strong>něco, co jsem</strong> <span class="fragment">- biometrika, otisk, ksichtID</span></p>
|
||||
<p class="fragment"><strong>něco, co mám</strong> <span class="fragment">- ???</span></p>
|
||||
</section>
|
||||
<section>
|
||||
<p>Co máme všichni neustále u sebe </p>
|
||||
<p>a dá se pomocí toho ověřit? </p>
|
||||
<img class="fragment fade-up" style="box-shadow: 0 0 7px 0 #050505; border-radius: 20px" src="assets/images/iphoneclipart.png" height="300">
|
||||
</section>
|
||||
<section>
|
||||
<img src="assets/images/googleconfirm.png" height="500" alt="">
|
||||
<!-- Sem bych dal ještě screenshot z telefonu vedle toho -->
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<h2>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user