JavaScript로 Word 문서 보호: 편집 제한

개발자들이 "Word 문서 보호"라는 말을 들으면 가장 먼저 떠올리는 것은 흔히 암호화입니다 — 아무도 파일을 열 수 없도록 비밀번호를 설정하는 것이죠. 하지만 문서 보안에는 똑같이 중요한 두 번째 계층이 있습니다: 문서를 연 뒤 독자가 무엇을 할 수 있는지 제한하는 것입니다. 고객에게 보내는 계약서 템플릿은 합의된 조건을 바꾸지 않고 빈칸을 채울 수 있어야 합니다. 검토를 위해 배포되는 최종 초안은 댓글은 허용하되 본문 텍스트를 직접 편집하는 것은 막아야 합니다. 이런 시나리오에는 열기 암호 암호화가 아니라 편집 제한이 필요합니다.

Spire.Doc for JavaScript는 WebAssembly를 통해 이 기능을 브라우저에 직접 제공합니다. 가상 파일 시스템(VFS)을 사용해 글꼴과 파일 리소스를 관리하며, Word 문서를 전적으로 클라이언트 측에서 처리합니다 — 백엔드 서버도, 파일 업로드도, 왕복 지연도 없습니다. Protect 메서드는 ProtectionType 열거형 값과 비밀번호를 받아 문서에 해당 편집 제한을 적용합니다.

이 글에서는 Spire.Doc for JavaScript에서 사용할 수 있는 다섯 가지 보호 유형을 살펴보고, 하나의 참조 표에서 비교한 다음, 전체 문서에 보호 유형을 적용하는 방법과 다른 섹션은 편집 가능하게 둔 채 특정 섹션만 잠그는 방법을 보여 줍니다.

보호 vs. 암호화: 서로 다른 두 가지 목표

보호 유형으로 들어가기 전에, 자주 혼동되는 두 개념 사이에 명확한 선을 그어 둘 필요가 있습니다:

• 암호화(열기 암호)는 누가 문서를 열 수 있는지를 제어합니다. 비밀번호가 없으면 파일 내용에 접근할 수 없습니다.
• 편집 제한(보호 유형)은 문서가 이미 열린 뒤 독자가 무엇을 변경할 수 있는지를 제어합니다. 독자는 내용을 자유롭게 볼 수 있으며, 제한은 사용 가능한 편집 작업을 제한합니다.

편집 제한은 선택, 복사, 검색을 막지 않습니다 — 수정만 차단합니다. 콘텐츠를 가져가는 것을 막는 것이 목표라면 암호화가 필요합니다. 읽을 수 있게 허용하면서 콘텐츠가 변경되는 것을 막는 것이 목표라면 편집 제한이 필요합니다. 두 메커니즘은 상호 보완적이며 함께 사용할 수 있지만, 각각 다른 목적을 수행합니다.

보호 유형 한눈에 보기

Spire.Doc for JavaScript는 다섯 가지 ProtectionType 열거형 값을 제공합니다. 각 값은 완전히 개방된 상태부터 완전히 잠긴 상태까지 서로 다른 편집 가능 범위를 정의합니다. 아래 표는 다섯 가지를 모두 요약하므로 한눈에 알맞은 것을 선택할 수 있습니다.

선택 방법: 독자가 아무것도 변경하지 않아야 한다면 AllowOnlyReading을 사용하세요. 독자가 지정된 빈칸만 채워야 한다면 AllowOnlyFormFields를 사용하세요. 텍스트를 건드리지 않고 피드백만 남겨야 한다면 AllowOnlyComments를 사용하세요. 모든 변경 사항을 나중에 검토할 수 있도록 추적해야 한다면 AllowOnlyRevisions를 사용하세요. 이전에 적용한 제한을 제거해야 한다면 NoProtection을 사용하세요.

전체 문서에 보호 유형 적용하기

가장 간단한 방법은 단일 ProtectionType 값으로 전체 문서를 보호하는 것입니다. 워크플로에는 세 단계가 있습니다: FetchFileToVFS를 통해 글꼴 파일과 대상 Word 문서를 WASM 가상 파일 시스템에 로드합니다; Document를 인스턴스화하고 파일을 로드한 다음, 원하는 보호 유형과 나중에 제한을 해제할 비밀번호로 Protect를 호출합니다; 그런 다음 문서를 저장하고, VFS에서 생성된 파일을 읽어 Blob으로 감싼 뒤 브라우저 다운로드를 트리거합니다.

아래 예제에서는 AllowOnlyReading을 사용하지만, 위 표의 다섯 가지 ProtectionType 값 중 무엇이든 대체할 수 있습니다.

function App() {
  const protectWithSpecifiedType = async () => {
    const docModule = window.wasmModule?.spiredoc;
    if (!docModule) {
      alert('Spire.Doc is not ready yet');
      return;
    }

    const inputFileName = 'Template.docx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/data/`);

    // Load the document
    const doc = new docModule.Document();
    doc.LoadFromFile(inputFileName);

    // Protect the document with the "AllowOnlyReading" type; the password lifts the restriction
    doc.Protect({ type: docModule.ProtectionType.AllowOnlyReading, password: "123456" });

    // Define the output file name and save
    const outputFileName = "SpecifiedProtectionType.docx";
    doc.SaveToFile({ fileName: outputFileName, fileFormat: docModule.FileFormat.Docx2013 });
    doc.Dispose();

    const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

 return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Protect a Document with a Specified Type</h1>
      <button onClick={protectWithSpecifiedType}>Generate</button>
    </div>
  );
}
export default App;

문서가 AllowOnlyReading 유형으로 보호되면 내용은 보기만 가능하고 리본의 편집 명령이 제한됩니다.

지정된 섹션만 잠그기

전체 문서를 일괄적으로 보호하는 것은 단순한 결과물에는 잘 맞지만, 실제 문서 중 상당수는 더 세밀한 조정이 필요합니다. 예를 들어 견적서 템플릿에는 잠긴 상태로 유지해야 하는 고정 조건과 고객이 세부 정보를 입력하는 섹션이 함께 있을 수 있습니다. Spire.Doc for JavaScript는 전체 문서 보호와 섹션별 재정의를 결합하여 이를 처리합니다.

전략은 다음과 같습니다: 먼저 AllowOnlyFormFields로 전체 문서를 보호한 다음, 편집 가능한 상태로 남겨 둘 섹션의 ProtectForm 속성을 false로 설정합니다. 이렇게 하면 나머지 문서는 잠긴 상태로 두면서 개별 섹션을 선택적으로 해제할 수 있습니다.

워크플로에는 세 단계가 있습니다: FetchFileToVFS를 통해 글꼴 파일을 WASM 가상 파일 시스템에 로드합니다; Document를 인스턴스화하고, AddSection으로 섹션을 만들어 내용을 작성하고, Protect를 호출해 전체 문서를 양식 필드에만 잠그고, 해제할 섹션의 ProtectForm을 false로 설정합니다; 그런 다음 문서를 저장하고, VFS에서 생성된 파일을 읽어 Blob으로 감싼 뒤 브라우저 다운로드를 트리거합니다.

function App() {
  const lockSpecifiedSections = async () => {
    const docModule = window.wasmModule?.spiredoc;
    if (!docModule) {
      alert('Spire.Doc is not ready yet');
      return;
    }

    // Create a new document and add two sections
    const doc = new docModule.Document();
    let s1 = doc.AddSection();
    let s2 = doc.AddSection();

    // Write content into each of the two sections
    s1.AddParagraph().AppendText("Spire.Doc demo, section 1");
    s2.AddParagraph().AppendText("Spire.Doc demo, section 2");

    // Protect the whole document for form fields only
    doc.Protect({ type: docModule.ProtectionType.AllowOnlyFormFields, password: "123" });

    // Release section 2 on its own so that it can be edited
    s2.ProtectForm = false;

    // Define the output file name and save
    const outputFileName = 'LockSpecifiedSections.docx';
    doc.SaveToFile({ fileName: outputFileName, fileFormat: docModule.FileFormat.Docx2013 });
    doc.Dispose();

    const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

 return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Lock Specified Sections of a Word Document</h1>
      <button onClick={lockSpecifiedSections}>Generate</button>
    </div>
  );
}
export default App;

섹션 2가 해제되면 문서에서 섹션 1만 편집 제한을 유지합니다.

자주 묻는 질문

ProtectForm = false 이후에도 섹션이 편집 가능해지지 않음

ProtectForm 속성은 문서가 AllowOnlyFormFields로 보호된 경우에만 효과가 있습니다. AllowOnlyReading과 같은 다른 보호 유형이 활성화되어 있으면 개별 섹션에서 ProtectForm을 false로 설정해도 해당 섹션이 해제되지 않습니다 — 전체 문서 제한이 우선합니다.

이 문제를 해결하려면 개별 섹션을 해제하기 전에 Protect에 전달된 보호 유형이 AllowOnlyFormFields인지 확인하세요:

doc.Protect({ type: wasmModule.ProtectionType.AllowOnlyFormFields, password: "123" });
s2.ProtectForm = false;

보호된 문서도 여전히 선택하고 복사할 수 있습니다

다섯 가지 보호 유형은 모두 읽기 동작이 아니라 편집 동작을 제한합니다. 예를 들어 AllowOnlyReading은 본문 텍스트 변경을 방지하지만 텍스트 선택, 복사 또는 검색을 차단하지는 않습니다. 이는 의도된 설계입니다 — 편집 제한은 사용자가 볼 수 있거나 추출할 수 있는 내용이 아니라 수정할 수 있는 내용을 제어합니다.

권한이 없는 사용자가 콘텐츠를 복사하거나 볼 수 없어야 한다면 편집 제한 대신 문서 암호화(열기 암호)를 사용하세요. 두 접근 방식은 서로 다른 위협을 해결하며, 기밀성과 편집 제어가 모두 필요할 때 결합할 수 있습니다:

doc.Protect({ type: wasmModule.ProtectionType.AllowOnlyReading, password: "123456" });

같이 보기

• React 프로젝트에 Spire.Doc for JavaScript를 통합하는 방법
• Spire.Doc for JavaScript 제품 페이지
• npm의 Spire.Doc for JavaScript