[작성자:] changwoo

원인은 fcitx 입력기가 Ctrl+Alt+S 키를 선점하였기 때문이다.

1. Fcitx 구성하기 > 전역 설정 탭으로 이동
2. 하단 ‘추가 설정 보기’ 체크
3. 모든 구성 및 입력 기록 저장의 단축키를 해제
   • Ctrl + Alt + s 버튼 클릭하고
   • 단축키 조합 받는 창에서 Esc 누름

이렇게 하면 PhpStorm 이 올바르게 Ctrl + Alt + s 를 수신받는다. 이상.

지난 포스트에 이어 설정 파일을 자동화하기 위한 과정을 계속 기록한다. 리포지터리에 계속 필요한 설정을 하고, IDE의 설정 파일의 변화를 추적한다. 추적된 변경 사항은 따로 .md 파일로 기록한다.

내가 PhpStorm을 주로 사용하는 용도는 워드프레스 플러그인 또는 테마 개발이므로 워드프레스 코어 루트 디렉토리를 기준으로 한 프로젝트를 생성한 후 여러 자투리 설정을 대상으로 한다.

많은 반복을 거쳐 자동적으로 기억나는 몇몇 필수적인 아래 요소들을 대상으로 기록을 하였고, 차후 나머지 설정들은 생각나는대로 덧붙일 생각이다.

• 서버와 XDebug 지원
• Framework > WordPress 지원
• 단어 사전 추가
• 올바른 composer.json 경로
• 프로젝트에서 제외되는 경로
• 정적 검사를 위한 PHP 언어 레벨
• 내가 개발하는 영역에만 코드 검사를 하도록 커스텀 스코프 지정
• 개발 중인 테마/플러그인에 VCS 경로 지정

이것들은 주로 workspace.xml 파일에 저장되는데, XML 파일을 적절히 편집할 수 있다면 자동화가 그렇게 어렵지는 않을 것으로 보였다.

PhpStorm을 오랜 기간 사용해 왔고, 그동안 많은 프로젝트를 생성해 왔다. 물론 주로 워드프레스 프로젝트였는데, 셋업만 엄청나게 오래 걸린다. 은근해 해 줘야 할 것이 많기 때문이다.

이런 설정은 프로젝트 파일의 숨겨진 .idea 라는 디렉토리에 저장되고 나름의 규칙이 있다. 그러므로 매번 일일이 손으로 하기 보다는, 구조를 잘 파악해서 셋업된 대로 자동화 하는 것이 효율적이지 않을까?

그래서 이번에 큰 맘 먹고 자투리 프로젝트를 해 보기로 했다. PhpStorm 프로젝트 셋업을 자동화하자! 재밌겠다!

우선 공개된 리포지터리를 생성했다. 그리고 여기에 샘플 PhpStorm 프로젝트를 생성하고, 여기에 원하는 셋업을 한 후에 설정 파일이 어떻게 변화하는지 모니터하고 문서를 첨부하였다.

스튜디오 JT의 정재철 님이 제보하신 버그

증상 재현

• 멀티사이트, 에디터 이하의 권한으로 글 작성, 블록 에디터 편집 중 발생.
• ‘이미지’ 블록을 선택해 ‘현재 미디어 URL’을 다음과 같은 URL로 변경한다.
  • https://images.unsplash.com/photo-1591273703337-fbede2a94c25?ixid=M3w0NzI4ODN8MHwxfHNlYXJjaHwxMnx8R3llb25nYm9rZ3VuZ3xlbnwwfHx8fDE3MTA3NDkwNDd8MA&ixlib=rb-4.0.3&w=1816&h=800&fit=crop
  • 포인트는 이미지 URL 에 쿼리 스트링으로 & 가 들어가야 한다는 것.
• ‘커버’ 블록으로 바로 변환한다.
• 저장하면, 저장은 되지만 프론트로 가 보면 이미지가 깨져 있다.
• 다시 편집 화면으로 돌아오면 블록이 정상적으로 나오지 않는다.

원인

unfiltered_html 권한과 더불어 /wp-includes/kses.php 파일의 safecss_filter_attr() 함수에서의 style 속성 처리에서 약간의 문제가 겹쳐 일어남. 앞서 포인트에서 지적했듯 URL에 & 처럼 html entity 사용시 발생.

우선 발생 조건을 다시 요악하면,

1. 싱글 사이트에서 에디터의 권한 중 unfiltered_html 권한을 강제로 제외시키거나, 멀티사이트로 전환한다. Roles and Capabilities 문서에 따르면 에디터는 멀티사이트에서 unfiltered_html 권한을 가지지 않는다.
2. set_current_user 액션 때 , 편집하는 사용자가 unfiltered_html 권한을 가지지 못하면 엄격한 kses 체크를 받도록 kses_init_filters() 함수가 동작한다.
3. kses_init_filters() 함수 안에,
   add_filter( 'content_save_pre', 'wp_filter_post_kses' );
   라는 부분이 있다. 포스트 저장 시, kses 발동시키는 부분이다.
4. kses 동작 중 wp_kses_attr_check() > safecss_filter_attr() 함수로 호출이 이어지고, safecss_filter_attr() 함수 안에서 문제가 일어난다.

에디터에서 background-image: url();을 쓰는 것은 전혀 문제가 없는데, 이미지 URL에 파라미터가 붙게 되면, 가령 파라미터를 포함한 이미지 URL이 https://sample.image.com/flower.jpg?a=foo&b=bar 처럼 되어 있었다고 치자 (CDN인 경우 종종 이런 경우가 발생). 그러면 이것이 POST 전송되면서 https://sample.image.com/flower.jpg?a=foo&b=bar로 강제로 변경된다.

그런데 safecss_filter_attr() 함수에서 HTML 태그 style 속성을 나눌 때 단순히 ‘;’ 만을 기준으로 나누게 구현되어 있다.

function safecss_filter_attr( $css, $deprecated = '' ) {  
    if ( ! empty( $deprecated ) ) {  
       _deprecated_argument( __FUNCTION__, '2.8.1' ); // Never implemented.  
    }
    ...
    $css_array = explode( ';', trim( $css ) );Code language: PHP (php)

그러므로 여기서 CSS 속성들이 잘못 분리된다. 그래서 background-image 속성이 손상되고, 따라서 저장 이후에는 올바르게 블록이 불러와지지 않는 문제가 발생한다. 다만 블록 자체는 해당 URL을 잘 기억하고 있어, 복구가 가능하다. 이는 블록의 속성값들이 보통 post_content 에 HTML 주석 형태로 저장되기 때문으로 주석에서는 이런 URL 필터링이 동작하기 않기 때문이다.

해결책

• 옵션 1: 멀티사이트에서 계정에게 unfiltered_html 권한을 특별히 부여한다.
• 옵션 2: url() 부분에서 & 같은 게 나오지 않도록 URL을 관리한다.
• 옵션 3: 필터를 사용해 강제로 url() 에 & 같은 것을 &로 변환한다. PHP html_entity_decode() 함수가 도움이 될 것이다.

대충 이렇게 mu-plugin으로 구현한다.

<?php  
/**
 * mu-plugin 디렉토리에 resolve-url.php 로 저장.
 */
function resolve_url_set_current_user() {  
    if ( ! current_user_can( 'unfiltered_html' ) ) {  
       add_filter( 'pre_kses', 'resolve_url_fix_url', 9 );  
    }  
}  

function resolve_url_fix_url( $data ) {  
    return preg_replace_callback( '/url\(([^)]+)\)/', 'resolve_url_replace', $data );  
}  

function resolve_url_replace( $matches ) {  
    if ( isset( $matches[1] ) ) {  
       $parsed = parse_url( $matches[1] );  
       if ( isset( $parsed['query'] ) && str_contains( $parsed['query'], ';' ) ) {  
          $decoded = html_entity_decode( $matches[1], );  
          return "url($decoded)";  
       }  
    }  
    return $matches[0];  
}  

add_action( 'set_current_user', 'resolve_url_set_current_user' );
Code language: PHP (php)