Application étendue des méthodes charCodeAt() et fromCharCode() en JS : cryptage et déchiffrement-js tutoriel-php.cn

JS implémente une technologie de cryptage et de décryptage de pages Web côté client, qui peut être utilisée pour l'affichage de dissimulation sélective. Bien entendu, la sécurité du cryptage du client ne peut pas être comparée à celle du serveur, et elle ne peut certainement pas être utilisée pour crypter des contenus tels que des mots de passe, mais elle est suffisante pour l'affichage de contenus de niveau général.
Il existe de nombreuses solutions pour le chiffrement et le déchiffrement JS. Cet article utilise la méthode charCodeAt() et la méthode fromCharCode() de l'objet String pour obtenir et modifier l'encodage ASCII des caractères.
Cryptage, code de décryptage :
<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>
Copier après la connexion
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!