快捷導(dǎo)航

Vue關(guān)于訪問外鏈?zhǔn)〉膯栴}

更新時(shí)間：2023年03月11日 08:40:08 作者：YaoZhanHui

這篇文章主要介紹了Vue關(guān)于訪問外鏈?zhǔn)〉膯栴}，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue訪問外鏈?zhǔn)?/h2>
在公司項(xiàng)目中，點(diǎn)擊跳轉(zhuǎn)外部鏈接時(shí)，發(fā)現(xiàn)跳轉(zhuǎn)失敗，但是在瀏覽器訪問可以直接訪問，抱著求知欲的目的，查找資料得出一下結(jié)果，作為知識(shí)儲(chǔ)備吧。

軍工項(xiàng)目登錄跳轉(zhuǎn)到另一個(gè)項(xiàng)目的登錄中，window.open 可以直接打開百度，但是打不開要跳轉(zhuǎn)的登錄頁，但是直接在瀏覽器中可以直接訪問，猜想是否是對方對服務(wù)做了安全方面的處理或者限制，抱著這方面的考慮查找資料。

一個(gè)涉及安全和隱私的https請求頭中的字段—referrer，對方項(xiàng)目服務(wù)器為了防止別人盜取資源做了限制，一般打開頁面會(huì)有一個(gè)referrer，如果是從其他頁面跳轉(zhuǎn)過去，這個(gè)referrer會(huì)帶著原來的頁面地址，服務(wù)器檢測到之后就會(huì)限制訪問，將其設(shè)置為no-referrer就不會(huì)帶原頁面的地址，服務(wù)器會(huì)認(rèn)為是直接在瀏覽器中輸入地址打開，就不會(huì)限制了。

解決方案：在index.html 中添加 <meta name="referrer" content="no-referrer"/>

什么是 referrer ？

當(dāng)前頁訪問跳轉(zhuǎn)到目標(biāo)頁，目標(biāo)頁會(huì)在headers中收到 referrer 信息，referrer里面存儲(chǔ)的是用戶從哪個(gè)頁面跳轉(zhuǎn)到目標(biāo)頁的信息，也就是說發(fā)起請求的時(shí)候，請求頭中帶有從哪個(gè)頁面來的信息，網(wǎng)站會(huì)將引用地址記錄以便追蹤用戶的動(dòng)態(tài)或進(jìn)行統(tǒng)計(jì)，大部分分析軟件也都會(huì)處理這個(gè)信息。一般會(huì)從兩方面去考慮：隱私和安全。

隱私

referrer 會(huì)攜帶url過去，里面有可能有一些用戶數(shù)據(jù)信息或者敏感信息有可能會(huì)暴露出去。

安全

referrer 為了安全考慮不把一些用戶信息或者敏感信息暴露出去，我們就要使用 Referrer-Policy來規(guī)范 referrer 可以返回什么樣的內(nèi)容

1、通過Referrer-Policy HTTP header設(shè)置 Referrer-Policy: origin

2、通過<meta>元素改變Referrer Policy，直接修改名為referrer的內(nèi)容 <meta name="referrer" content="no-referrer"/>

3、通過給 <a>, <area>, <img>, <iframe>, 或者<link>元素設(shè)置referrerpolicy="origin"屬性

4、通過給 <a>, <area>, <img>, <iframe>, 或者<link> 元素設(shè)置 rel="noreferrer"屬性不顯示信息

備注：只有在https協(xié)議中，才有referrer的存在。

Vue打開一個(gè)外部連接

記錄一個(gè)開發(fā)中不太起眼的bug

在vue項(xiàng)目中，許多跳轉(zhuǎn)api都只是會(huì)更改uri，即域名后的地址，一個(gè)比較直觀的思路是location.href，但直接調(diào)用只是會(huì)在當(dāng)前地址下追加一個(gè)url，所以正確的做法是

? <el-table-column prop="gaintestMp4" label="步態(tài)視頻" >
? ? ? <template #default="scope">
? ? ? ?<el-button ?v-show="scope.row.gaintestMp4" @click="handleMp4(scope.row.gaintestMp4)"></el-button>
? ? ? ?
? ? ? </template>
? ? </el-table-column>
?
?
const handleMp4=(mp4:string):void=>{
? location.href=`http://${mp4}`
? // console.log("?? ~ file: backstage.vue:54 ~ handleMp4 ~ mp4", mp4)
}