>source

Gatsby로 작성된 정적 웹 사이트가 있습니다. 웹 사이트에 수확기 봇으로부터 보호하고 싶은 이메일 주소가 있습니다.

첫 번째 접근 방식은 GraphQL을 사용하여 클라이언트 측에 이메일 주소를 보내는 것입니다. 전송 된 데이터는 base64로 인코딩되고 이메일 주소가 표시되는 React 컴포넌트의 클라이언트 측에서 디코딩합니다. 하지만 프로덕션 환경에서 Gatsby 사이트를 구축하고 제공된 index.html HTML 코드에서 이미 디코딩 된 이메일 주소를 볼 수 있습니다. 생산 과정에서 XHR request 따라서 서버 측 렌더링이 실행되는 동안 모든 GraphQL 쿼리가 평가되었습니다.

그래서 두 번째 접근 방식에서는 반응 구성 요소가 마운트 될 때 이메일 주소를 디코딩하려고했습니다. 이런 식으로 서버 측 렌더링 html 페이지에 이메일 주소가 없습니다. 그러나 페이지가로드되면 표시됩니다.

코드의 관련 부분은 다음과 같습니다.

import React, { useState, useEffect } from "react"
import { useStaticQuery, graphql } from "gatsby"
const Contacts = () => {
    const { site } = useStaticQuery(
        graphql`
          query {
            site {
                siteMetadata {
                    email
              }
            }
          }
        `
    )
    function decode(s) {
        var e = {}, i, b = 0, c, x, l = 0, a, r = '', w = String.fromCharCode, L = s.length;
        var A = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
        for (i = 0; i < 64; i++) { e[A.charAt(i)] = i; }
        for (x = 0; x < L; x++) {
            c = e[s.charAt(x)]; b = (b << 6) + c; l += 6;
            while (l >= 8) { ((a = (b >>> (l -= 8)) & 0xff) || (x < (L - 2))) && (r += w(a)); }
        }
        return r;
    };
    const [email, setEmail] = useState("");
    useEffect(() => decodeData(), []);
    function decodeData() {
        setEmail(() => decode(site.siteMetadata.email), []);
    }
    return (
        //...
        <span className="service-text">{email}</span>
        //...
    )
}
export default Contacts

이 접근 방식이 차이가 있습니까? 이런 식으로 봇으로부터 이메일 주소를 보호 할 수 있습니까? 이 방법으로 최소한 요청 된 html 페이지에 하드 코딩 된 이메일 주소가 없습니다.

브라우저의 개발자 도구에서 페이지를보고 싶다면 여기에서 찾을 수 있습니다.https://www.barbaraapartmanheviz.hu/en/

  • 답변 # 1

    작동합니다. useEffect 서버 측에서 실행되지 않으므로 이메일이 클라이언트로 전송되기 전에 디코딩되지 않습니다.

    불필요하게 복잡해 보일 수도 있습니다. 그냥 넣어 {typeof window !== 'undefined' && decode(site.siteMetadata.email)} JSX에서.

    물론 100 % 보호라는 것은 없습니다. Google이이 이메일 주소에 대해 색인을 생성 할 가능성이 높습니다. 인덱싱 중에 JavaScript를 실행합니다. 나는 대부분의 스크레이퍼가 그렇지 않다고 강력하게 의심하지만 일부는 그렇게 할 수 있습니다.

  • 답변 # 2

    https://www.npmjs.com/package/react-obfuscate를 시도/고려 했습니까? 데이터 (예 : 이메일, 전화)를 인코딩하지 않지만 DOM에서 되돌립니다 (그리고 CSS로 다시 되돌립니다). 매우 안전하지는 않지만 최소한의 노력으로 적어도 약간의 난독 화.

관련 자료

  • 이전 python - pandas는 고유 한 값에 대해 한 열을 반복하고 다른 열의 값을 가져옵니다
  • 다음 wordpress - WooCommerce 제품 변형 옵션에 사용자 정의 확인란 추가