Merge pull request #44 from denisstasyev/aes

Add Hash functions, AES
denisstasyev · Mar 15, 2020 · c5ee325 · c5ee325
2 parents 578b9b5 + 1aa1929
commit c5ee325
Show file tree

Hide file tree

Showing 63 changed files with 1,797 additions and 441 deletions.
diff --git a/README.md b/README.md
@@ -19,24 +19,40 @@ You can find the implementation of methods for the backend part in [this reposit
 
 The following encryption and decryption methods are now available:
 
-- Cesar
-- Monoalphabetic
-- Polyalphabetic (Vigenère)
-- Bigram (Porta's with an additional shift)
+- Basic methods
+
+  - Cesar
+  - Monoalphabetic
+  - Polyalphabetic (Vigenère)
+  - Bigram (Porta's with an additional shift)
+
+- Block methods
+  - AES
+  - GOST
 
 More information about encryption and decryption methods are available in [`src/libmethods/encryption` folder](https://github.com/denisstasyev/Information_Security_JS/tree/master/src/libmethods/encryption).
 
 ## Available Checksums
 
 The following checksum methods are now available:
 
-- CRC16
-- CRC24
-- CRC32
-- Fletcher16
+- CRC-16
+- CRC-24
+- CRC-32
+- Fletcher-16
 
 More information about checksum methods are available in [`src/libmethods/checksum` folder](https://github.com/denisstasyev/Information_Security_JS/tree/master/src/libmethods/checksum).
 
+## Available Hash functions
+
+The following hash functions are now available:
+
+- SHA-256
+- SHA-512
+- SHA-3
+
+More information about checksum methods are available in [`src/libmethods/hashing` folder](https://github.com/denisstasyev/Information_Security_JS/tree/master/src/libmethods/hashing).
+
 ## Available Scripts
 
 > This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,8 +14,12 @@
     "@types/react-dom": "^16.9.5",
     "@types/react-redux": "^7.1.7",
     "@types/react-router-dom": "^5.1.3",
+    "aes-js": "^3.1.2",
     "crc": "^3.8.0",
+    "crypto-js": "^4.0.0",
     "fletcher": "0.0.3",
+    "gost89": "^0.1.11",
+    "js-crypto-random": "^0.4.3",
     "node-sass": "^4.13.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",

diff --git a/public/index.html b/public/index.html
@@ -69,6 +69,38 @@
     />
   </head>
   <body>
+    <!-- Rating Mail.ru counter -->
+    <!-- <script type="text/javascript">
+      var _tmr = window._tmr || (window._tmr = []);
+      _tmr.push({ id: '3165691', type: 'pageView', start: new Date().getTime() });
+      (function(d, w, id) {
+        if (d.getElementById(id)) return;
+        var ts = d.createElement('script');
+        ts.type = 'text/javascript';
+        ts.async = true;
+        ts.id = id;
+        ts.src = 'https://top-fwz1.mail.ru/js/code.js';
+        var f = function() {
+          var s = d.getElementsByTagName('script')[0];
+          s.parentNode.insertBefore(ts, s);
+        };
+        if (w.opera == '[object Opera]') {
+          d.addEventListener('DOMContentLoaded', f, false);
+        } else {
+          f();
+        }
+      })(document, window, 'topmailru-code');
+    </script>
+    <noscript
+      ><div>
+        <img
+          src="https://top-fwz1.mail.ru/counter?id=3165691;js=na"
+          style="border:0;position:absolute;left:-9999px;"
+          alt="Top.Mail.Ru"
+        /></div
+    ></noscript> -->
+    <!-- //Rating Mail.ru counter -->
+
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

diff --git a/src/App.tsx b/src/App.tsx
@@ -6,9 +6,18 @@ import { Content } from 'components/Content';
 import { Footer } from 'components/Footer';
 
 import { Home } from 'containers/Home';
+
 import { Encrypt } from 'containers/Encrypt';
 import { Decrypt } from 'containers/Decrypt';
+
+import { BasicEncrypt } from 'containers/Encrypt/Basic';
+import { BasicDecrypt } from 'containers/Decrypt/Basic';
+
+import { BlockEncrypt } from 'containers/Encrypt/Block';
+import { BlockDecrypt } from 'containers/Decrypt/Block';
+
 import { Checksum } from 'containers/Checksum';
+import { Hashing } from 'containers/Hashing';
 import { NotFound } from 'containers/NotFound';
 
 const App = () => {
@@ -18,9 +27,18 @@ const App = () => {
       <Content>
         <Switch>
           <Route exact path="/" component={Home} />
-          <Route path="/encrypt/" component={Encrypt} />
-          <Route path="/decrypt/" component={Decrypt} />
+
+          <Route exact path="/encrypt/" component={Encrypt} />
+          <Route exact path="/decrypt/" component={Decrypt} />
+
+          <Route path="/encrypt/basic" component={BasicEncrypt} />
+          <Route path="/decrypt/basic" component={BasicDecrypt} />
+
+          <Route path="/encrypt/block" component={BlockEncrypt} />
+          <Route path="/decrypt/block" component={BlockDecrypt} />
+
           <Route path="/checksum/" component={Checksum} />
+          <Route path="/hash/" component={Hashing} />
           <Route path="*" component={NotFound} />
         </Switch>
       </Content>

diff --git a/src/components/Alarm/alarm.module.scss b/src/components/Alarm/alarm.module.scss
@@ -39,4 +39,5 @@
   @extend .alarm;
 
   background-color: lightpink;
+  text-align: center;
 }
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
@@ -11,7 +11,8 @@ export default function(props: any) {
           .offsetHeight + 10}px`),
     );
     document.getElementById('content')!.style.minHeight = `${window.innerHeight -
-      document.getElementById('header')!.offsetHeight}px`;
+      document.getElementById('header')!.offsetHeight -
+      50}px`;
   };
 
   React.useEffect(() => {

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -5,13 +5,13 @@ import styles from './footer.module.scss';
 
 import { Tag } from 'components/Tag';
 
-import { links } from 'config';
+import { allLinks } from 'config';
 
 export default function() {
   return (
     <div id="footer" className={styles['footer']}>
       <div className={styles['footer-links']}>
-        {links.map((link, index) => (
+        {allLinks.map((link, index) => (
           <div className={styles['link']} key={index}>
             <Tag link={link} />
           </div>
@@ -20,6 +20,17 @@ export default function() {
       <Link className={styles['copyright']} to="/">
         © Спецпроект "Шифровальщик", {new Date().getFullYear()} г. Все права защищены.
       </Link>
+      {/* <!-- Rating Mail.ru logo --> */}
+      {/* <a href="https://top.mail.ru/jump?from=3165691">
+        <img
+          src="https://top-fwz1.mail.ru/counter?id=3165691;t=466;l=1"
+          style={{ border: 0 }}
+          height="31"
+          width="88"
+          alt="Top.Mail.Ru"
+        />
+      </a> */}
+      {/* <!-- //Rating Mail.ru logo --> */}
     </div>
   );
 }
diff --git a/src/components/Footer/footer.module.scss b/src/components/Footer/footer.module.scss
@@ -32,9 +32,10 @@
 
 .copyright {
   margin: $x2 $x4;
+  text-align: center;
 }
 
-@media screen and (max-width: $max-width-phone) {
+@media screen and (max-width: $max-width-tablet) {
   .footer-links {
     flex-wrap: wrap;
     justify-content: center;

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -7,7 +7,7 @@ import { Tag } from 'components/Tag';
 
 import Logo from 'assets/logo.png';
 
-import { links } from 'config';
+import { mainLinks } from 'config';
 
 export default function() {
   return (
@@ -18,7 +18,7 @@ export default function() {
       </Link>
 
       <div className={styles['header-links']}>
-        {links.map((link, index) => (
+        {mainLinks.map((link, index) => (
           <div className={styles['link']} key={index}>
             <Tag link={link} />
           </div>

diff --git a/src/components/Header/header.module.scss b/src/components/Header/header.module.scss
@@ -70,13 +70,13 @@ $header-height: $x20;
 
 .logo {
   position: relative;
-  bottom: $x1;
+  // bottom: $x1;
   height: $x8;
 }
 
 .text {
   margin-left: $x3;
-  height: 52px;
+  // height: 52px;
 
   white-space: nowrap;
 }

diff --git a/src/components/Tag/tag.module.scss b/src/components/Tag/tag.module.scss
@@ -1,12 +1,14 @@
 @import 'styles/_mods.scss';
 
 .header-link {
-  white-space: nowrap;
+  // white-space: nowrap;
 
   border-radius: $x2;
   padding: $x1;
 
   box-shadow: $depth1;
+
+  display: inline-block;
 }
 
 .header-link-active {

diff --git a/src/config.ts b/src/config.ts
@@ -1,10 +1,29 @@
-export const CIPHER_ALGORITHM = 'cipher_algorithm';
+export const CIPHER_METHOD = 'cipher_algorithm';
 // export const ENCRYPTED_DATA_CODES = 'encrypted_data_codes';
 export const ENCRYPTED_DATA = 'encrypted_data';
+export const ENCRYPTED_DATA_BASE64 = 'encrypted_data_base64';
+export const INITIALIZATION_VECTOR = 'initialization_vector';
 
-export const links = [
+export const CHECKSUM_METHOD = 'checksum_algorithm';
+export const CHECKSUM_TEXT = 'checksum_text';
+export const CHECKSUM_VALUE = 'checksum_value';
+
+export const HASH_METHOD = 'hash_method';
+export const HASH_VALUE = 'hash_value';
+export const HASH_VALUE_BASE64 = 'hash_value_base64';
+
+export const mainLinks = [
   { title: 'Зашифровать', href: '/encrypt/', isActive: true },
   { title: 'Расшифровать', href: '/decrypt/', isActive: true },
   { title: 'Посчитать контрольную сумму', href: '/checksum/', isActive: true },
-  { title: 'Хешировать', href: '/hash/', isActive: false },
+  { title: 'Хешировать', href: '/hash/', isActive: true },
+];
+
+export const allLinks = [
+  { title: 'Простое шифрование', href: '/encrypt/basic/', isActive: true },
+  { title: 'Расшифрование простого', href: '/decrypt/basic/', isActive: true },
+  { title: 'Блочное шифрование', href: '/encrypt/block/', isActive: true },
+  { title: 'Расшифрование блочного', href: '/decrypt/block/', isActive: true },
+  { title: 'Контрольная сумма', href: '/checksum/', isActive: true },
+  { title: 'Хеширование', href: '/hash/', isActive: true },
 ];
diff --git a/src/containers/Checksum/Checksum.tsx b/src/containers/Checksum/Checksum.tsx
@@ -3,6 +3,8 @@ import * as React from 'react';
 import { ContentBox } from 'components/ContentBox';
 import { Alarm } from 'components/Alarm';
 
+import { CHECKSUM_METHOD, CHECKSUM_TEXT, CHECKSUM_VALUE } from 'config';
+
 import { checksumMethods } from 'libmethods';
 import { countChecksum, TypesCheckSum } from 'libmethods/checksum';
 
@@ -24,6 +26,16 @@ export default function() {
     setChecksum(countChecksum(method, text));
   };
 
+  const getJSON = (method: TypesCheckSum, text: string) => {
+    const methodName = `${method.name}${'version' in method ? '/' + method.version : ''}`;
+    let json = {
+      [CHECKSUM_METHOD]: methodName,
+      [CHECKSUM_TEXT]: text,
+      [CHECKSUM_VALUE]: method.value,
+    };
+    return JSON.stringify(json, undefined, 2);
+  };
+
   return (
     <>
       <ContentBox title="Контрольная сумма">
@@ -66,12 +78,17 @@ export default function() {
             <tbody>
               {checksum.map((item, index) => (
                 <tr key={index}>
-                  <td>{item.name}</td>
+                  <td>
+                    {item.name}
+                    {'version' in item ? '/' + item.version : ''}
+                  </td>
                   <td>{item.value}</td>
                 </tr>
               ))}
             </tbody>
           </table>
+          <span>2) JSON для отправки на сервер контрольных сумм:</span>
+          <textarea value={getJSON(checksum[0], text)} onChange={() => {}} />
         </ContentBox>
       )}
     </>