Vue專案圖片加密處理，防止直接在網頁上盜圖。

lyc2014發表於2019-12-06
Vue加密網頁

應用場景

如果我們不希望網頁上的圖片被使用者右鍵儲存或者從下載資源裡面找到儲存下來輕易盜圖，可以先將圖片加密，前端獲取圖片資源後再解密渲染。一般這個檔案加密過程是後端實現的，然後我們前端按照定好的規則解密。但是考慮到前端專案中一些靜態圖片可能也需要加密，所以前端也可以用webpack這些打包工具實現這個加密過程（針對Vue專案使用）。

實現思路

加密過程： 按一定規則打亂圖片的二進位制資料。

解密過程： ajax獲取圖片，設定responseType = "arraybuffer", 對二進位制資料處理好之後再渲染。

打包過程實現圖片加密，所以可以開發一個webpack的loader進行加密處理, 解密過程可以編寫一個Vue的自定義執行，在需要解密的圖片上加上指令即可，期望效果是：無法右鍵儲存、開啟圖片（提示資源不存在），下載下來的源資源是加密過的（裂開的圖片）

實現過程

demo。

工具倉庫

使用方法

提示：為了方便呼叫，實現的img-hide上也掛載瞭解密方法，解密方法直接從下載的img-hide中引入即可。

Install

npm install --save-dev img-hide

Options

path

Type: String

設定需要加密圖片的路徑，預設為外層rules的匹配路徑（即：若都使用預設值，則加密全部圖片）

whiteList

Type: 'Array'

除了指定加密路徑，還可以進一步設定需要加密的圖片名稱(包括.png等字尾名)

Usage

vue.cli2

  • vue.cli2腳手架中使用, 打包配置中新增方式
const path = require('path')
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|webp)(\?.*)?$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10
            }
          },
          {
            loader: 'img-hide',
            options: {
              path: path.resolve(__dirname, './test'),  //  指定加密路徑（絕對路徑）
              whiteList: ['logo.png'] //  指定路徑下的白名單
            }
          }
        ],
      },
    ],
  }
}
複製程式碼

vue.cli3

  • vue.cli3腳手架中使用，在vue.config.js中新增如下配置。
const path = require('path')
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('img-hide').loader('img-hide')
        .options({
          path: path.resolve(__dirname, './src/images'), // 指定加密路徑（絕對路徑）
          whiteList: ['icon1.png']  //  指定路徑下的白名單
        }).end()
      .use('url-loader').loader('url-loader').tap(options => Object.assign(options, { limit: 10 }))
  }
}
複製程式碼

附屬上解密方法

為了方便使用，解密方法直接掛在了這個loader物件上了，使用方法如下。

//  main.js
import { vueDecode } from 'img-hide'

Vue.use(vueDecode)

複製程式碼

在vue中，需要解密的圖片加上指令(注意：不要在非加密圖片使用此指令)

注意：解密事件只會在img插入父節點時呼叫一次，所以請不要對src使用v-bind指令。

<img src="./images/test.png" v-decode-img>
複製程式碼

相關文章