角度2：window.crypto.subtle.importKeyは 'localhost'では動作しますが、 'ip'では動作しません

Question

私はAngular 2の新人です。特定の暗号化ステップの後にemailidとパスワードを送信するログインフォームを実装しようとしていますサーバーに送信します。

Iは、次のようにI 'はimportKey' および '暗号' 方法を使用している

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

からAES-CTRを使用して

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); 
     }); 
    }); 
} 

をAES-ECBを実装しています

ローカルサーバーを使用して応答を取得します。 localhostを使用している場合はすべて正常に動作します。要求と応答は適切に送信され、サーバーから取得されます。しかし、IP経由で接続すると、エラー"NotSupportedError：セキュアな発信元のみが許可されます"と表示されます。

クロムカナリアを使用したとき、importKeyメソッドが認識されないと言われました。だから、私がChromeでそれをコンソール化したとき、コントロールはimportKeyメソッドを超えていませんでした。何が問題になる可能性がありますか？

Answer 1

クロムはWebCryptographyApiの使用をセキュリティで保護するために制限しています。これは「https」を意味します。 localhostは、開発用に有効になっている特別なアドレスです。したがって、実際の環境でWebCryptoを使用するには、SSL/TLSサーバーを設定する必要があります。