需求:我們需要在頁面添加一個(gè)鏈接猾瘸,此鏈接為動(dòng)態(tài)配置的界赔。
之前的代碼這樣寫
<a :href="url" target="_blank" rel="noopener noreferrer">{{url}}</a>
這些寫如果url地址是 www.baidu.com。然后在本地環(huán)境會(huì)正常跳轉(zhuǎn)牵触,發(fā)布后正式環(huán)境就會(huì)出現(xiàn)在url地址前自動(dòng)加上正式環(huán)境域名淮悼,導(dǎo)致404錯(cuò)誤。
修改后代碼顯示:
<a :href="getURL(url)" target="_blank" rel="noopener noreferrer">{{url}}</a>
我們需要從頭查看一下:具體可查看此處W3C
<a> 標(biāo)簽的 href 屬性用于指定超鏈接目標(biāo)的 URL揽思。
href 屬性的值可以是任何有效文檔的相對(duì)或絕對(duì) URL袜腥,包括片段標(biāo)識(shí)符和 JavaScript 代碼段。如果用戶選擇了 <a> 標(biāo)簽中的內(nèi)容钉汗,那么瀏覽器會(huì)嘗試檢索并顯示 href 屬性指定的 URL 所表示的文檔羹令,或者執(zhí)行 JavaScript 表達(dá)式、方法和函數(shù)的列表损痰。
如果沒有http:\ 那么HTML中a標(biāo)簽href中會(huì)自動(dòng)補(bǔ)上你的域名或者項(xiàng)目名福侈,因?yàn)樗R(shí)別url是不完全的路徑。
主要是為了確保添加
getURL(url){
let strURL = "";
if(url.substr(0,7).toLowerCase() == "http://" || url.substr(0,8).toLowerCase() == "https://"){
strURL = url;
}else{
strURL = "http://" + url;
}
return strURL;
}
這樣就解決跳轉(zhuǎn)的問題了卢未,那么 rel="noopener noreferrer" 只要是肪凛,如果a標(biāo)簽屬性target值為_blank,那么為rel屬性添加上此值“noopener noreferrer”來防止釣魚網(wǎng)站尝丐,添加上此屬性 window.opener就不會(huì)獲取到值显拜。安全意識(shí)問題。