使用 Crypto-js 就地散列元素内容

Question

我正在尝试使用 JavaScript 对数据进行哈希处理。当我运行第一个代码时，它将使用 document.write 进行散列。现在，我尝试使用第二个代码按内容 ID 进行哈希处理，但它不起作用。谁能解释一下为什么？

<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha256.js"></script>
<script>
    var hash = CryptoJS.SHA256("hello");
    document.write(hash.toString(CryptoJS.enc.Hex));
</script>

使用第一种方法效果很好 2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824

<script>
    var hash = CryptoJS.SHA256;
    var it = (hash.toString(CryptoJS.enc.Hex));
    document.getElementById('hashit').innerHTML = 'it';
</script>

<p id="hashit">Hello</p>

Answer 1

如果你想在一个元素中就地散列一些东西，那么你需要读出value/text，散列它并写回文本：

var element = document.getElementById('hashit');
var hash = CryptoJS.SHA256(element.innerHTML);
element.innerHTML = hash.toString();

这是一个可运行的片段，它会在 2 秒后更改值。

setTimeout(function(){
  var element = document.getElementById('hashit');
  var hash = CryptoJS.SHA256(element.innerHTML);
  element.innerHTML = hash.toString();
}, 2000);

<script src="https://cdn.rawgit.com/CryptoStore/crypto-js/3.1.2/build/rollups/sha256.js"></script>
<p id="hashit">Hello</p>

请记住 JavaScript 不同于 PHP。您不能像 element.innerHTML = 'it'; 这样简单地在字符串中使用变量。你必须使用element.innerHTML = it;.

使用 Crypto-js 就地散列元素内容

Hashing element contents in-place with Crypto-js

html

javascript

hash

dom

cryptojs