다음 단계는 어떻게 보호합니까?js 응용 프로그램 및 Jscrambler

다음.js는 React 기반의 오픈 소스 프레임워크로 Node 위에 구축되어 있습니다.웹 응용 프로그램 개발을 위한 js.정적 및 서버 렌더링 혼합, 유형 스크립트 지원, 스마트 바인딩 및 라우팅 프리페치 등의 편리한 기능이 포함되어 있습니다.
2020년 State of JavaScript 조사에서 다음 단계.js는 사용률이 두 번째로 높은 백엔드 프레임워크 (Express에 버금가는 것) 이지만 만족도 면에서 1위를 차지했고 92%의 사용자가 이 프레임워크에 만족한다고 답했다.
본고에서 우리는 그것을 다음 응용 프로그램에 어떻게 집적하는지 소개할 것이다.js 응용 프로그램 개발 작업 흐름입니다.이렇게 하면 고급 모호 처리, 코드 잠금, 변조 방지 및 디버깅 기능을 결합하여 JavaScript 소스 코드를 보호할 수 있습니다.

선결 조건

다음 응용 프로그램에 Jscrambler를 올바르게 통합하기 위해js 구축 과정에서 우리는 먼저 두 가지 일을 해야 한다. 바로 다음 것을 만드는 것이다.js 응용 프로그램 및 Jscrambler 구성우리로 하여금 이 절차들을 완성하게 하다.

다음 생성js 응용 프로그램

넥스트에 경험이 많지 않으면그러나 계속하기 전에 Create a Next.js App 자습서를 확인하십시오. 이 예제 어플리케이션은 통합 자습서에서 실제로 사용되므로 설치하도록 하겠습니다.

git clone https://github.com/JscramblerBlog/nextjs-jscrambler-integration-tutorial.git

이제 npm을 사용하여 모든 응용 프로그램 의존 항목을 설치합니다.

cd nextjs-jscrambler-integration-tutorial
npm i

우리 다음 프로젝트의 기초 프로젝트 구조.js 응용 프로그램은 다음과 같습니다.

nextjs-jscrambler-integration-tutorial/
|-- package-lock.json
|-- package.json
|-- README.md
|-- .next
| |-- static/
| | |-- chunks/
| | | |-- pages/
|-- node_modules/
|-- pages/
|-- public/

package.json은 npm와 관련된 모든 설정을 포함합니다. 예를 들어 의존항, 버전, 스크립트입니다.

pages 디렉토리에는 응용 프로그램의 모든 소스 코드가 들어 있습니다.그리고 원본 코드를 .next/static/ 디렉터리에 구축하고 포장합니다.구문 후에 보호된 HTML 및 JavaScript 파일을 여기에 배치합니다.

public 디렉토리에는 이미지와 같이 공개적으로 액세스할 수 있는 모든 파일이 들어 있습니다.

우리는 응용 프로그램이 정상적으로 실행될 수 있도록 개발 서버를 쉽게 실행할 수 있다.

npm run dev

서버를 개발하는 컨트롤러에 URL을 얻을 것입니다. URL을 열면 프로그램이 실행 중인 것을 볼 수 있습니다. 아래와 같습니다.

우리의 다음 목표로 말하자면, 이것은 거의 그것이다.js 응용 프로그램.계속해서 Jscrambler로 그것을 보호합시다.

Jscrambler 구성

만약 당신이 아직 프로젝트를 만들지 않았다면, 계속하기 전에 반드시 이렇게 해야 한다.
Jscrambler의 모든 구성은 하나의 파일에 포함됩니다. .jscramblerrc.따라서 우리가 사용하고자 하는 변환을 지정하기 위해 이 파일을 만들어야 합니다.
이를 실현하는 가장 빠른 방법은 통과하는 것이다.일단 나타나면 새 프로그램을 만듭니다.이제 템플릿과 마이크로스피커 옵션 카드를 검사하고 코드를 보호하는 데 사용할 템플릿이나 변환을 선택하십시오.이 강좌에서, 우리는 모호 처리 템플릿을 선택할 것이다.이러한 절차에 대한 도움이 필요하시면 guide을 참조하십시오.
이제 모든 설정을 포함하는 JSON 파일을 다운로드하기만 하면 필요한 설정을 신속하게 얻을 수 있습니다.

이제 다음 페이지에 .jscramblerrc이라는 새 파일을 만듭니다.js 프로젝트의 루트 폴더입니다.방금 다운로드한 jscrambler.json 파일을 열고 모든 내용을 .jscramblerrc 파일로 복사합니다.그 다음에 우리는 .jscramblerrc에 두 개의 새로운 부분, 즉 filesSrc과 filesDest을 추가하기만 하면 된다.최종 .jscramblerrc 파일은 다음과 같습니다.

{
 "keys": {
   "accessKey": <ACCESS_KEY_HERE>,
   "secretKey": <SECRET_KEY_HERE>
 },
 "applicationId": <APP_ID_HERE>,
 "filesSrc": [
   "./.next/**/*.html",
   "./.next/**/*.js"
 ],
 "filesDest": "./",
"params": [
    {
      "name": "objectPropertiesSparsing"
    },
    {
      "name": "variableMasking"
    },
    {
      "name": "whitespaceRemoval"
    },
    {
      "name": "identifiersRenaming",
      "options": {
        "mode": "SAFEST"
      }
    },
    {
      "name": "globalVariableIndirection"
    },
    {
      "name": "dotToBracketNotation"
    },
    {
      "name": "stringConcealing"
    },
    {
      "name": "functionReordering"
    },
    {
      "options": {
        "freq": 1,
        "features": [
          "opaqueFunctions"
        ]
      },
      "name": "functionOutlining"
    },
    {
      "name": "propertyKeysObfuscation",
      "options": {
        "encoding": [
          "hexadecimal"
        ]
      }
    },
    {
      "name": "regexObfuscation"
    },
    {
      "name": "booleanToAnything"
    }
  ],
  "areSubscribersOrdered": false,
  "useRecommendedOrder": true,
  "jscramblerVersion": "<7.X>",
  "tolerateMinification": true,
  "profilingDataMode": "off",
  "useAppClassification": true,
  "browsers": {}
}

Google은 Jscrambler 웹 응용 프로그램을 통해 이러한 정보를 직접 얻었기 때문에 accessKey, secretKey과 applicationId 필드가 채워졌습니다.수동으로 검색하려면 guide을 참조하십시오.
주의해야 할 것은 params 부분에서 다음 프로그램을 보호하는 데 사용할 전환을 지정했습니다.js 응용 프로그램.이러한 옵션은 웹 응용 프로그램에서 선택하거나 수동으로 설정할 수 있습니다.변환 가능한 모든 문서 here을 찾을 수 있습니다.
또한 filesSrc을 변경하여 필요/보호하려는 파일과 일치하도록 할 수도 있습니다.우리의 본보기와 그 다음의 모든 것들로.html 및 .js 파일을 보호하는 것이 좋습니다.물론 프로젝트를 더 잘 이해함으로써 당신은 어떤 것이 관건적이고 필요한지 확정할 수 있습니다.filesDest: './'을 사용하면 보호된 파일에 보호된 버전을 덮어씁니다.

구축 과정에서 Jscrambler 통합

CLI를 사용하는 것이 구축을 만드는 가장 일반적인 방법일 수 있습니다.템플릿 응용 프로그램을 사용하여 Jscrambler를 빌드 프로세스에 통합하는 방법을 보여줍니다.
Jscrambler와 통합하는 첫 번째 단계는 Jscrambler API Client을 설치하는 것입니다.실행만 하면 됩니다.

npm i jscrambler --save-dev

CLI를 통해 Jscrambler를 응용 프로그램 구축에 통합하려면 package.json의 스크립트 섹션에 CLI 연계를 만들어야 합니다.이 섹션은 다음과 같습니다.

  "scripts": {
    "dev": "next dev",
    "build": "next build && jscrambler",
    "start": "next start"
  },

구축 과정이 완료되면 특정한 "build": "next build && jscrambler" 갈고리는 jscrambler 명령을 촉발한다.
이 명령을 실행하기 위해서, 우리는 이전에 만든 .jscramblerrc 파일이 프로젝트의 루트 폴더에 있는지 확인해야 한다.
이제 보호 코드를 준비하고 CLI를 통해 애플리케이션을 구축합니다.

npm run build

이렇게 하면 .next/static/에 보호된 프로덕션 파일이 생성됩니다.
너 망했어!현재, 모든 HTML과 자바스크립트 파일은 코드 도난과 역방향 프로젝트를 방지하기 위해 Jscrambler의 보호를 받고 있습니다.언제든지 보호 조치를 미세하게 조정하여 최종 성능의 영향을 관리할 수 있다는 것을 명심하십시오.만약 이런 상황이라면 반드시 우리의 강좌 Code Annotations과 Profiling을 따라주십시오.

보호된 다음 테스트.js 응용

마지막 단계에서는 애플리케이션이 새로 보호된 소스 코드를 사용하여 성공적으로 실행되는지 확인합니다.

npm run start

콘솔에서 사용할 수 있는 URL을 열면 프로덕션 파일을 포함하는 서버가 열립니다.
현재 보호된 코드의 외관을 검사할 수 있습니다.이것은 브라우저의 디버거를 열고 '원본' 옵션에서 파일을 열 수 있습니다.보호된 코드는 다음과 같습니다.

결론

다음.js는 확실히 웹 개발 생태계의 새로운 별이다.4년 역사를 가진 이 프레임워크는 신속하게 발전하여 개발자에게 인기 있는 기능을 가져와 생산이 완료된 응용 프로그램을 발표하는 것이 더욱 쉬워졌다.
다음에 지을 거면js 응용 프로그램은 민감한 논리를 가지고 있으며 역방향 프로젝트, 허가 위반과 변경을 방지하려면 Jscrambler와 같은 안전 해결 방안을 사용해야 한다.
Jscrambler를 Next에 통합합니다.js의 구축 과정은 매우 간단하고 가장 복잡한 다태적 혼동, 코드 자물쇠와 자기 방어 기능으로 코드를 보호할 수 있다.
이 모든 것은 고급 지원이 있기 때문에 만약 당신에게 문제가 있다면 반드시 확보해야 합니다!