Netgsm과 Wordfence 보안 플러그인 충돌 해결 방법

이 기사에서는 Netgsm 및 Wordfence Security 플러그인 충돌 해결에 대해 설명합니다. 이 충돌은 Netgsm 플러그인의 SMS를 통한 전화번호 확인 기능이 WooCommerce 등록 양식에 추가되고 Wordfence Security 플러그인이 동시에 활성화될 때 발생합니다. 그렇다면 이 갈등의 원인은 무엇인가? 함께 살펴보고 해결해 봅시다.

Wordfence 플러그인 숨겨진 입력 및 Netgsm

Wordfence 플러그인은 로그인 보안 섹션의 recaptcha 기능 기능을 위해 WooCommerce 등록 및 로그인 양식에 "wfls-email-verification" ID가 포함된 숨겨진 입력을 추가합니다. 등록 양식을 작성한 후 SMS를 받기 위해 "인증 코드 보내기" 버튼을 클릭하면 Netgsm 플러그인에 의해 브라우저에 경고가 표시됩니다. 이 경고문에는 이메일 주소가 입력되지 않았는데 저희가 이메일 주소를 입력했다고 뜹니다. 그 이유는 Wordfence Security에 의해 추가된 숨겨진 입력 요소가 있는 동안 Netgsm 플러그인이 이메일 상자에서 데이터를 검색할 수 없기 때문입니다. 그렇기 때문에 이메일 주소가 입력되지 않았다는 경고가 반환됩니다.

PHP에서 Wordfence 필터를 사용해 봅시다

로그인 보안 설정에서 recaptcha 키를 입력하지 않아도 Wordfence의 숨겨진 입력 요소가 기본적으로 추가됩니다. 이를 제거하기 위해 가장 먼저 떠오르는 것은 Wordfence 필터를 사용하여 이 기능을 비활성화하는 것입니다. 그렇죠? 시도해 봅시다.

<?php add_filter( 'wordfence_ls_require_captcha', '__return_false' );

이 코드는 현재 버전에서 로그인 보안(ls: 로그인 보안)에 대한 보안 문자 요구 사항을 제거하지만 숨겨진 입력을 제거하지는 않습니다. 이 경우 이상적인 솔루션은 Javascript를 사용하여 DOM에서 입력을 제거하는 것입니다. 이번 글에서는 자바스크립트 솔루션에 대해 이야기해보겠습니다. 물론 이것이 유일한 해결책은 아닙니다. Wordfence 플러그인이 관련 입력을 추가하는 OOP 클래스와 메소드를 찾고 이를 하위 테마 또는 코드 조각 플러그인에 작성한 코드로 재정의할 수 있습니다.

Javascript를 사용하여 DOM에서 숨겨진 입력을 제거해 보겠습니다.

다음 접근 방식을 사용하여 Javascript를 사용하여 코드에서 숨겨진 입력을 제거할 수 있습니다. 접근 방식의 세부 사항을 설명하기 전에 중요한 문제를 살펴보겠습니다. 이 접근 방식에서 DOMContentLoaded 이벤트를 사용하는 경우 일부 사이트에서는 코드가 정의되지 않은 상태로 반환될 수 있습니다. 모든 상황에서 DOM이 로드되면 DOMContentLoaded 이벤트가 실행되지 않습니다. 성공을 보장하기 위해 window.onload 이벤트에 코드를 작성했습니다. DOM에서 닫는 body 태그 바로 앞에 스크립트 태그 사이에 이러한 코드를 추가하는 것이 좋습니다.

// Remove Wordfence Security hidden email input due to conflict with Netgsm plugin by Onur Özden Web Çözümleri
 window.addEventListener('load', () => {
    // used window.onload due to DOMContentLoaded not working properly for this codes
  const oowcRemoveWflsHiddenInput = [...document.querySelectorAll("input[name='wfls-email-verification']")];
  oowcRemoveWflsHiddenInput.forEach(hiddenInput => hiddenInput.remove());
});

그렇다면 우리는 이 코드로 무엇을 했나요? 페이지의 DOM이 로드되면 Wordfence Security 플러그인은 oowcRemoveWflsHiddenInput이라는 변수를 추가합니다. 요소가 DOM에 없는 경우(예를 들어 이 코드가 양식이 없는 다른 페이지에서 실행된 경우) forEach가 어쨌든 작동하지 않기 때문에 if 블록을 사용하여 대상 요소의 존재를 확인하지 않았습니다. forEach 루프에서 발견된 모든 대상 요소를 제거했습니다. 코드가 ES12 표준을 준수하는지 확인하기 위해 확산 방법이 사용됩니다. NodeList'i우리는 그것을 배열로 직접 변환했습니다. 이런 식으로 NodeListArray 메소드인 forEach를 직접 사용했습니다.