快捷導(dǎo)航

JS如何顯示防盜鏈的外站圖片技巧示例

更新時間：2023年09月28日 08:36:22 作者：jsoncode

通常在開發(fā)測試環(huán)節(jié)，一些資源圖片會出現(xiàn)防盜鏈的錯誤提示，本文就通過前端基礎(chǔ)技術(shù)，實現(xiàn)基本的圖片跨站顯示效果，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

防盜鏈的原理

服務(wù)端通過請求頭的request.headers.referer來判斷是否是自己資源白名單的請求來源。
如果referer=null,則無法判斷來源，會正常顯示圖片。

所以基于以上理論，可以給圖片創(chuàng)造一個沒有referer的請求環(huán)境就可以實現(xiàn)了。

解決思路

通過iframe來實現(xiàn)無referer的請求環(huán)境。

實現(xiàn)過程

創(chuàng)建一個base64臨時資源，供iframe調(diào)用
在臨時資源中，請求圖片
圖片加載完成后，修改iframe.height=img.height

源碼

base64臨時資源：

const src = 'http://test.com/test.png';
const html = `data:text/html;base64,${btoa(`<img src="${src}"/>`)}`
<iframe src="html"></iframe>

使用ResizeObserver監(jiān)聽圖片高度

由于當前iframe里只有一個圖片，所以監(jiān)聽body高度即可（body有默認margin，后面需要清除樣式）。(ResizeObserver API)

var ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    const data = {height: entry.contentRect.height};
    window.parent?.postMessage({...data, window: 'parent'}, '*')
    window.top?.postMessage({...data, window: 'top'}, '*')
  }
})
ro.observe(document.body)
window.addEventListener("message", e => {
  if (e.data.window === 'parent') {
      iframe.style.height = e.data.height + 'px'
  }
}, false)

完整代碼 (vue3 setup ts)

<script setup lang="ts">
import { onMounted, ref, withDefaults } from 'vue'
interface IProps {
    src: string;
    id?: string
}
const props = withDefaults(defineProps<IProps>(), {});
const iframe = ref(null)
onMounted(() => {
    if (iframe.value) {
        const html = `<style>body{margin:0;}</style>
        <img src="${props.src}" style="display:block"/>
        <script>
            var ro = new ResizeObserver(entries => {
                for (let entry of entries) {
                    const data = {height: entry.contentRect.height, id: "${props.id || props.src}"};
                    window.parent?.postMessage({...data, window: 'parent'}, '*')
                    window.top?.postMessage({...data, window: 'top'}, '*')
                }
            })
            ro.observe(document.body)
        <\/script>`
        iframe.value.src = `data:text/html;base64,${btoa(html)}`
    }
    window.addEventListener("message", e => {
        if (e.data.window === 'parent' && e.data.id === props.src && iframe.value) {
            iframe.value.style.height = e.data.height + 'px'
        }
    }, false)
})
</script>
<template>
    <iframe ref="iframe" style="display: block; border: 0;"></iframe>
</template>

以上就是JS如何顯示防盜鏈的外站圖片的詳細內(nèi)容，更多關(guān)于JS顯示防盜鏈的外站圖片的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

JavaScript事件Event對象詳解(屬性、方法、自定義事件)
Event對象代表事件的狀態(tài),比如事件在其中發(fā)生的元素、鍵盤按鍵的狀態(tài)、鼠標的位置、鼠標按鈕的狀態(tài),這篇文章主要給大家介紹了關(guān)于JavaScript事件Event對象(屬性、方法、自定義事件)的相關(guān)資料,需要的朋友可以參考下
2024-01-01
這篇文章主要介紹了javascript中的面向?qū)ο缶幊讨R點，對面向?qū)ο缶幊踢M行概述，以及各種方法進行整理，感興趣的小伙伴們可以參考一下
2015-11-11

JavaScript 應(yīng)用類庫代碼

2008-06-06

JavaScript結(jié)合HTML DOM實現(xiàn)聯(lián)動菜單

這篇文章主要為大家詳細介紹了JavaScript結(jié)合HTML DOM實現(xiàn)聯(lián)動菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下

2017-04-04

JS中遞歸函數(shù)

編程語言中，函數(shù)Func(Type a,……)直接或間接調(diào)用函數(shù)本身，則該函數(shù)稱為遞歸函數(shù)。遞歸函數(shù)不能定義為內(nèi)聯(lián)函數(shù)。這篇文章主要介紹了JS中遞歸函數(shù)的相關(guān)資料,需要的朋友可以參考下

2016-06-06