├── README.md ├── index.html ├── style.css └── script.js /README.md: -------------------------------------------------------------------------------- 1 | # security-client-exercise 2 | For ZTM course - Security 3 | 4 | Run in conjunction with security-server-exercise repo :) 5 | 6 | *visist https://zerotomastery.io/ for more* 7 | 8 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 🔥Make Me Secure! 5 | 6 | 7 | 8 |

Security Playground 😱🔥

9 |

10 | 11 | 12 |

13 |

14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: no-repeat center center fixed cover; 3 | background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%); 4 | text-align: center; 5 | } 6 | 7 | h2 { 8 | font-size: 100px; 9 | } 10 | 11 | input { 12 | padding: 15px; 13 | font-size: 20px; 14 | } 15 | 16 | 17 | button { 18 | padding: 25px; 19 | background-color: #f4511e; 20 | border: none; 21 | color: white; 22 | padding: 16px 32px; 23 | text-align: center; 24 | font-size: 20px; 25 | margin: 4px 2px; 26 | opacity: 0.6; 27 | transition: 0.3s; 28 | display: inline-block; 29 | text-decoration: none; 30 | cursor: pointer; 31 | } 32 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // try inputting this: 2 | // Now, try inputting this:

3 | // Scripts injected into the DOM via script tags in innerHTML 4 | // are not run at the time they are injected (inline scripts 5 | // are run at the time the original page is parsed). On the 6 | // other hand, images injected into the DOM are loaded at that 7 | // time, and if the loading fails, then the onerror event 8 | //handler is called. 9 | const userInputInHTML = (input) => { 10 | const p = document.getElementById("pleaseNo") 11 | // Bad 12 | p.innerHTML = input; 13 | 14 | // Better 15 | // var textnode = document.createTextNode(input); 16 | // p.appendChild(textnode); 17 | } 18 | const sendToServer = () => { 19 | const input = document.querySelector('#userinput').value; 20 | userInputInHTML(input) 21 | fetch('http://localhost:3000/secret', { 22 | method: 'POST', 23 | body: JSON.stringify({userInput: input}), 24 | headers: new Headers({ 25 | 'Content-Type': 'application/json' 26 | }) 27 | }) 28 | } 29 | 30 | 31 | 32 | 33 | --------------------------------------------------------------------------------