Front-end Security

@glrodasz

Guillermo Rodas

Google Developer Expert in Web Technologies

Community Organizer and Online Teacher

https://guillermorodas.com

@glrodasz

Agenda

Encoding, Hashing, and Encryption​

Symmetric and Asymmetric Encryption

Difference between Encryption vs Signing

Content Security Policy

Cross-site scripting (XSS)

Encoding, Hashing, and Encryption​

Encoding

https://www.base64encode.org/

https://attacomsian.com/blog/nodejs-base64-encode-decode#base64-encoding

https://github.com/cssconfco/website/blob/master/utils/orderParams.js

https://www.w3.org/International/questions/qa-what-is-encoding

Hashing

https://auth0.com/blog/how-secure-are-encryption-hashing-encoding-and-obfuscation/

Hashing

https://auth0.com/blog/how-secure-are-encryption-hashing-encoding-and-obfuscation/

Hashing - Collision

http://shattered.io/static/infographic.pdf

Hashing - Rainbow Tables

https://www.tunnelsup.com/hash-analyzer/

Hashing - Rainbow Tables

https://crackstation.net/

Hashing - Salting

https://en.wikipedia.org/wiki/Salt_(cryptography)

Hashing - Salting

2a identifies the bcrypt algorithm version that was used.

$vI8aWBnW3fID.ZQ4/zo1G.q1lRps.9cGLcZEiGDMVr5yUP1KUOYTa

$10

$2a

10 is the cost factor; 2^10 iterations of the key derivation function are used.

 (which is not enough, by the way. I'd recommend a cost of 12 or more.)

vI8aWBnW3fID.ZQ4/zo1G.q1lRps.9cGLcZEiGDMVr5yUP1KUOYTa is the salt and the cipher text, concatenated and encoded in a modified Base-64.

The first 22 characters decode to a 16-byte value for the salt. The remaining characters are cipher text to be compared for authentication.

https://stackoverflow.com/a/6833165/1360383

https://en.wikipedia.org/wiki/Bcrypt

Hashing - Cost Factor

https://labs.clio.com/bcrypt-cost-factor-4ca0a9b03966

Hashing - Cost Factor

https://github.com/kelektiv/node.bcrypt.js#a-note-on-rounds​

Encryption

https://pixelprivacy.com/resources/what-is-encryption/

https://nodejs.org/en/knowledge/cryptography/how-to-use-crypto-module/

https://attacomsian.com/blog/nodejs-encrypt-decrypt-data#encrypt-and-decrypt-text

Symmetric and Asymmetric Encryption

Encryption — Symmetric

https://auth0.com/blog/how-secure-are-encryption-hashing-encoding-and-obfuscation/#What-is-Encryption-

Encryption — Asymmetric

https://auth0.com/blog/how-secure-are-encryption-hashing-encoding-and-obfuscation/#What-is-Encryption-

Difference between Encryption vs Signing

https://stackoverflow.com/a/454069​

JWT Compact Serialization

 

https://jwt.io/

JWT, JWE, JWS and JOSE

 

https://medium.facilelogin.com/jwt-jws-and-jwe-for-not-so-dummies-b63310d201a3

JWT, JWE, JWS and JOSE

 

https://medium.facilelogin.com/jwt-jws-and-jwe-for-not-so-dummies-b63310d201a3

Content Security Policy

Use case #1: social media widgets 

Content-Security-Policy: script-src https://apis.google.com https://platform.twitter.com; child-src https://plusone.google.com https://facebook.com https://platform.twitter.com

Use case #2: lockdown

0
 Advanced issue found
▲
 
 
Content-Security-Policy: default-src 'none'; script-src https://cdn.mybank.net; style-src https://cdn.mybank.net; img-src https://cdn.mybank.net; connect-src https://api.mybank.com; child-src 'self'

Use case #3: SSL only

0
 Advanced issue found
▲
 
 
Content-Security-Policy: default-src https:; script-src https: 'unsafe-inline'; style-src https: 'unsafe-inline'

Cross-site scripting (XSS)

https://owasp.org/www-community/attacks/xss/

https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html

https://xss-game.appspot.com/level1

Questions?

Front-end Security

By Guillermo Rodas

Made with Slides.com

Front-end Security

A retrospective about security in the front-end and some web security basic knowledge

  • 526

More from Guillermo Rodas