설명
Safe SVG는 워드프레스에서 SVG 업로드를 허용하는 가장 좋은 방법입니다!
SVG 업로드를 허용하는 동시에 사이트에 영향을 미치는 SVG/XML 취약성을 차단하기 위해 위생 처리된 상태인지 확인하는 기능을 제공합니다. 또한 미디어 라이브러리에서 모든 보기에서 업로드한 SVG를 미리 볼 수 있는 기능도 제공합니다.
현재 기능
- 위생 처리된 SVG – 위생 처리되지 않은 파일 업로드를 허용하여 워드프레스 사이트의 보안 허점을 열지 마세요.
- SVGO 최적화 – 업로드 시 SVGO 도구를 통해 SVG를 실행하여 공간을 절약합니다. 이 기능은 기본적으로 비활성화되어 있지만 다음 코드를 추가하여 활성화할 수 있습니다:
add_filter( 'safe_svg_optimizer_enabled', '__return_true' );
- 미디어 라이브러리에서 SVG 보기 – 어떤 SVG가 맞는지 추측하던 시대는 지났으며, 워드프레스 미디어 라이브러리에서 SVG 미리보기를 활성화합니다.
- 업로드할 수 있는 사용자 선택 – 워드프레스 사이트의 특정 사용자로 SVG 업로드를 제한하거나 누구나 업로드할 수 있도록 허용합니다.
처음에는 #24251에 대한 개념 증명이었습니다.
SVG 가공은 다음 라이브러리를 통해 수행됩니다: https://github.com/darylldoyle/svg-sanitizer.
SVG 최적화는 다음 라이브러리를 통해 수행됩니다: https://github.com/svg/svgo.
블록
이 플러그인은 1(을)를 제공합니다.
- Safe SVG Display the SVG icon
설치
워드프레스 디렉토리를 통해 설치하거나 파일을 다운로드하여 압축을 풀고 /wp-content/plugins/
디렉토리에 업로드합니다.
FAQ
-
예,
svg_allowed_attributes
및svg_allowed_tags
필터를 사용하여 이 작업을 수행할 수 있습니다.
이 필터는 반환해야 하는 인수를 하나만 받습니다. 아래 예시를 참조하세요:add_filter( 'svg_allowed_attributes', function ( $attributes ) { // Do what you want here... // This should return an array so add your attributes to // to the $attributes array before returning it. E.G. $attributes[] = 'target'; // This would allow the target="" attribute. return $attributes; } ); add_filter( 'svg_allowed_tags', function ( $tags ) { // Do what you want here... // This should return an array so add your tags to // to the $tags array before returning it. E.G. $tags[] = 'use'; // This would allow the <use> element. return $tags; } );
후기
기여자 & 개발자
변경이력
2.3.1 – 2024-12-05
- 수정: SVG의 사용자 정의 치수를 결정하는 방법에 대한 변경 사항을 되돌립니다(@dkotter, @martinpl, @subfighter3, @smerriman, @gigatyrant, @jeffpaul, @iamdharmesh via #238 제보).
2.3.0 – 2024-11-25
- 추가: 대용량 SVG 파일(약 10MB 이상)을 업로드하고 제대로 살균할 수 있도록 하는 새로운 설정이 추가되었습니다(@kirtangajjar, @faisal-alvi, @darylldoyle, @manojsiddoji, @dkotter via #201 제보).
- 추가: 코드 중복을 줄이기 위해 새로운
get_svg_dimensions
함수를 추가했습니다(@gabriel-glo, @jeremymoore, @darylldoyle, @iamdharmesh, @dkotter via #216 제보). - 변경: PHP 8.3 호환성 문제를 해결하기 위해 0.16.0에서 0.19.0으로
enshrined/svg-sanitize
패키지를 업데이트했습니다(@sksaju, @TylerB24890, @darylldoyle, @rolf-yoast, @faisal-alvi via #214 제보). - 변경:
get_image_tag_override
및one_pixel_fix
메서드에서 이미지 치수가 전달되는 방식을 업데이트합니다(@gabriel-glo, @jeremymoore, @darylldoyle, @iamdharmesh, @dkotter via #216 제보). - 변경: 워드프레스 “테스트 완료” 버전을 6.7로 상향 조정(@colinswinney, @jeffpaul via #232, #233 제보)합니다.
- 변경: 워드프레스 최소 버전을 6.4에서 6.5로 상향 조정(@colinswinney, @jeffpaul를 통해 #232, #233)합니다.
- 변경: 보관된 프로젝트에서 컴포저 개발자 종속성을 제거합니다(@TylerB24890, @szepeviktor, @peterwilsoncc를 통해 #220).
- 수정: Safe SVG 아이콘 블록에 적절한 블록 카테고리를 사용합니다(@kirtangajjar, @fabiankaegy를 통해 #226).
- 보안: 소독기가 해당 파일에서 실행될 수 있는 경우에만 SVG 파일 유형을 업로드하도록 허용합니다(@darylldoyle, @xknown, @dkotter via #228).
- 보안: 5.90.1에서 5.94.0으로
webpack
상향(@dependabot, @peterwilsoncc를 통해 #222로 전달)합니다. - 보안:
ws
7.5.10에서 8.18.0으로, 1.15.0에서 1.16.2로, 4.19.2에서 4.21.0으로serve-static
,express
범프(@dependabot, @Sidsector9, @faisal-alvi via #227, #230, #234 제보).
2.2.6 – 2024-08-28
- 변경: 워드프레스 “테스트 완료” 버전을 6.6으로 상향(props @sudip-md, @ankitguptaindia, @jeffpaul를 통해 #212, #213)합니다.
- 변경: 워드프레스 최소 5.7에서 6.4로 상향 조정(props @sudip-md, @ankitguptaindia, @jeffpaul를 통해 #212, #213)합니다.
- 보안: @dkotter, @xknown, @iamdharmesh를 통해
wp_handle_sideload_prefilter
필터에 svg 살균을 추가합니다(props GHSA-3vr7-86pg-hf4g를 경유합니다). - 보안:
braces
를 3.0.2에서 3.0.3으로,pac-resolver
를 7.0.0에서 7.0.1로,socks
를 2.7.1에서 2.8.3으로,ws
를 7.5.9에서 7.5로 상향 조정합니다.10으로 변경하고ip
를 제거합니다(소품 @dependabot, @Sidsector9를 #206를 통해). - 보안: 1.6.7에서 1.7.4로
axios
상향(@dependabot, @faisal-alvi를 통해 #218로 전달).
2.2.5 – 2024-06-27
- 추가: 새 필터인
safe_svg_current_user_can_upload
가 추가되어 누가 SVG 파일을 업로드할 수 있는지 더 잘 제어할 수 있습니다(제안 @dkotter, @iamdharmesh를 통해 #193로 전송). - 수정: 단 두 개의 인수(@kmgalanakis, @dkotter, @liz1kiweno를 통해
admin_post_thumbnail_html
필터를 적용할 때 치명적인 오류가 발생했습니다(제안 #196을 통해). - 수정: 필터링된 블록 카테고리의 값이 배열이 아닐 때 PHP 치명적인 오류를 방지합니다(제안 @kmgalanakis, @dkotter, @cguidog via #200).
- 수정:
$image_meta
가 배열이 아닐 때 PHP 경고를 처리했습니다(제안 @faisal-alvi, @dkotter, @drazenbebic, @kirtangajjar를 통해 #203으로 전달됨).
2.2.4 – 2024-03-28
- 변경: @iamdharmesh, @jeffpaul를 통해
download-artifact
를 v3에서 v4로 업그레이드합니다(#181 제보). - 변경: 무응답/부실 이슈를 종결하는 데 도움이 되도록
lee-dohm/무응답
를actions/stale
로 대체했습니다(@jeffpaul, @dkotter를 통해 #183을 통해 소품). - 수정: svg 파일을 로드할 수 있는지 확인한 후 해당 속성에 액세스합니다(@dkotter, @metashield-ie, @ocean90, @darylldoyle, @faisal-alvi, #186 제보).
- 수정: 최적화 기능이 켜져 있을 때 클래식 에디터에서 JS 오류가 발생하지 않도록 합니다(@dkotter, @turtlepod, @faisal-alvi를 통해 #187 제보).
- 보안: 5.3.3에서 5.3.4로 @dependabot, @dkotter를 통해
webpack-dev-middleware
를 범프(#185 제보). - 보안: 4.18.2에서 4.19.2로
express
상향(@dependabot, @dkotter, #188).
2.2.3 – 2024-03-20
- 추가: 워드프레스닷오알지 플러그인 미리보기 지원(@dkotter, @jeffpaul, #167)을 추가했습니다.
- 변경: Bump WordPress “버전 6.5까지 테스트 완료”(@dkotter, @jeffpaul, #180 제보)
- 변경: NPM 종속성을 정리하고 노드를 v20으로 업데이트합니다(@Sidsector9, @dkotter, #172 제보).
- 수정:
svg_dimensions
함수를 더 효율적으로 리팩터링합니다(@sksaju, @cjyabraham, @bmarshall511, @Hercilio1, @darylldoyle, #154, #174 제보). - 수정: 최적화가 활성화되어 있고 항목이 블록 없이 게시될 때 치명적인 JS 오류를 해결합니다(@psorensen, @tictag, @dkotter, #173 제보).
- 보안:
axios
를 0.25.0에서 1.6.2로,@wordpress/scripts
를 26.0.0에서 26.18.0으로 상향 조정(@dependabot, @ravinderk, #166)합니다. - 보안: 1.15.3에서 1.15.6으로, 1.1.8에서 1.1.9로
follow-redirect
및ip
범프(@dependabot, @dkotter를 #169, #177 제보).
2.2.2 – 2023-11-21
- 변경: Bump WordPress “버전 6.4까지 테스트 완료”(@qasumitbagthariya, @jeffpaul, #162, #163 제보).
- 수정:
theme.json
(@tobeycodes, @dkotter #161를 통해 추가할 때 CSS가 SVG 아이콘 블록에 제대로 적용되는지 확인합니다.)
2.2.1 – 2023-10-23
- 변경: SVG 아이콘 블록의
apiVersion
3으로 업데이트(@fabiankaegy, @ravinderk, @jeffpaul, @dkotter, #133 제보) - 수정:
fill-rule
속성을 사용하여 SVG 아이콘 블록으로 인한 오류를 해결합니다(@zamanq, @jeffpaul, @iamdharmesh를 #152 제보). - 보안: 8.4.20부터 8.4.31일까지
postcss
범프(소품 @dependabot, @faisal-alvi를 통해 #155)를 추가합니다. - 보안:
@cypress/request
를 2.88.12에서 3.0.1로,cypress
를 10.11.0에서 13.3.0으로 범프(@dependabot, @ravinderk 가 #156를 통해 제보) - 보안: 7.20.12에서 7.23.2로
@babel/traverse
범프(@dependabot, @iamdharmesh, #158 제보)
2.2.0 – 2023-08-21
- 추가: SVG 파일을 업로드할 수 있는 사용자 역할을 선택할 수 있는 새로운 설정이 추가되었습니다(@dhanendran, @csloisel, @faisal-alvi, @dkotter를 통해 #76 제보).
- 추가: SVGO를 통해 업로드하는 동안 SVG 최적화. 이 기능은 기본적으로 비활성화되어 있지만
safe_svg_optimizer_enabled
필터를 사용하여 활성화할 수 있습니다(@gsarig, @peterwilsoncc, @Sidsector9, @darylldoyle, @faisal-alvi, @dkotter, @ravinderk, #79, #145 제보). - 추가: SVG 블록에 간격 및 색상 컨트롤이 추가되었습니다(@bmarshall511, @iamdharmesh, #135 제보).
- 추가: 모차우썸 리포터가 Cypress 테스트 보고서를 추가했습니다(소품 @jayedul, @peterwilsoncc, #124).
- 변경: 지원 수준을
Active
에서Stable
으로 업데이트합니다(@Sidsector9, @iamdharmesh를 #100를 통해 제보). - 변경: SVG 블록의 이름을 Safe SVG 아이콘에서 인라인 SVG로 업데이트(@bmarshall511, @iamdharmesh, #135).
- 변경: 워드프레스 “버전 6.3까지 테스트”(@dkotter, @jeffpaul, #144)로 제보)
- 변경: 종속성 검토 깃허브 액션 업데이트(@jeffpaul, @Sidsector9, #128 제보)
- 수정:
class_exists
검사에 네임스페이스 추가(@szepeviktor, @iamdharmesh를 통해 #120로 연결)합니다. - 수정: 새니타이저 클래스가 제대로 임포트되었는지 확인합니다(@szepeviktor, @iamdharmesh, #121 제보).
- 수정: 불필요한 글로벌을 제거합니다(@szepeviktor, @iamdharmesh를 #122를 통해 제보).
- 수정: require에서 절대 경로 사용(@szepeviktor, @iamdharmesh, #123 제보).
- 수정: SVG 블록에 추가된 사용자 정의 클래스명이 프런트엔드에 출력되도록 합니다(@bmarshall511, @Sidsector9, @dkotter #130 제보).
- 수정: 사용하기 전에
SimpleXML
이 존재하는지 확인하세요(@sdmtt, @faisal-alvi, #140 제보). - 수정: readme의 마크다운 문제를 수정했습니다(@szepeviktor, @iamdharmesh, #119 제보).
- 보안: 5.7.1에서 5.7.2로
semver
상향 조정(@dependabot를 #134로 프로퍼티). - 보안:
word-wrap
를 1.2.3에서 1.2.5로 상향 조정합니다(@dependabot를 #141을 통해 프롭으로 추가). - 보안:
tough-cookie
를 4.1.2에서 4.1.3으로,@cypress/request
를 2.88.10에서 2.88.12로 상향 조정합니다(@dependabot를 #146를 통해 제보).