Frontend - HackMD

# Frontend # ClickHijack - take advantage of embedding the web page to cheat frist, creat the iframe ```htmlmixed= <iframe src="URL"> </iframe> ``` Add CSS ```css= iframe{ width: 500px; height: 200px; position: absolute; top: 0%; left: 0%; opacity:0.1; } ``` position: absolute; Could set the iframe position opacity: 不透明度 ```htmlmixed= <!DOCTYPE html> <html> <head> <title>main</title> <style> iframe{ width: 500px; height: 500px; position: absolute; top: 0%; left: 0%; opacity: 0.1; } </style> </head> <body> <h1>Wellcome to my test page</h1> <h2>login in and you will won 100000 dollar</h2> <form> Account: </br> <input type="text" name="account"> </br> Password: </br> <input type="text" name="password"> </form> <iframe src="ClickHijack.html" title="Hijack" name="Hijack"></iframe> </body> </html> ``` # Display a blank in HTML &nbsp # [Html DOM](https://www.w3schools.com/jsref/dom_obj_document.asp) - The document object is a property of the window object. ## Attribute ### [getNameItem()](https://www.w3schools.com/jsref/met_namednodemap_getnameditem.asp) To get a element'name.value . e.g. onclick="meow" (it will print meow ### [item()](https://www.w3schools.com/jsref/met_namednodemap_item.asp) - Use attrobite's index to get something. ### [length()](https://www.w3schools.com/jsref/prop_namednodemap_length.asp) ### [name](https://www.w3schools.com/jsref/prop_attr_name.asp) ### [RemovedNameItem()](https://www.w3schools.com/jsref/met_namednodemap_removenameditem.asp) - Remover node (by name) in NamedNodeMap ### [setNameItem()](https://www.w3schools.com/jsref/met_namednodemap_setnameditem.asp) ### [specified](https://www.w3schools.com/jsref/prop_attr_specified.asp) attribute.specified nodeMap.setNameItem(node) set - nodeMap - Node ```javascript= function deletebackground(){ let value = document.getElementById("buttonBG").attributes[4].value; if(value == "DeleteBackGround"){ document.getElementById("backGround").attributes.removeNamedItem("background"); document.getElementById("buttonBG").attributes[4].value = "Recover"; } else{ let nodeMap = document.getElementById("backGround").attributes; let node = document.createAttribute("background"); node.value = "f.jpg"; nodeMap.setNamedItem(node); document.getElementById("buttonBG").attributes[4].value ="DeleteBackGround"; } ``` ## Html attribute ### [accessKey](https://www.w3schools.com/jsref/prop_html_accesskey.asp) - accesskey = "" - alt+"any character" ### [addEventListener()](https://www.w3schools.com/jsref/met_element_addeventlistener.asp) addEventListener(click,function()) == onclick="function" ### [appendChild(node)](https://www.w3schools.com/jsref/met_node_appendchild.asp) ### [blur()](![](https://i.imgur.com/unkziJz.png) ) - blur() is use to remove focus() ### [ChileElementCount](https://www.w3schools.com/jsref/prop_element_childelementcount.asp) - count - element.appendChild(node) - document.createElement(""); - document.createTextNode(""); ### NameNodeMap - definition - NaameNodeMap is list of attribute objects. - ![](https://i.imgur.com/bym0TMf.png) ### [children()](https://www.w3schools.com/jsref/prop_element_children.asp) - children == element node - node == (text.node or element.node or comment.node) ### [classList](https://www.w3schools.com/jsref/prop_element_classlist.asp) - ID.classlist.add("className")/remove("className") - Could go with CSS to inject some malcode - background: url(~~~~~~); - .classlist.toggle("className") == (add mix remove) ![](https://i.imgur.com/wxGgy73.png) ### [className](https://www.w3schools.com/jsref/prop_html_classname.asp) ![](https://i.imgur.com/RYuuThY.png) ### [click]() ### [cloneNode](https://www.w3schools.com/jsref/met_node_clonenode.asp) ### GetByID ```htmlmixed= <p id="demo" onmouseover="changetext()"></p> <script> function changetext(){ alert(1); document.getElementById("demo").innerHTML = "fucker"; } let url = window.document.URL; document.getElementById("demo").innerHTML = url; </script> ``` ### Double click - triggering an event or a function ```htmlembedded= <tag ondblclick="function()"></tag> ``` ### onmouseover ```htmlembedded= <tag onmouseover="function()"></tag> ``` # 想法 onmouseover + click() -> forcely click ```htmlembedded= <style> .img{ background: url(https://truth.bahamut.com.tw/s01/202108/c4e5fa35b553d9e3a0a21ec31a2fbc94.JPG); background-size: contain; height: 200px; width: 200px; position: absolute; top: 60%; left: 80%; } </style> <script> function forceClick(){ document.getElementById("imgalert").click() } </script> <a id="imgalert" class="img" onmouseover="forceClick()" href="HijackTest.html" target="_blank"><a> ``` 但是會被web 強制封鎖 QQ