JS里charCodeAt()和fromCharCode()方法拓展应用：加密与解密
- PHP中文网原创
- 2017-07-10 18:10:531550浏览
JS实现客户端的网页加密解密技术，可用作选择性隐蔽展示。当然客户端的加密安全度是不能与服务器相提并论，肯定不能用于密码这类内容的加密，但对于一般级别的内容用作展示已经够了。
JS加密与解密的解决方案有很多，本文则利用String对象的charCodeAt()方法和fromCharCode()方法对字符的ASCII编码进行获取和修改。
加密,解密代码：
<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span>
<span style="color: #008080;"> 6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>网页加密及解密<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="author"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="xiongzaiqiren"</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;"> 8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="keywords"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">=""</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;"> 9</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="description"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">=""</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;">10</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="generator"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ClassBao team coding in July 10, 2017"</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;">11</span>
<span style="color: #008080;">12</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">13</span>
<span style="color: #008080;">14</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">15</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">><</span><span style="color: #800000;">textarea </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="text1"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="textfield"</span><span style="color: #ff0000;"> cols</span><span style="color: #0000ff;">="50"</span><span style="color: #ff0000;"> rows</span><span style="color: #0000ff;">="5"</span><span style="color: #0000ff;">></span>钱庄王员外这个人怎么样?<span style="color: #0000ff;"></</span><span style="color: #800000;">textarea</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">16</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="button"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="Button1"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="加密"</span><span style="color: #ff0000;"> onClick</span><span style="color: #0000ff;">="text1.value = MySign.Encrypt(text1.value);"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">17</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="button"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="Button2"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="解密"</span><span style="color: #ff0000;"> onClick</span><span style="color: #0000ff;">="text1.value = MySign.UnEncrypt(text1.value);"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">18</span>
<span style="color: #008080;">19</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">language</span><span style="color: #0000ff;">="JavaScript"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">20</span> <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> MySign </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> {
</span><span style="color: #008080;">21</span> <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">加密/解密次数</span>
<span style="color: #008080;">22</span> <span style="background-color: #f5f5f5; color: #000000;"> num: </span><span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">,
</span><span style="color: #008080;">23</span> <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">加密</span>
<span style="color: #008080;">24</span> <span style="background-color: #f5f5f5; color: #000000;"> Encrypt: </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> (Text) {
</span><span style="color: #008080;">25</span> <span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">.num </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">.num </span><span style="background-color: #f5f5f5; color: #000000;">+</span> <span style="background-color: #f5f5f5; color: #000000;">1</span><span style="background-color: #f5f5f5; color: #000000;">;
</span><span style="color: #008080;">26</span> <span style="background-color: #f5f5f5; color: #000000;"> output </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> String;
</span><span style="color: #008080;">27</span> <span style="background-color: #f5f5f5; color: #000000;"> alterText </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> Array();
</span><span style="color: #008080;">28</span> <span style="background-color: #f5f5f5; color: #000000;"> varCost </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> Array();
</span><span style="color: #008080;">29</span> <span style="background-color: #f5f5f5; color: #000000;"> TextSize </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> Text.length;
</span><span style="color: #008080;">30</span> <span style="background-color: #f5f5f5; color: #0000ff;">for</span><span style="background-color: #f5f5f5; color: #000000;"> (i </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">; i </span><span style="background-color: #f5f5f5; color: #000000;"><</span><span style="background-color: #f5f5f5; color: #000000;"> TextSize; i</span><span style="background-color: #f5f5f5; color: #000000;">++</span><span style="background-color: #f5f5f5; color: #000000;">) {
</span><span style="color: #008080;">31</span> <span style="background-color: #f5f5f5; color: #000000;"> idea </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> Math.round(Math.random() </span><span style="background-color: #f5f5f5; color: #000000;">*</span> <span style="background-color: #f5f5f5; color: #000000;">111</span><span style="background-color: #f5f5f5; color: #000000;">) </span><span style="background-color: #f5f5f5; color: #000000;">+</span> <span style="background-color: #f5f5f5; color: #000000;">77</span><span style="background-color: #f5f5f5; color: #000000;">;
</span><span style="color: #008080;">32</span> <span style="background-color: #f5f5f5; color: #000000;"> alterText[i] </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> Text.charCodeAt(i) </span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;"> idea;
</span><span style="color: #008080;">33</span> <span style="background-color: #f5f5f5; color: #000000;"> varCost[i] </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> idea;
</span><span style="color: #008080;">34</span> <span style="background-color: #f5f5f5; color: #000000;"> }
</span><span style="color: #008080;">35</span> <span style="background-color: #f5f5f5; color: #0000ff;">for</span><span style="background-color: #f5f5f5; color: #000000;"> (i </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">; i </span><span style="background-color: #f5f5f5; color: #000000;"><</span><span style="background-color: #f5f5f5; color: #000000;"> TextSize; i</span><span style="background-color: #f5f5f5; color: #000000;">++</span><span style="background-color: #f5f5f5; color: #000000;">) {
</span><span style="color: #008080;">36</span> <span style="background-color: #f5f5f5; color: #000000;"> output </span><span style="background-color: #f5f5f5; color: #000000;">+=</span><span style="background-color: #f5f5f5; color: #000000;"> String.fromCharCode(alterText[i], varCost[i]);
</span><span style="color: #008080;">37</span> <span style="background-color: #f5f5f5; color: #000000;"> }
</span><span style="color: #008080;">38</span> <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">text1.value = output;</span>
<span style="color: #008080;">39</span> <span style="background-color: #f5f5f5; color: #0000ff;">return</span><span style="background-color: #f5f5f5; color: #000000;"> output;
</span><span style="color: #008080;">40</span> <span style="background-color: #f5f5f5; color: #000000;"> },
</span><span style="color: #008080;">41</span>
<span style="color: #008080;">42</span> <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">解密</span>
<span style="color: #008080;">43</span> <span style="background-color: #f5f5f5; color: #000000;"> UnEncrypt: </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> (Text) {
</span><span style="color: #008080;">44</span> <span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;"> (</span><span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">.num </span><span style="background-color: #f5f5f5; color: #000000;">></span> <span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">) {
</span><span style="color: #008080;">45</span> <span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">.num </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">.num </span><span style="background-color: #f5f5f5; color: #000000;">-</span> <span style="background-color: #f5f5f5; color: #000000;">1</span><span style="background-color: #f5f5f5; color: #000000;">;
</span><span style="color: #008080;">46</span> <span style="background-color: #f5f5f5; color: #000000;"> output </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> String;
</span><span style="color: #008080;">47</span> <span style="background-color: #f5f5f5; color: #000000;"> alterText1 </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> Array();
</span><span style="color: #008080;">48</span> <span style="background-color: #f5f5f5; color: #000000;"> varCost1 </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> Array();
</span><span style="color: #008080;">49</span> <span style="background-color: #f5f5f5; color: #000000;"> TextSize </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> Text.length;
</span><span style="color: #008080;">50</span> <span style="background-color: #f5f5f5; color: #0000ff;">for</span><span style="background-color: #f5f5f5; color: #000000;"> (i </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">; i </span><span style="background-color: #f5f5f5; color: #000000;"><</span><span style="background-color: #f5f5f5; color: #000000;"> TextSize; i</span><span style="background-color: #f5f5f5; color: #000000;">++</span><span style="background-color: #f5f5f5; color: #000000;">) {
</span><span style="color: #008080;">51</span> <span style="background-color: #f5f5f5; color: #000000;"> alterText[i] </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> Text.charCodeAt(i);
</span><span style="color: #008080;">52</span> <span style="background-color: #f5f5f5; color: #000000;"> varCost[i] </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> Text.charCodeAt(i </span><span style="background-color: #f5f5f5; color: #000000;">+</span> <span style="background-color: #f5f5f5; color: #000000;">1</span><span style="background-color: #f5f5f5; color: #000000;">);
</span><span style="color: #008080;">53</span> <span style="background-color: #f5f5f5; color: #000000;"> }
</span><span style="color: #008080;">54</span> <span style="background-color: #f5f5f5; color: #0000ff;">for</span><span style="background-color: #f5f5f5; color: #000000;"> (i </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">; i </span><span style="background-color: #f5f5f5; color: #000000;"><</span><span style="background-color: #f5f5f5; color: #000000;"> TextSize; i </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> i </span><span style="background-color: #f5f5f5; color: #000000;">+</span> <span style="background-color: #f5f5f5; color: #000000;">2</span><span style="background-color: #f5f5f5; color: #000000;">) {
</span><span style="color: #008080;">55</span> <span style="background-color: #f5f5f5; color: #000000;"> output </span><span style="background-color: #f5f5f5; color: #000000;">+=</span><span style="background-color: #f5f5f5; color: #000000;"> String.fromCharCode(alterText[i] </span><span style="background-color: #f5f5f5; color: #000000;">-</span><span style="background-color: #f5f5f5; color: #000000;"> varCost[i]);
</span><span style="color: #008080;">56</span> <span style="background-color: #f5f5f5; color: #000000;"> }
</span><span style="color: #008080;">57</span> <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">text1.value = output;</span>
<span style="color: #008080;">58</span> <span style="background-color: #f5f5f5; color: #0000ff;">return</span><span style="background-color: #f5f5f5; color: #000000;"> output;
</span><span style="color: #008080;">59</span> <span style="background-color: #f5f5f5; color: #000000;"> }
</span><span style="color: #008080;">60</span> <span style="background-color: #f5f5f5; color: #000000;"> }
</span><span style="color: #008080;">61</span> <span style="background-color: #f5f5f5; color: #000000;"> };
</span><span style="color: #008080;">62</span>
<span style="color: #008080;">63</span>
<span style="color: #008080;">64</span> <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">测试代码</span>
<span style="color: #008080;">65</span> <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> testString </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">光头强，还不去砍树？</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">;
</span><span style="color: #008080;">66</span> <span style="background-color: #f5f5f5; color: #000000;"> console.log(testString);
</span><span style="color: #008080;">67</span>
<span style="color: #008080;">68</span> <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> sign </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> MySign.Encrypt(testString); </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">凑妣o忕ｧ[還¬什³呯´硠S桲aﾁb</span>
<span style="color: #008080;">69</span> <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> sign2 </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> MySign.UnEncrypt(sign); </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">光头强，还不去砍树？</span>
<span style="color: #008080;">70</span>
<span style="color: #008080;">71</span> <span style="background-color: #f5f5f5; color: #000000;"> console.log(sign);
</span><span style="color: #008080;">72</span> <span style="background-color: #f5f5f5; color: #000000;"> console.log(sign2);
</span><span style="color: #008080;">73</span>
<span style="color: #008080;">74</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">75</span>
<span style="color: #008080;">76</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">77</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
以上是JS里charCodeAt()和fromCharCode()方法拓展应用：加密与解密的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn