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

Wscats · 2016-04-15T07:52:47Z

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>

其他的用法如下：

data:,<文本数据>
data:text/plain,<文本数据>
data:text/html,<HTML代码>
data:text/html;base64,<base64编码的HTML代码>
data:text/css,<CSS代码>
data:text/css;base64,<base64编码的CSS代码>
data:text/javascript,<Javascript代码>
data:text/javascript;base64,<base64编码的Javascript代码>
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

就不一一介绍了

ghost · 2017-02-15T01:51:56Z

very great!

w311ang · 2020-08-30T06:41:47Z

能不能实现复制

Wscats added the notes label Apr 15, 2016

onelady mentioned this issue Mar 28, 2017

Co & Koa2 #84

Closed

Wscats closed this as completed Aug 22, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Wscats commented Apr 15, 2016 •

edited

ghost commented Feb 15, 2017

w311ang commented Aug 30, 2020

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

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

Comments

Wscats commented Apr 15, 2016 • edited

ghost commented Feb 15, 2017

w311ang commented Aug 30, 2020

Wscats commented Apr 15, 2016 •

edited