이 중 하나를 구현하기 전에 Scott Arciszewski의 답변을 참조하십시오 .
보안 지식이 거의 없기 때문에 공유 하려는 내용에 매우주의 를 기울이고 싶습니다 (아래 API를 잘못 사용하고있을 가능성이 높습니다). 이 답변 을 업데이트하는 것을 환영합니다. 지역 사회의 도움으로 .
@richardtallent가 그의 답변 에서 언급했듯이 Web Crypto API에 대한 지원이 있으므로이 예제는 표준을 사용합니다. 이 글을 쓰는 시점에서 전 세계 브라우저 지원 은 95.88 %입니다 .
Web Crypto API를 사용하여 예제를 공유하겠습니다.
계속 진행하기 전에 ( MDN에서 인용 )에 유의하십시오 .
이 API는 여러 하위 레벨 암호화 기본 요소를 제공합니다. 그것은의 를 오용하는 것은 매우 간단 하고, 함정 참여가 될 수 있습니다 매우 미묘한 .
기본 암호화 기능을 올바르게 사용한다고 가정하더라도 보안 키 관리 및 전체 보안 시스템 설계는 매우 어렵고 일반적으로 전문 보안 전문가의 영역입니다.
보안 시스템 설계 및 구현의 오류는 시스템의 보안을 완전히 비효율적으로 만들 수 있습니다.
무엇을하고 있는지 잘 모르는 경우이 API를 사용하지 않아야합니다 .
나는 보안을 많이 존중하고 심지어 MDN의 추가 부분을 굵게 표시했습니다 ... 당신은 경고를 받았습니다
.
JSFiddle :
여기에 있습니다 : https://jsfiddle.net/superjose/rm4e0gqa/5/
노트 :
await키워드 사용에 유의하십시오 . 내부를 사용하여 async기능 또는 사용 .then()하고 .catch().
키를 생성하십시오.
// https://developer.mozilla.org/en-US/docs/Web/API/CryptoKey
// https://developer.mozilla.org/en-US/docs/Web/API/RsaHashedKeyGenParams
// https://github.com/diafygi/webcrypto-examples#rsa-oaep---generatekey
const stringToEncrypt = 'https://localhost:3001';
// https://github.com/diafygi/webcrypto-examples#rsa-oaep---generatekey
// The resultant publicKey will be used to encrypt
// and the privateKey will be used to decrypt.
// Note: This will generate new keys each time, you must store both of them in order for
// you to keep encrypting and decrypting.
//
// I warn you that storing them in the localStorage may be a bad idea, and it gets out of the scope
// of this post.
const key = await crypto.subtle.generateKey({
name: 'RSA-OAEP',
modulusLength: 4096,
publicExponent: new Uint8Array([0x01, 0x00, 0x01]),
hash: {name: 'SHA-512'},
}, true,
// This depends a lot on the algorithm used
// Go to https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto
// and scroll down to see the table. Since we're using RSA-OAEP we have encrypt and decrypt available
['encrypt', 'decrypt']);
// key will yield a key.publicKey and key.privateKey property.
암호화 :
const encryptedUri = await crypto.subtle.encrypt({
name: 'RSA-OAEP'
}, key.publicKey, stringToArrayBuffer(stringToEncrypt))
console.log('The encrypted string is', encryptedUri);
해독
const msg = await crypto.subtle.decrypt({
name: 'RSA-OAEP',
}, key.privateKey, encryptedUri);
console.log(`Derypted Uri is ${arrayBufferToString(msg)}`)
String에서 ArrayBuffer를 앞뒤로 변환 (TypeScript에서 완료) :
private arrayBufferToString(buff: ArrayBuffer) {
return String.fromCharCode.apply(null, new Uint16Array(buff) as unknown as number[]);
}
private stringToArrayBuffer(str: string) {
const buff = new ArrayBuffer(str.length*2) // Because there are 2 bytes for each char.
const buffView = new Uint16Array(buff);
for(let i = 0, strLen = str.length; i < strLen; i++) {
buffView[i] = str.charCodeAt(i);
}
return buff;
}
더 많은 예제를 여기에서 찾을 수 있습니다 (소유자가 아닙니다) : // https://github.com/diafygi/webcrypto-examples