整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
幾期給大家推薦了安卓、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都是交互性的因此我們可以很清楚自己每一步都做了什么。但是，請認真閱讀并理解代碼中的一些細節部分，我相信還有很多可以提升的地方。最后附上所有你可能需要的文件。
在上一篇《在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頁面中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>標簽實現文本內鏈接——零基礎自學網頁制作
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
