javascript - Angular 2 : window. crypto.subtle.importKey 在 'localhost' 中工作，但在 'ip' 上不起作用

Question

我是 Angular 2 的新手。我正在尝试实现一个登录表单，该表单在经过某些加密步骤后将电子邮件 ID 和密码发送到服务器。

我已经使用 AES-CTR 实现了 AES-ECB，

https://github.com/diafygi/webcrypto-examples

我使用了“importKey”和“加密”方法，如下所示，

public deriveAKey(input, encryptKey, cryptoIV) {

    var ref: TopDivComponent = this;
    console.log('Testing before importKey...');

    window.crypto.subtle.importKey(
        "raw",
        ref.stringToArrayBuffer(encryptKey),
        {
            name: "AES-CTR",
        },
        true,
        ["encrypt"]
    ).then(function (key) {
        console.log('Inside then...');
        var newvar = ref.stringToArrayBuffer(cryptoIV);
        var encrypt = window.crypto.subtle.encrypt(
            {
                name: "AES-CTR",
                counter: newvar,
                length: 128,
            },
            key,
            ref.stringToArrayBuffer(input)
        ).then(function (encrypted) {
            var temp = ref.arrayBufferToString(encrypted);
            console.log('Encrypted First: ' + encrypted);
            console.log('Temp: ' + temp);
            console.log('Key: ' + key);
            let fin_encrypted = btoa(temp);
            // console.log('Encrypted Snc/d: ' + fin_encrypted);
            ref.response(fin_encrypted);
            // console.log('From deriveKey: ' + fin_encrypted);
        });
    });
}

我使用本地服务器来获取响应。使用本地主机时一切正常。请求和响应已正确发送并从服务器获取。但是，当通过 IP 连接时，它会显示错误“NotSupportedError:仅允许安全来源”。

当我使用Chrome canary时，它说无法识别 importKey 方法。因此，当我使用 Chrome 对其进行“控制台”处理时，该控制并未超出 importKey 方法。可能是什么问题？

Answer 1

Chrome 限制 WebCryptographyApi 的使用以保护来源。它的意思是“https”。 localhost 是一个用于开发的特殊地址。因此，要在真实环境中使用 WebCrypto，您需要设置 SSL/TLS 服务器