整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

完全免费!办公必备的小工具百宝箱-万彩办公大师

完全免费!办公必备的小工具百宝箱-万彩办公大师

几期给大家推荐了安卓、iPhone手机端的4款工具箱类APP,以及两个在线的工具箱网站;

今天要给大家推荐的是一款Windows的办公必备的小工具百宝箱——

万彩办公大师

万彩办公大师是一款免费办公工具软件超级套装,几乎可以满足日常各种办公工具需求。

它内置了70多款强大的,无任何广告及插件的绿色办公组件,如PDF工具集、文档/音视频/图片转换工具集、OCR工具集、屏幕录制工具集、图片处理工具集、文件处理工具集等。

所有的套装工具不需要安装,直接可以绿色加载启动,省去了用户为安装各种办公软件而寻找工具、安装及卸载的麻烦。

公众号后台回复 “ 506 ” ,获取万彩办公大师的软件安装包。

译:scriptkid

预估稿费:260RMB(不服你也来投稿啊!)

投稿方式:发送邮件至linwei#360.cn,或登陆网页版在线投稿

前言


今天我们将一起来围观下Microsoft Edge存在的一些设计上的问题——当这些问题组合在一起时就会形成通用跨站脚本攻击(UXSS)。如果你想弄明白这个漏洞,但你又恰好不是安全研究员的话,你可以尝试这么理解:当你访问一个恶意站点时,攻击者可以获取你的cookie、更改你所看见的页面内容以及窃取你的个人信息等。除此之外,因为Microsoft Edge使用受保护的内部资源来实现某些特殊功能,攻击者也有获取这些资源和更改Edge配置的潜在可能。

此处提供两个演示视频(稍后更新):导出bing的cookies和篡改nature.com显示内容。需要注意的是,这两个网站本身是不存在问题的,漏洞纯粹是由Microsoft Edge浏览器导致的。接下来我们一起看看这是怎么做到的。

Domainless World


about:blank是一条很特殊的URL——经常让人为其所属域名感到困惑。我们来思考下以下问题:假如我们当前URL地址是www.magicmac.com/dom/index.html,那么毫无疑问document.domain的值应该为www.magicmac.com,但是如果把地址换成了about:blank呢?这就要看情况了。理论上来说,document.domain应该是取决于其referer的值。举个例子:我们在www.magicmac.com下点击了about:blank的链接,这时about:blank将使用www.magicmac.com作为其域名。

接着再举个iframe的src值显示指向about:blank或者为空时的例子:

因此,虽然从goodfellas.com加载的about:blank跟从evil.com加载的看起来很像(URL是一样的),但是它们却无法互相访问,因为它们的document.domain是不一样的。

那么问题来了,我们直接在地址栏中输入的about:blank的对应域名是啥?这是个很关键的问题,所以我将在DevTools中放大一点让你看得更清楚。

从图片可以看出,document.domain值是一个特殊的值——空值,接下来我们姑且称document.domain是空值的为"domainless",同时,称不是空值的为"domained",接下来的部分将是本文最重要的部分。

domainless的about:blank将可以访问任意domained的about:blank


换句话说就是,domainless的about:blank可以无视任何限制对domained的about:blank进行访问,下面我们通过控制台快速添加个指向bing.com的iframe进行简单演示。

1<p>document.body.innerHTML='<iframe src="http://www.bing.com/images/search?q=microsoft+edge"></iframe>'<br></p>

现在我们成功在顶层的domainless blank中嵌入了一个指向bing.com的frame,不过我们的目标是找到一个bing内部的blank iframe,因为我们说的是domainless blank(这里是主窗口)能够对domained blank(这里是bing.com中的指向blank的iframe)进行存取。当然,在这个例子中我们很容易就能做到,因为bing.com中已经存在了blank iframes。不管怎样,我们都动手尝试下。正常情况下,下面的命令即使是在debugger中依旧会抛出access denied的错误,但是因为这里的top是domainless,所以我们这里成功执行了,见下图。

1<p>window[0][0].location.href="javascript:alert(parent.document.domain)";<br></p>

当然,你可能会觉得这没什么,因为我们是在DevTools中做到的。但是,我却认为这是最重要的,因为如果我们抓住了这个要点,那么寻找新的UXSS漏洞将在一定程度上变得简单。现在,我们只要找到能够对domainless blank(通常是about:blank,但我们也可以使用其他方式)进行存取的方式,我们就找到了UXSS漏洞。前面之所以会在DevTools下进行是因为要确保能够完全理解我们所做的一切,而事实上我们并不需要DevTools!

无需DevTools的独立POC


接下来我们就开始吧!我们需要找到一种创建在常规web页面中创建可访问的domainless站点,最简单的就是通过data:URI来取代about:blank。这里需要注意的是,当我们在iframe里面加载data:URI时,它的domain值将与referer的一致(跟我们前面提到的about:blank一样),而如果我们尝试在最顶层加载data:URI,Edge将会拒绝访问并扔给我们一个错误页。

不过,我们有一些小技巧可以用来获取domainless的data:URI,这里我们将通过一个非常简单的Flash来实现。事实上,我从2005年开始就在使用这个Flash,所做的仅仅是通过请求字符串来设置URL。

1<p><iframe src="geturl.swf?target=_top&redir=data:,[html/script goes here]"></iframe><br></p>

看,就是这么简单!只需要将你需要加载的URL添加到参数redir后面就行了。在这个例子中,我们使用的是data:URI,当然,为了欺骗Edge,我们需要在iframe内部加载swf文件,否则会出现错误。顺便提一下,我们还可以使用其他方式来达到同样的目的,我们之所以使用这个方法纯粹是因为这是我们发现的第一种方式。Adobe的小伙伴多半会通过将data:uri加入黑名单来帮助Edge的小伙伴解决这个bug,然而,我们还可以通过不需要flash文件的其他多种途径来达到同样的目的。

由于我们现在处于domainless窗口下,我们可以注入一个指向bing.com的iframe,而Edge却无法正确渲染页面元素。如果我们尝试使用createElement/insertAdjacentHtml等方法,Edge将生成一个无法使用的iframe,就如一辆汽车没有发动机一样。为了解决这个问题,我们将使用document.write重写来强制使浏览器重新渲染整个页面。由于我们是处于domainless状态的URL下,document.write将会使我们保持在相同的domain下。

1<p>document.write('<iframe src="http://www.bing.com/images"></iframe>');<br></p>

Perfect!现在我们可以对bing的blank iframe进行访问了,但是要记住我们是非常幸运的,因为不是所有的站点都会自带blank iframe。

1<p>window[0][0].location.href="javascript:alert(parent.document.cookie)";<br></p>

Owning non-cooperative sites


你可能会觉得是因为bing为我们提供了许多的blank iframe所以才能那么轻松地取得成功,好吧,没错,大部分网站正常情况下是不会为我们放置好blank iframe的,所以我们需要再进一步深入。回头再看下我们前面提到的第二步,假设我们的iframe正确渲染但是指向了nature.com(nature不存在blank iframe),这时如果我们尝试去修改iframe的location,Edge将会拒绝访问并新开一个窗口来代替,也就是说,执行以下内容是没有什么卵用的。

1<p>// We are inside a domainless data: so Edge will open a new<br>// window instead of changing nature-iframe's location<br>window[0][0].location.href="about:blank";<br></p>

上述代码并不起作用,也许存在一些方式可以绕过,但是我已经懒得再去尝试了。这确实是一个问题,但是我们可以通过新开一个带正常URL的窗口来解决,以下为具体步骤:

1、打开一个带指向nature.com的frame的新窗口

2、修改nature的内部iframe的location为about:blank,这样我们就可以对其命名,没错,就是要给iframe命名

3、为指向about:blank的iframe命名,这样我们的新开窗口就可以通过window.open来对其进行访问。不要忘了,我们现在处于一个正常的URL内部的窗口中,真正能做到的是我们的新开页。我们将通过如window.name=“DAVID_COPPERFIELD”来对iframe进行命名

4、现在我们应该修改nature的location为about:blank了。我们将通过meta-refresh来修改location,这个小技巧用于确保父层的domain被修改为about:blank

5、最后就是告诉新开页一切准备就绪可以行动了,就像这样:

1<p>window.open(“javascript:alert(document.domain)”, “DAVID_COPPERFIELD”);<br></p>

总结


我们又一次成功了!POC都是交互性的因此我们可以很清楚自己每一步都做了什么。但是,请认真阅读并理解代码中的一些细节部分,我相信还有很多可以提升的地方。最后附上所有你可能需要的文件。

页面中嵌入PDF文件

在上一篇《在html页面中嵌入其他页面的方法——零基础自学网页制作》(结尾见目录)中我们学习了如何在页面中嵌入其他页面的操作。今天我们来嵌入一个pdf文件。

其实使用<iframe>标签也可以导入pdf标签,就是把pdf文件路径赋予src属性就可以了。

示例代码如下:

<body>
  <iframe width="100%" height="900px" src="pdf/人工智能游戏编程真言.pdf"></iframe>
</body>

页面效果如下:

考虑到pdf的版权问题就不给大家上传云盘了,大家可以找其他pdf文件代替即可。如果您对这本书感兴趣可以关注并私信我。

除此之外再给大家介绍两个新标签。

一个是<embed/>标签,一个是<object></object>标签。

<embed/>标签和<img/>标签类似,没有结尾标签,修改src属性即可显示pdf文件。

<object>标签与<iframe>标签类似,有开始有结尾,不同的是,指定文件路径的属性不是src而是data。

设置长宽的操作都一样,示例代码如下:

<body>
  <iframe width="100%" height="300px" src="pdf/人工智能游戏编程真言.pdf"></iframe>
  <embed width="100%" height="300px" src="pdf/人工智能游戏编程真言.pdf"/>
  <object width="100%" height="300px" data="pdf/人工智能游戏编程真言.pdf"></object>
</body>

页面效果如下:

实际上,<embed>和<object>也可以显示页面,示例代码如下:

<body>
  <iframe width="100%" height="300px" src="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin"></iframe> 
  <embed width="100%" height="300px" src="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin"/>
  <object width="100%" height="300px" data="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin"></object>
</body>

页面显示效果如下:

除了页面和pdf文件外,这三个标签均可以嵌入图片,示例代码如下:

<body>
  <iframe width="100%" height="300px" src="image1.jpg"></iframe>
  <embed width="100%" height="300px" src="image1.jpg"/>
  <object width="100%" height="300px" data="image1.jpg"></object>
</body>

页面效果如下:

观察一下还是挺有趣的,除了iframe外,其他两个标签的图片长宽均继承了它们自身的长宽比例。这里只是为了给大家做测试,显示图片的话还是尽量使用<img>标签。

说到<embed>和<object>这两个标签,在功能上和<iframe>非常相似,但是相比较而言,<iframe>标签更加灵活。在我之前做的测试中,在不经过特殊设置的情况下,iframe可以显示MP4视频文件,而另外两个不能。实际上,html5之后视频统一由<video>标签来打开,具体操作我们在后面的内容中为大家介绍。

<embed> <object>标签可以在页面中嵌入.swf文件,不过这个类型的文件目前在手机上已经很少用到了,电脑上也不是很常见。

object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持,这一点并未实现。

因此相比较而言,<embed> <object>两个标签作用不是很大,大部分功能也被其他标签取代。

在笔者的产业实践过程中也很少用到这两个标签,这里也就作为一个扩充知识介绍给大家吧。

实际上我本人对这两个标签和<iframe>标签的具体区别以及背后的原因知道的也不多。

如果有小伙伴对<embed>和<object>的历史和特性有了解的话,请在留言区赐教!在下不胜感激!

喜欢的小伙伴请关注和转发,阅读中遇到任何问题请给我留言,如有疏漏或错误欢迎大家斧正,不胜感激!

HTML完整学习目录

HTML序章(学习目的、对象、基本概念)——零基础自学网页制作

HTML是什么?——零基础自学网页制作

第一个HTML页面如何写?——零基础自学网页制作

HTML页面中head标签有啥用?——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2(路径详解)——零基础自学网页制作

使用HTML添加表格1(基本元素)——零基础自学网页制作

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

使用HTML添加表格3(间距与颜色)——零基础自学网页制作

使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作

HTML表单4(form的action、method属性)——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作