跨站脚本攻击(Cross Site Scripting)，为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS。
首先看下HTML：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <form > Username:<input type="text" id="username" /> Password:<input type="password" id="pwd" /> <input type="button" value="Submit" onclick="return checkUser()" /> <div id="message">aaa +</div> </form> <span><img src="null" onerror="console.error('this is from the img element');" /></span> </body> <script type=""> function checkUser(){ var body = document.body; var uname = document.getElementById("username").value; var pwd = document.getElementById("pwd").value; if('' == uname && '' == pwd){ alert(" required "); }else{ var div =document.getElementById("message"), script = document.createElement('script'); div.innerHTML = "welcome "+uname+" to here,your password is "+pwd; // script.setAttribute('type', 'text/javascript'); // script.setAttribute('src', uname); // body.appendChild(script); } } </script> </html>
接着在浏览器中的文本输入框中添加下面代码：
<img src="null" onerror="console.error('this is from the img element');" />
摁F12打开控制台查看输出，点击Submit 按钮，可以看到报错
这是因为输入的内容作为标签融入网页中，因为Img标签src为null,所以会触发onerror事件输出this is from the img element。