如何在 WordPress 中安全地使用矢量圖像

已發表: 2019-06-12

您可以將數十種圖像文件類型用於您的媒體。 開箱即用，WordPress 支持大多數更流行的圖像文件類型，包括.jpeg 、 .png 、 .gif等。 但是，它不包括對矢量圖像的任何支持。

過去，我們討論瞭如何創建可縮放矢量圖形 (SVG) 以及它們的好處。 在本文中，我們將再次討論 SVG 的概念，為什麼以錯誤的方式使用它們可能不安全，以及如何在不損害您的網站的情況下實際實施它們。

讓我們開始工作吧！

訂閱我們的 YouTube 頻道

SVG 簡介

SVG 是不是基於像素而是基於矢量的圖像，正如您從名稱中猜到的那樣。 如果您嘗試使用文本編輯器打開常規圖像文件，您會看到相關的亂碼。 但是，如果您嘗試打開一個 SVG，您可能會看到如下代碼（取自我們關於 SVG 的第一篇文章）： 

<svg viewBox='0 0 105 93' xmlns='http://www.w3.org/2000/svg'></pre>
<path d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='#ED1C24'/>
</svg>

簡而言之，這些是組成 Adob​​e 徽標表示的一系列矢量，其中包含一些顏色：

Adobe 徽標。

SVG 是獨一無二的，因為它們在任何尺寸下都能保持其質量（即可縮放），並且無論使用何種尺寸，看起來仍然完美無缺。 這使其成為一些特定用例的理想文件類型：

  • 您經常希望在不同平台上重複使用的徽標。
  • 您需要根據上下文縮放的圖標。
  • 您想要使用級聯樣式表 (CSS) 製作動畫的圖像。

從技術上講，有三種方法可以創建 SVG。 您可以自己編寫代碼，除非您是機器，否則這是不切實際的。 其他方法是從頭開始繪製 SVG，或獲取現有圖像並使用 Illustrator 或 Sketch 等軟件將其導出為 SVG。

儘管有優點，但使用 SVG 有兩個缺點。 首先，它們不適用於復雜的圖形。 例如，一張普通的照片需要數百萬個矢量來合成，這將構成一個巨大的 SVG 文件。 使用 SVG 的第二個缺點與安全相關——我們將在下一節中討論這一點。

為什麼使用 SVG 會影響您網站的安全

儘管我們通常將 SVG 稱為圖像文件，但將它們稱為“文檔”會更準確。 畢竟，您可以使用文本編輯器輕鬆打開、閱讀和修改 SVG 文件，這類似於常規文檔。

問題在於能夠將 JavaScript 與矢量信息一起添加。 從理論上講，這意味著如果有人上傳包含惡意代碼的文件，在您的網站上實現 SVG 支持可能會讓您面臨攻擊。

對 WordPress 的 SVG 支持已經討論了六年多，這是一個非常令人擔憂的問題：

六年前的 Trac 車票。

雖然您不必查看整個票證，但要點是，除非有一種方法可以確保您上傳到 WordPress 的 SVG 代碼是安全的，但實施該功能可能會帶來更多問題而不是好處。

現在，您可以使用多種工具來確保您的 SVG 安全，稱為“消毒劑”。 但是，目前似乎沒有好的方法可以將其功能實現到 WordPress 中。

總的來說，在實踐中為 WordPress 添加 SVG 支持相對簡單。 真正的困難在於這樣做的方式不會讓您的網站容易受到潛在攻擊。

在 WordPress 中安全使用矢量圖像的 2 種方法

在本節中，我們將探索在 WordPress 中安全使用 SVG 的手動和基於插件的方法。 然後，您就可以根據自己的需要選擇最佳選項。 讓我們開始吧！

1. 手動添加 SVG 支持並清理您的代碼

您可以在幾分鐘內使用一段代碼為 WordPress 添加 SVG 支持。 但是，這會讓您對我們之前討論過的潛在安全問題持開放態度。 更安全的 SVG 實現方法包括以下步驟：

  1. 通過修改functions.php文件啟用SVG 支持。
  2. 限制您想要的用戶角色將.svg文件上傳到 WordPress。
  3. 在上傳之前清理每個 SVG 文件。

總的來說，第一步和第二步並不難完成。 第一項任務是通過文件傳輸協議 (FTP) 訪問您的網站並導航到您的 WordPress 根文件夾。 在裡面，查找您的functions.php文件，打開它，並添加以下代碼（由 CodePen 和 CSS Tricks 的 Chris Coyier 提供）： 

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }

  $filetype = wp_check_filetype( $filename, $mimes );

  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];

}, 10, 4 );

function cc_mime_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

function fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'fix_svg' );

這實現了兩個功能——它使您能夠將 SVG 文件上傳到 WordPress，並在您的媒體庫中將它們可視化。 添加代碼後，保存對functions.php文件的更改並關閉它。

現在事情變得有點棘手，因為我們需要防止我們不信任的用戶上傳損壞的 SVG。 例如，您可能信任您的編輯和作者上傳正確的文件，而不是您的貢獻者。 有兩種方法可以解決這個問題：

  1. 創建對媒體庫具有有限訪問權限或無訪問權限的自定義用戶角色。
  2. 使用插件（例如 WP Upload Restriction）來限制每個用戶角色可以上傳的文件類型。

這兩種方法確實有他們的缺點，這是原因手動SVG實現可能很麻煩之一。 然而，一旦你解決，以確保可以上傳惡意SVG沒有一個方法，你還需要確保你不要錯誤地這樣做了。

理想情況下，您將通過清理工具運行您上傳到網站的每個 SVG，然後再執行此操作。 這將帶走您的文件，確保它不包含任何令人討厭的內容，如果包含，則將其刪除。 最終，這為您留下了一個乾淨的 SVG 文件，您可以最終上傳到 WordPress。

2. 使用安全 SVG 插件

通過上述方法，我們想向您展示安全 SVG 實現的複雜程度。 這樣您就可以正確理解 Safe SVG 插件的功能。

安全 SVG 插件。

簡而言之，這個插件解決了我們之前列出的所有問題，包括：

  • 使您能夠首先上傳 SVG。
  • 確保您可以在媒體庫中看到您的 SVG。
  • 清理您上傳的每個 SVG 的代碼，以防止出現安全問題。

這幾乎是一種即插即用的插件，它絕對是在 WordPress 中安全 SVG 實現的最直接方法。 如果您打算使用 SVG，我們建議您嘗試一下。

如何使用 CSS 和插件製作 SVG 動畫

如果您經歷了在 WordPress 中實現 SVG 的所有麻煩（取決於您使用的} 方法），您可能希望獲得最大的收益。 這意味著如果情況需要，可以使用 CSS 為您的 SVG 設置動畫。 您可以通過兩種方式來完成這個過程，我們在過去已經介紹過：

  1. 像處理任何其他元素一樣，使用 CSS 手動為 SVG 設置動畫。
  2. 使用 SVGator 等工具來幫助您生成 SVG 並為其設置動畫。

如果您願意進行一些實驗，那麼這里和那裡的一些動畫確實可以將您網站的用戶體驗提升一個檔次。 更重要的是，使用 SVG 和 CSS 來實現這一點比添加視頻或 GIF 好得多，尤其是對於移動設備。

結論

SVG 是許多情況下的絕佳選擇。 舉個例子，由於它們的可擴展性，它們是網站徽標的完美選擇。 一般而言，使用 SVG 可以幫助您設計響應速度更快的網站，就您的用戶而言，這始終是一件好事。

但是，如果您打算向 WordPress 添加 SVG 支持，則需要確保使用一種方法來確保您的站點安全。 有兩種方法推薦：

  1. 手動添加 SVG 支持並清理您的代碼。
  2. 使用安全 SVG 插件。

您對如何在 WordPress 中安全使用 SVG 有任何疑問嗎？ 讓我們在下面的評論部分中討論它們！

文章縮略圖：microtic/shutterstock.com