js同源策略詳解_javascript技巧
本文較詳細的分析了js同源策略。分享給大家供大家參考。具體如下:
概念:同源策略是客戶端腳本(尤其是Javascript)的重要的安全度量標準。它最早出自Netscape Navigator2.0,其目的是防止某個文件或腳本從多個不同來源裝載。
這裡的同源指的是:同協議,同域名和同端口。
精髓:
它的精髓很簡單:它認為自任何網站裝載的可信賴內容是不安全的。當被瀏覽器半信半疑的腳本運行在沙箱時,它們應該只被允許訪問來自同一網站的資源,而不是那些來自其它網站可能懷有惡意的資源。
為什麼要有同源限制?
我們舉例說明:例如一個駭客程序,他利用IFrame把真正的銀行登入頁面嵌到他的頁面上,當你使用真實的用戶名,密碼登入時,他的頁面就可以透過Javascript讀取到你的表單中input的內容,這樣用戶名,密碼就輕鬆到手了。
Ajax應用:
在Ajax應用中這種安全限制被突破。
在普通的Javascript應用程式中,我們可以修改Frame的href,或IFrame的src,以實作GET方式的跨網域提交,但卻無法存取跨網域的Frame/IFrame中的內容。
而Ajax它透過XMLHTTP進行非同步交互,這個物件同樣能夠與遠端的伺服器進行資訊交互,而且更危險的是,XMLHTTP是一個純粹的Javascript對象,這樣的交互過程,是在後台進行的,不被使用者察覺。因此,XMLHTTP其實已經突破了原有的Javascript的安全限制。
如果我們又想利用XMLHTTP的無刷新非同步互動能力,又不願意公然突破Javascript的安全策略,可以選擇的方案就是給XMLHTTP加上嚴格的同源限制。這樣的安全策略,很類似Applet的安全策略。 IFrame的限制還只是不能存取跨域HTMLDOM中的數據,而XMLHTTP則根本上限制了跨域請求的提交。
瀏覽器支援:而IE其實給這個安全策略開了兩個想當然的後門,一個是:他假設你的本地文件,自然清楚將會訪問什麼內容,所以任何你的本地文件訪問外部數據,都不會收到任何的警告。另一個是:當你造訪的網站腳本打算存取跨域的資訊時, 他居然只是彈出一個對話框來提醒你一下。如果一個詐騙網站,採用這樣的手段,提供一個假頁面給你,然後透過XMLHTTP幫你遠端登入真實的銀行伺服器。只要10個用戶裡,有個用戶糊塗一下,點了一個確定。他們的盜取帳號行為,就成功了! 你想想看,這是何等危險的事!
FireFox就不是這樣的做法,缺省的情況下,FireFox根本就不支援跨域的XMLHTTP請求,根本就不給駭客這樣的機會。
避免同種策略:
JSON與動態腳本標記
src="http://yoursiteweb.com/findItinerary?username=sachiko&
reservationNum=1234&output=json&callback=showItinerary" />
當 JavaScript 程式碼動態地插入 <script> 標籤時,瀏覽器會存取 src 屬性中的 URL。這樣會導致將查詢字串中的信息傳送給伺服器。在 清單 1中,所傳遞的是 username 和 reservation 作為名稱值對傳遞。此外,查詢字串還包含向伺服器請求的輸出格式和回呼函數的名稱(即 showItinerary)。 <script> 標記載入後,會執行回呼函數,並透過回呼函數的參數把從服務傳回的資訊傳遞給該回呼函數。 </script>
Ajax代理
Ajax 代理程式是一種應用程式級代理伺服器,用於調解 Web 瀏覽器和伺服器之間的 HTTP 請求和回應。 Ajax 代理程式允許 Web 瀏覽器繞過同源策略,這樣便可以使用 XMLHttpRequest 存取第三方伺服器。要實現這種繞過,有以下兩種方法可供選擇:
用戶端 Web 應用程式知道第三方 URL 並將該 URL 作為 HTTP 請求中的一個請求參數傳遞給 Ajax 代理程式。然後,代理將請求轉發給 [url]www.jb51.net[/url]。注意,可以把代理伺服器的使用隱藏在 Web應用程式開發人員所使用的 Ajax 函式庫的實作中。對於 Web 應用程式開發人員而言,它看起來可能完全不具有同源策略。
客戶端 Web 應用程式不知道第三方 URL,並且嘗試透過 HTTP 存取 Ajax 代理伺服器上的資源。透過一個預先定義的編碼規則,Ajax 代理將 所要求的 URL 轉換為第三方伺服器的 URL 並代表客戶檢索內容。這樣一來,Web 應用程式開發人員看起來就像是和代理伺服器直接進行通訊。
Greasemonkey
Greasemonkey 是一個 Firefox 擴展,它允許使用者動態地對 Web 頁面的樣式和內容進行修改。 Greasemonkey 使用者可以把使用者腳本(user script)檔案與 URL 集合建立關聯。當瀏覽器透過該 URL 集合載入頁面時,便會執行這些腳本。 Greasemonkey 為使用者腳本的 API 提供了額外的許可(與運行在瀏覽器沙盒中的腳本的許可相比較)。
GM_XMLHttpRequest 是其中的一個 API,它本質上就是一個不具有同源策略的 XMLHttpRequest。使用者腳本可以將瀏覽的內建 XMLHttpRequest 替換為 GM_XMLHttpRequest,從而授權 XMLHttpRequest 執行跨網域存取。
GM_XMLHttpRequest 的使用只能透過使用者同意的途徑才能受到保護。也就是說,Greasemonkey 只有在建立新使用者腳本與特定 URL 的集合之間的關聯時才會要求使用者設定。然而,不難想像一些用戶可能會被欺騙,在沒有完全理解其後果時就接受該安裝。
希望本文所述對大家的javascript程式設計有所幫助。

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

如何使用JS和百度地圖實現地圖平移功能百度地圖是一款廣泛使用的地圖服務平台,在Web開發中經常用於展示地理資訊、定位等功能。本文將介紹如何使用JS和百度地圖API實作地圖平移功能,並提供具體的程式碼範例。一、準備工作使用百度地圖API前,首先需要在百度地圖開放平台(http://lbsyun.baidu.com/)上申請一個開發者帳號,並建立一個應用程式。創建完成

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬,在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別,大大縮短了使用者等待時間,提高了使用者體驗;弱勢是:受到模型大小限制,其中準確率也有限。如何在web端使用js實現人臉偵測呢?為了實現Web端人臉識別,需要熟悉相關的程式語言和技術,如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是,由於Web端的計

如何使用PHP和JS創建股票蠟燭圖股票蠟燭圖是股票市場中常見的技術分析圖形,透過繪製股票的開盤價、收盤價、最高價和最低價等數據,幫助投資者更直觀地了解股票的價格波動情形。本文將教你如何使用PHP和JS創建股票蠟燭圖,並附上具體的程式碼範例。一、準備工作在開始之前,我們需要準備以下環境:1.一台運行PHP的伺服器2.一個支援HTML5和Canvas的瀏覽器3

股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟,需要具體程式碼範例隨著網路和科技的快速發展,股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環,其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息,幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的

如何使用JS和百度地圖實現地圖點擊事件處理功能概述:在網路開發中,經常需要使用地圖功能來展示地理位置和地理資訊。而地圖上的點擊事件處理是地圖功能中常用且重要的一環。本文將介紹如何使用JS和百度地圖API來實現地圖的點擊事件處理功能,並給出具體的程式碼範例。步驟:匯入百度地圖的API檔案首先,要在HTML檔案中匯入百度地圖API的文件,可以透過以下程式碼實現:

如何使用JS和百度地圖實現地圖熱力圖功能簡介:隨著互聯網和行動裝置的快速發展,地圖成為了普遍的應用場景。而熱力圖作為一種視覺化的展示方式,能夠幫助我們更直觀地了解數據的分佈。本文將介紹如何使用JS和百度地圖API來實現地圖熱力圖的功能,並提供具體的程式碼範例。準備工作:在開始之前,你需要準備以下事項:一個百度開發者帳號,並建立一個應用,取得到對應的AP

隨著網路金融的快速發展,股票投資已經成為了越來越多人的選擇。而在股票交易中,蠟燭圖是常用的技術分析方法,它能夠顯示股票價格的變動趨勢,幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧,帶領讀者了解如何繪製股票蠟燭圖,並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前,我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人

js和vue的關係:1、JS作為Web開發基石;2、Vue.js作為前端框架的崛起;3、JS與Vue的互補關係;4、JS與Vue的實踐應用。
