您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“JavaScript是怎么驗(yàn)證URL的”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“JavaScript是怎么驗(yàn)證URL的”吧!
URL驗(yàn)證的存在是為了加強(qiáng)安全,防止可能存在的漏洞,并消除運(yùn)行代碼時(shí)產(chǎn)生的任何錯(cuò)誤的機(jī)會(huì)。但是我們應(yīng)該在什么時(shí)候使用URL驗(yàn)證,在這個(gè)過程中我們要驗(yàn)證什么呢?我們應(yīng)該在所有必須識(shí)別和驗(yàn)證諸如網(wǎng)頁、圖片、gif和視頻等資源的軟件中實(shí)施URL驗(yàn)證。
一個(gè)典型的URL包括多個(gè)片段,比如協(xié)議、域名、主機(jī)名、資源名、URL源、端口等等。這些用來告訴瀏覽器如何追蹤指定的資源。我們可以以不同的方式來驗(yàn)證URL:
使用正則字面量和構(gòu)造函數(shù)
URL構(gòu)造函數(shù)
isValidURL
方法
Input元素
Anchor標(biāo)簽方法
一個(gè)典型的URL驗(yàn)證方案接收來自用戶的輸入,然后對其進(jìn)行解析,以識(shí)別其各個(gè)組成部分。驗(yàn)證方案可以確保所有的URL組件符合互聯(lián)網(wǎng)標(biāo)準(zhǔn)。例如,如果需要,它可以檢查URL是否使用安全協(xié)議。
主機(jī)名驗(yàn)證首先是將主機(jī)名分成獨(dú)立的標(biāo)簽,以確保它們符合頂級(jí)域名規(guī)范。一個(gè)典型的主機(jī)名由至少兩個(gè)用點(diǎn)分隔的標(biāo)簽組成。例如,www.snyk.com 有 "www"、"snyk"和 "com"的標(biāo)簽。每個(gè)標(biāo)簽只能由一個(gè)字母數(shù)字字符或一個(gè)連字符組成,無論大小寫。然后,驗(yàn)證方案可以確保主機(jī)名與URL的允許列表相匹配,以確保只允許指定的URL,并且允許的URL不會(huì)被錯(cuò)誤地取消資格。
默認(rèn)情況下,URL中使用的大多數(shù)資源的路徑都是允許的。然而,端口只能在1到65536的范圍內(nèi)。任何超出這個(gè)范圍的東西都應(yīng)該拋出一個(gè)錯(cuò)誤。我們還可以檢查數(shù)字IP地址,以判斷它是一個(gè)IPV4地址還是IPV6地址。
最后,我們也可以檢查URL的用戶名和密碼。這個(gè)功能有助于遵守公司政策和憑證保護(hù)。
現(xiàn)在,你已經(jīng)有了這些基礎(chǔ)知識(shí),讓我們來看看使用javascript的URL驗(yàn)證吧。
在JavaScript中,執(zhí)行URL驗(yàn)證最簡單的方式是使用new URL
構(gòu)造函數(shù)。除此之外,它還得到了Node.js運(yùn)行時(shí)和大多數(shù)瀏覽器的支持。
基本語法如下:
new URL (url) new URL (url , base)
如果提供相對URL,JavaScript只需要base
元素。如果不提供相對URL,默認(rèn)為undefined
。另外,如果提供一個(gè)具有絕對URL的base
元素,JavaScript會(huì)忽略base
元素。
為了驗(yàn)證URL,可以使用以下代碼:
function checkUrl (string) { let givenURL ; try { givenURL = new URL (string); } catch (error) { console.log ("error is", error); return false; } return true; }
該函數(shù)用于檢查URL的有效性。當(dāng)URL有效時(shí)返回true
,否則返回false
。
如果你傳遞www.urlcheck.com
給該函數(shù)會(huì)返回false
。因?yàn)樵搮?shù)并不是一個(gè)有效的URL。正確版本應(yīng)該是https://urlcheck.com
。
另一個(gè)例子是mailto:John.Doe@example.com
。這是一個(gè)有效的URL,但如果移除了冒號(hào),JavaScript就不再認(rèn)為它是一個(gè)URL了。
第三個(gè)例子是ftp://
。這不是一個(gè)有效URL,因?yàn)闆]有包含主機(jī)名。如果你添加兩個(gè)點(diǎn)(..
),就會(huì)變成有效URL。因?yàn)辄c(diǎn)會(huì)被認(rèn)為是一個(gè)主機(jī)名,也就是說ftp://..
變成了一個(gè)有效的URL。
重要的是要記住,非常規(guī)的、但完全有效的URL是存在的!它們可能對從事這些工作的開發(fā)人員來說是意外的,但在其他方面是完全合適的。例如,以下兩個(gè)URL都會(huì)返回真值:
new URL("youtube://a.b.c.d");
new URL("a://1.2.3.4@1.2.3.4");
這些例子提醒我們,開發(fā)者應(yīng)該依靠URL驗(yàn)證原則,而不是專注于慣例。
如果你想確保有效的URL包含一些特定的URL方案,你可以使用以下函數(shù):
function checkHttpUrl(string) { let givenURL; try { givenURL = new URL(string); } catch (error) { console.log("error is",error) return false; } return givenURL.protocol === "http:" || givenURL.protocol === "https:"; }
該函數(shù)驗(yàn)證URL,然后檢查URL是否使用HTTP或者HTTPS。在這里,ftp://..
會(huì)被認(rèn)為是無效的,因?yàn)樗话琀TTP或者HTTPS,而http://..
依舊有效。
使用URL
構(gòu)造函數(shù)的一些其他方式包括:
let m = '<https://snyk.io>'; let a = new URL("/", m);
上述示例使用了base
元素。記錄下這個(gè)值,我們就可以得到https://snyk.io/
。
要返回一個(gè)URL對象而不指定base
參數(shù)的話,語法是:
let b = new URL(m);
為了給主機(jī)添加一個(gè)路徑名,我們的代碼結(jié)構(gòu)如下:
let d = new URL('/en-US/docs', b);
存儲(chǔ)在變量d
上的URL是https://snyk.io/en-US/docs
。
URL模塊的另一個(gè)功能是,它實(shí)現(xiàn)了WHATWG URL API,它遵守WHATWG的URL標(biāo)準(zhǔn),供瀏覽器使用:
let adr = new URL("<https://snyk.io/en-US/docs>"); let host = adr.host; let path = adr.pathname;
在上面的例子中,我們創(chuàng)建了一個(gè)名為adr
的URL對象。接著,代碼獲取URL的主機(jī)和路徑名,分別是snyk.io
和/en-US/docs
。最后,我們可以將URL和允許列表或者黑名單進(jìn)行對比,確保只有特定URL是被允許的。
另一種驗(yàn)證URL的方法是使用正則表達(dá)式(regex)。我們可以使用Regex來檢查URL是否有效。
使用regex進(jìn)行URL驗(yàn)證的JavaScript語法是:
function isValidURL(string) { var res = string.match(/(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9- ]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9] \.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|w ww\.[a-zA-Z0-9]+\.[^\s]{2,})/gi); return (res !== null); };
來測試一些URL:
var tc1 = "<http://helloworld.com>" console.log(isValidURL(tc1));
regex定義的URL語法檢查URL是否以http://
或https://
或子域開始,以及是否包含域名。控制臺(tái)上的語句結(jié)果是true
,因?yàn)樗裱擞蓃egex定義的URL語法。相反,下面的語句將返回一個(gè)false
,因?yàn)樗鼪]有以任何允許的方案或子域開始,也不包含域名:
var tc4 = "helloWorld"; console.log (isValidURL(tc4));
上面的正則表達(dá)式相對簡單,但仍然難以駕馭。這也是一個(gè)容易出錯(cuò)的方法,因?yàn)橐粋€(gè)正則表達(dá)式不能充分處理驗(yàn)證URL的規(guī)則。它最多只能做到匹配有效的URL。此外,當(dāng)一個(gè)正則表達(dá)式要么包含復(fù)雜的驗(yàn)證邏輯,要么收到冗長的輸入字符串時(shí),執(zhí)行驗(yàn)證檢查就變得很耗時(shí)。
為了滿足定義的正則表達(dá)式驗(yàn)證檢查,瀏覽器必須在輸入字符串中進(jìn)行數(shù)以百萬計(jì)的回溯。如此多的回溯檢查可能會(huì)導(dǎo)致"災(zāi)難性的回溯",這種現(xiàn)象是復(fù)雜的正則表達(dá)式會(huì)凍結(jié)瀏覽器或使CPU核心進(jìn)程爆滿。
正如SSRF被添加到新的OWASP Top 10中所證明的那樣,URL驗(yàn)證對于JavaScript應(yīng)用程序的安全性已經(jīng)變得越來越關(guān)鍵。幸運(yùn)的是,我們可以通過在服務(wù)器端驗(yàn)證URL來幫助緩解此類攻擊。此外,根據(jù)驗(yàn)證和處理URL的首選方式來使用new URL
函數(shù)會(huì)非常有益。
在看到new URL
函數(shù)的一些使用案例后,我們學(xué)習(xí)了如何用正則表達(dá)式驗(yàn)證一個(gè)URL--并看到了為什么這種方法很麻煩而且容易出錯(cuò)。
URL的安全風(fēng)險(xiǎn)與其說是關(guān)于其有效性,不如說是關(guān)于危險(xiǎn)的URL方案。因此,我們需要確保讓服務(wù)器端的應(yīng)用程序進(jìn)行驗(yàn)證。攻擊者可以繞過客戶端的驗(yàn)證機(jī)制,所以僅僅依靠它并不是解決辦法。
到此,相信大家對“JavaScript是怎么驗(yàn)證URL的”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。