前端冷知识，妙用浏览器地址栏

你的名字 2022-08-20 13:12 183阅读 0赞

javascript：会使浏览器触发js解释器

javascript:alert('I am wscats :)');

将以上代码贴到浏览器地址栏回车后alert正常执行，会出现一个弹窗。  
注意：某些浏览器的javascript: 要自行手打到浏览器地址栏，直接复制粘贴的话IE和Chrome会自动去掉代码开头的javascript:的  
可以拿来四则运算balabala~

javascript:alert(3+4-6);

看看圆周率等等~

javascript:alert(355/113);void(0);

深入一点，在页面上一些点击的链接可以利用这种方法实行跳转之后运行js代码，进而进行xss或者钓鱼，这里省略~

<a href="javascript:alert('I am wscats :)');">
    I am wscats :)
    </a>

当然也可以用来检测是否钓鱼网站，根据提供的URL和网页本身的URL进行对比验证

javascript:alert("本网址域名为:" + location.protocol + "//" + location.hostname + "/" + "\n此时浏览的地址为:" + location.href + "\n" + "\n注意：如果域名对不上，就赶紧关掉噢");

还有一个跟这个类似的用法就是mailto

<a href="mailto:name@email.com">I am wscats :)</a>

链接是一种html链接，能够设置你电脑中邮件的默认发送信息。但是需要你电脑中安装默认的E-mail软件，类似Microsoft Outlook等等。

data:text/html, <textarea style="font-size: 1.5em; width: 100%; height: 100%;" autofocus />

将以上代码输入到浏览器将会出现一个textarea框  
  
当然你也可以更改更复杂一点，比如下面复制粘贴这两个代码到地址栏试试

data:text/html,<button onClick="SaveTextArea()">Save</button> <script language="javascript" type="text/javascript"> function SaveTextArea() { window.location = "data:application/octet-stream," + escape(txtBody.value); } </script> <textarea id="txtBody" style="font-size: 1.5em; width: 100%; height: 100%; boarder: none; outline: none" autofocus> </textarea>
    data:text/html, <style type="text/css">#e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script>

其他的用法如下：

1.  data:,<文本数据>
2.  data:text/plain,<文本数据>
3.  data:text/html,<HTML代码>
4.  data:text/html;base64,<base64编码的HTML代码>
5.  data:text/css,<CSS代码>
6.  data:text/css;base64,<base64编码的CSS代码>
7.  data:text/javascript,<Javascript代码>
8.  data:text/javascript;base64,<base64编码的Javascript代码>
9.  data:image/gif;base64,base64编码的gif图片数据
10. data:image/png;base64,base64编码的png图片数据
11. data:image/jpeg;base64,base64编码的jpeg图片数据
12. data:image/x-icon;base64,base64编码的icon图片数据

就不一一介绍了