WordPress에서 벡터 이미지를 안전하게 사용하는 방법

게시 됨: 2019-06-12

미디어에 사용할 수 있는 이미지 파일 유형은 수십 가지가 있습니다. 기본적으로 WordPress는 .jpeg , .png , .gif 등을 포함하여 널리 사용되는 대부분의 이미지 파일 형식을 지원합니다. 그러나 벡터 이미지에 대한 지원은 포함되지 않습니다.

과거에 우리는 SVG(Scalable Vector Graphics)를 만드는 방법과 그 이점에 대해 이야기했습니다. 이 기사에서는 SVG의 개념을 다시 한 번 살펴보고, 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>

간단히 말해서 Adobe 로고를 구성하는 일련의 벡터로, 색상 대시가 포함되어 있습니다.

어도비 로고.

SVG는 어떤 크기(예: 확장 가능)에서도 품질을 유지하고 사용되는 크기에 관계없이 여전히 완벽하게 보이기 때문에 고유합니다. 따라서 몇 가지 특정 사용 사례에 이상적인 파일 유형이 됩니다.

  • 다양한 플랫폼에서 자주 재사용하고 싶은 로고.
  • 컨텍스트에 따라 크기를 조정할 아이콘입니다.
  • CSS(Cascading Style Sheets)를 사용하여 애니메이션을 적용하려는 이미지.

기술적으로 SVG를 만드는 세 가지 방법이 있습니다. 코드를 직접 작성할 수 있는데, 이는 기계가 아닌 이상 비현실적입니다. 다른 경로는 SVG를 처음부터 그리거나 기존 이미지를 가져 와서 Illustrator 또는 Sketch와 같은 소프트웨어를 사용하여 SVG로 내보내는 것입니다.

장점에도 불구하고 SVG를 사용하는 데에는 두 가지 단점이 있습니다. 첫째, 복잡한 그래픽에는 실용적이지 않습니다. 예를 들어, 일반 사진은 구성하는 데 수백만 개의 벡터가 필요하므로 거대한 SVG 파일이 됩니다. SVG 사용의 두 번째 단점은 안전과 관련되어 있으며 다음 섹션에서 이에 대해 설명합니다.

SVG를 사용하면 웹사이트 보안에 영향을 미칠 수 있는 이유

우리는 보통 SVG를 이미지 파일이라고 부르지만 '문서'라고 부르는 것이 더 정확할 것입니다. 결국 일반 문서와 유사한 텍스트 편집기를 사용하여 SVG 파일을 쉽게 열고 읽고 수정할 수 있습니다.

문제는 벡터 정보와 함께 JavaScript를 추가하는 기능에 있습니다. 이론적으로 이것은 웹사이트에서 SVG 지원을 구현하면 누군가 악성 코드가 포함된 파일을 업로드하는 경우 공격에 노출될 수 있음을 의미합니다.

WordPress에 대한 SVG 지원이 6년 이상 논의되어 왔다는 것은 상당한 우려입니다.

6년 전의 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 파일을 삭제하십시오.

전반적으로 1단계와 2단계는 달성하기 어렵지 않습니다. 첫 번째 작업은 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 업로드 제한과 같은 플러그인을 사용하여 각 사용자 역할이 업로드할 수 있는 파일 유형을 제한합니다.

두 가지 접근법 수동 SVG 구현이 까다로운 얻을 수있는 이유 중 하나입니다 그들의 결점을 가지고 않습니다. 악성 SVG를 업로드 할 수 있습니다 아무도 없도록하는 방법에 정착 그러나, 일단, 당신은 또한 당신이 너무 실수로 그렇게하지 않도록해야합니다.

이상적으로는 그렇게 하기 전에 살균 도구를 통해 웹사이트에 업로드하는 모든 SVG를 실행해야 합니다. 이렇게 하면 파일을 가져와서 잘못된 내용이 없는지 확인하고 있으면 제거합니다. 궁극적으로 WordPress에 업로드할 수 있는 깨끗한 SVG 파일을 남깁니다.

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