놓칠 수 있는 JavaScript 암호화 API

지금 http://jauyeung.net/subscribe/에 내 이메일 목록을 구독하십시오.
트위터에 팔로우 해주세요.
기사 더 보기 https://medium.com/@hohangawindow 객체는 DOM에 대한 JavaScript 액세스를 제공하는 전역 객체입니다.웹 응용 프로그램의 어느 곳에서든 접근할 수 있는 표준 함수 라이브러리도 포함한다.
본문에서 window.cryoto 대상을 살펴보자.

창문.암호화하다window.crypto 속성은 전역 대상과 관련된 Crypto 대상을 되돌려줍니다.이 대상은 웹 페이지가 브라우저에서 다양한 암호화 작업을 실행할 수 있도록 합니다.그것은 subtle 속성이 있다.Crypto.subtle 속성은 클라이언트에서 미묘한 암호화를 할 수 있는 SubtleCrypto 대상을 되돌려줍니다.SubtleCrypto 대상은 5가지 데이터 혼란과 복호화 방법이 있다.sign 방법은 디지털 서명을 만드는 데 사용됩니다.verify 방법으로 만든 디지털 서명을 검증하는 방법이 존재합니다.sign 방법은 데이터를 암호화하는 데 사용되고encrypt 방법은 복호화decrypt 방법으로 생성된 방해 데이터에 사용된다.encrypt 방법은 일부 데이터의 고정 길이, 충돌 방지 요약을 만드는 데 사용된다.
우리는 또한 digest 대상에서 각각 SubtleCrypto와 generateKey 방법으로 암호화 키를 생성하고 파생시킬 수 있다.deriveKey 방법은 그것을 호출할 때마다 새로운 키 값을 생성하고 generateKey 방법은 일부 초기 재료에서 키를 파생시킨다.만약 우리가 두 개의 단독 전화 deriveKey 에 같은 자료를 제공한다면, 우리는 같은 기본 가치를 얻을 것이다.deriveKey 방법은 암호화와 복호화에 사용되는 같은 키를 내보내는 데 매우 유용하다.암호화 키를 가져오고 내보내는 방법deriveKey과 importKey도 사용할 수 있습니다.
키를 내보내고 다른 키로 암호화할 수 있는 또 다른 방법exportKey이 있다.
복호화wrapKey 방법으로 완성된 암호화 키를 복호화하고 복호화된 키를 가져옵니다.
예를 들어 우리는 unwrapKey 방법으로 디지털 서명을 만들 수 있다.그것은 세 개의 매개 변수가 필요하다.첫 번째는 wrapKey 문자열이나 대상이며 디지털 서명을 만드는 데 사용할 서명 알고리즘을 지정합니다.가능한 값은 다음과 같습니다.

RSASSA-PKCS1-v1 5- 전송 문자열sign 또는 형식의 객체algorithm

RSA-PSS-전달“RSASSA-PKCS1-v1_5” 대상.{ “name”: “RSASSA-PKCS1-v1_5” } 대상의 RsaPssParams 속성은 RsaPssParams이고 name 속성은 사용할 무작위 소금의 길이로 바이트 단위이다.RSA-PSS의 최대값은 saltLength입니다.

ECDSA-전달saltLength 대상.Math.ceil((keySizeInBits - 1)/8) - digestSizeInBytes - 2 대상은 EcdsaParams 속성을 가지고 있는데 이 속성은 문자열EcdsaParams과 name 속성이어야 한다. 이 속성의 값은 'ECDSA', hash 또는 SHA-256 속성일 수 있다.

HMAC - 전송 문자열SHA-384 또는 형식의 객체SHA-512

두 번째 파라미터는 “HMAC”입니다. 암호화 키 대상으로 서명을 만드는 데 사용되는 개인 키를 가지고 있습니다.세 번째 파라미터는 { “name”: “HMAC” }로 서명할 데이터를 가진 key 또는 data 대상이다.ArrayBuffer 방법은 한 약속을 되돌려주고 이 약속은 서명이 있는 ArrayBufferView 대상에서 이루어진다.
이와 유사하게 sign 방법은 ArrayBuffer 방법과 같은 제1verify,algorithm와 key 파라미터를 제1, 제2, 제4의 매개 변수로 받아들인다.data 방법으로 생성된 sign는 세 번째 매개 변수다.서명이 유효하면 만족치signature의 약속을 반환하고 그렇지 않으면 반환치sign를 반환한다.true 및 false 방법을 사용하려면 다음 코드를 작성할 수 있습니다.

const enc = new TextEncoder();
const encodedMessage = enc.encode('hello');
const keyPair = window.crypto.subtle.generateKey({
    name: "RSASSA-PKCS1-v1_5",
    modulusLength: 4096,
    publicExponent: new Uint8Array([1, 0, 1]),
    hash: "SHA-256"
  },
  true,
  ["sign", "verify"]
);
(async () => {
  const {
    privateKey,
    publicKey
  } = await keyPair;
  const signature = await window.crypto.subtle.sign(
    "RSASSA-PKCS1-v1_5",
    privateKey,
    encodedMessage
  );
  const signatureValid = await window.crypto.subtle.verify("RSASSA-PKCS1-v1_5", publicKey, signature, encodedMessage);
  console.log(signatureValid);
})()

우리는 먼저 sign를 사용하여 키 쌍을 생성합니다. 비대칭 RSA 알고리즘을 사용하기 때문에 이 알고리즘은 개인 키와 공공 키를 가지고 있습니다.verify 방법은 알고리즘을 첫 번째 매개 변수로 하고 그 중에서 가능한 값은 다음과 같다.

를 사용하려면RSASSA-PKCS1-v1_5RSA-PSS 또는RSA-OAEP 대상을 전달해야 합니다.

사용RsaHashedKeyGenParams 또는 ECDSA 우리는 ECDH 대상을 전달한다.

를 사용하려면EcKeyGenParams 우리는 HMAC 대상을 전달해야 한다.

를 사용하려면HmacKeyGenParams,AES-CTR,AES-CBC 또는AES-GCM 대상을 전달합니다.

두 번째 파라미터는booleangenerateKey 속성으로 키를 내보낼 수 있는지generateKey 또는 extractable 방법을 표시합니다.세 번째 매개변수는 SubtleCrypto.exportKey() 배열이며 생성된 키가 사용할 수 있는 방법을 나타냅니다.

SubtleCrypto.wrapKey()

keyUsages

encrypt

decrypt

sign

verify

deriveKey

deriveBits

그리고 우리는 알고리즘 이름, 개인 키, 그리고 wrapKey에서 생성된 인코딩 메시지 호출 unwrapKey 방법을 사용합니다.이렇게 하면 서명이 생성됩니다.그리고 우리는 sign 방법을 호출하여 알고리즘 이름, 개인 키, TextEncoder 방법으로 생성된 서명과 같은 인코딩 메시지를 사용합니다.만약 우리가 위의 코드를 실행한다면, 우리는 verify 로그 기록 sign을 받아야 한다.console.log 방법에는 세 개의 매개 변수가 있다.첫 번째는 true입니다. 이 개체는 다음과 같은 값을 가질 수 있는 개체입니다.

RSA-OAEP 알고리즘을 사용하기 위해 우리는 encrypt 대상을 전송했다.이 아이템 속성에 대한 자세한 정보는 AES-KW

AES-CTR 알고리즘을 사용하기 위해 algorithm 대상을 전송합니다.이 아이템 속성에 대한 자세한 정보는 AesKeyGenParams

AES-CBC 알고리즘을 사용하기 위해 RsaOaepParams 대상을 전송합니다.이 아이템 속성에 대한 자세한 정보는 https://developer.mozilla.org/en-US/docs/Web/API/RsaOaepParams

AES-GCM 알고리즘을 사용하기 위해 AesCtrParams 대상을 전송합니다.이 아이템 속성에 대한 자세한 정보는 https://developer.mozilla.org/en-US/docs/Web/API/AesCtrParams

두 번째 파라미터는 암호화에 사용되는 AesCbcParams 대상입니다.세 번째 파라미터는 AesGcmParams 대상인데 암호화할 데이터를 포함하고 순수한 텍스트라고도 부른다.암호화된 순수한 텍스트를 포함하는 CryptoKey 대상에서 이 약속을 되돌려줍니다.
이와 유사하게 BufferSource 방법은 ArrayBuffer 방법과 같은 앞의 두 개의 파라미터를 사용하지만 세 번째 파라미터는 복호화할 데이터를 포함하는 decrypt이다.그것은 순수한 텍스트를 포함하는 encrypt 대상에 의해 해석되는 약속을 되돌려줍니다.
예를 들어, 다음 코드의 BufferSource 및 ArrayBuffer 방법을 사용할 수 있습니다.

const enc = new TextEncoder();
const dec = new TextDecoder();
const keyPair = window.crypto.subtle.generateKey({
    name: "RSA-OAEP",
    modulusLength: 4096,
    publicExponent: new Uint8Array([1, 0, 1]),
    hash: "SHA-256"
  },
  true,
  ["encrypt", "decrypt"]
);
const encodedMessage = enc.encode('hello');
(async () => {
  const {
    privateKey,
    publicKey
  } = await keyPair;
  const encryptedText = await window.crypto.subtle.encrypt({
      name: "RSA-OAEP"
    },
    publicKey,
    encodedMessage
  )
  console.log(encryptedText);
  const decryptedText = await window.crypto.subtle.decrypt({
      name: "RSA-OAEP"
    },
    privateKey,
    encryptedText
  )
  console.log(decryptedText);
  console.log(dec.decode(decryptedText));
})()

위의 코드에서 우리는 먼저 encrypt 방법으로 키나 키 쌍을 생성한다. 이것은 암호화 알고리즘이 대칭적이든 비대칭적이든 우리가 dercrypt와 generateKey 예시에서 한 것처럼 대칭적이든 상관없다.비대칭 암호화 알고리즘은 하나의 공공 키와 하나의 개인 키가 있는데, 위의 예와 같다.RSA는 비대칭 알고리즘입니다.
그리고 우리는 sign로 메시지를 인코딩하여 verify 대상으로 인코딩하였으며, 이 대상은 TextEncoder 방법과 함께 사용할 수 있다.
그리고 우리는 ArrayBuffer 방법과 알고리즘, 공공 키, 그리고 encrypt 대상과 int를 전달하는 인코딩 텍스트를 사용하여 데이터를 암호화합니다.그리고 암호화된 텍스트를 복호화하기 위해 우리는 encrypt 방법을 사용하여 알고리즘 대상을 첫 번째 파라미터로 전송한 다음에 키에서 개인 키로 전송한 다음에 암호화된 텍스트를 세 번째 파라미터로 전송ArrayBuffer 방법으로 한다.
이것은 decrypt 의 형식으로 복호화된 데이터를 얻을 것입니다. 우리는 decrypt 의 ArrayBuffer 방법과 복호화된 TextDecoder 방법으로 원본으로 되돌아갈 것입니다.이것은 마지막 decode 문장이 우리를 되돌아오게 한다는 것을 의미한다. ArrayBufferconsole.log 대상은 'hello' 방법이 하나 더 있다.유형화된 그룹을 지정합니다. 이 방법은 강력한 무작위 값을 만들 것입니다.이 방법은 매개 변수가 하나밖에 없다.그것은 하나Crypto, 하나getRandomValues, 하나Int8Array, 하나Uint8Array, 하나Int16Array, 하나Uint16Array, 하나Int32Array 또는 하나Uint32Array가 필요하다.성능을 높이기 위해 이 방법은 진정한 랜덤 생성기를 사용하지 않고 위조 랜덤 생성기를 사용하여 숫자를 생성한다.매개 변수를 전송하는 형식화된 그룹의 항목은 이 방법으로 생성된 무작위 수로 덮어씁니다.
다음과 같이 getRandomValues 방법을 사용할 수 있습니다.

let array = new Uint32Array(10);
window.crypto.getRandomValues(array);
for (const num of array) {
  console.log(num);
}

위의 코드에서 우리는 새로운Uint32Array을 생성하여 getRandomValues 방법으로 전달했다.그리고 for...of 순환에서 우리는 생성된 값을 얻었다. 이 값은 원시 그룹의 모든 항목을 다시 썼다.우리는 console.log 중의 10개의 무작위 수를 보아야 한다. 위의 코드를 실행할 때마다 우리는 서로 다른 결과를 얻어야 한다.window.cryoto 대상을 사용하면 우리는 브라우저에서 모두가 알고 있는 암호화 알고리즘을 사용하여 데이터를 암호화하고 복호화할 수 있다.그것은 대칭과 비대칭 암호화를 지원하기 때문에 우리는 서로 다른 알고리즘으로 데이터를 암호화할 수 있다.또한 디지털 서명을 생성하고 검증할 수 있습니다.우리도 getRandomValues 방법으로 무작위 수를 얻을 수 있다.