Merge pull request #34 from Cosmian/feat/update_sales

feat: update sales

public/actions/javascript/backendConfig.ts

@@ -1,2 +1,2 @@
 export const BACKEND_URL = import.meta.env.VITE_KMS_URL as string;
-export const MSE_APP_URL = import.meta.env.VITE_CONFIDENTIAL_SERVICE_URL as string;
+export const RUNNER_URL = import.meta.env.VITE_CONFIDENTIAL_SERVICE_URL as string;

public/actions/javascript/sendDocumentContent.ts

@@ -1,9 +1,9 @@
-import { MSE_APP_URL } from "./backendConfig";
+import { RUNNER_URL } from "./backendConfig"
 
 export const summarizeDocumentContent = async (textInput: string): Promise<{ summary: string } | Error> => {
   const formData = new FormData();
   formData.append("doc", textInput);
-  const response = await fetch(`${MSE_APP_URL}/summarize`, {
+  const response = await fetch(`${RUNNER_URL}/summarize`, {
     method: "POST",
     body: formData,
   });

public/actions/javascript/sendEncryptedDocument.ts

@@ -1,5 +1,5 @@
-import aes from "js-crypto-aes";
-import { MSE_APP_URL } from "./backendConfig";
+import aes from "js-crypto-aes"
+import { RUNNER_URL } from "./backendConfig"
 
 export const sendEncryptedDocument = async (
   textInput: Uint8Array,
@@ -13,7 +13,7 @@ export const sendEncryptedDocument = async (
   formData.append("key_id", keyUid);
   formData.append("nonce", btoa(String.fromCodePoint(...iv)));
   formData.append("encrypted_doc", new Blob([encryptedText]), "text.doc");
-  const response = await fetch(`${MSE_APP_URL}/kms_summarize`, {
+  const response = await fetch(`${RUNNER_URL}/kms_summarize`, {
     method: "POST",
     body: formData,
   });

public/actions/javascript/summarizeDocumentContent.ts

@@ -1,9 +1,9 @@
-import { MSE_APP_URL } from "./backendConfig";
+import { RUNNER_URL } from "./backendConfig"
 
 export const summarizeDocumentContent = async (textInput: string, userToken: string): Promise<{ summary: string } | Error> => {
   const formData = new FormData();
   formData.append("doc", textInput);
-  const response = await fetch(`${MSE_APP_URL}/summarize`, {
+  const response = await fetch(`${RUNNER_URL}/summarize`, {
     method: "POST",
     headers: {
       Authorization: "Bearer " + userToken,

src/actions/javascript/backendConfig.ts

@@ -1,2 +1,2 @@
 export const BACKEND_URL = import.meta.env.VITE_KMS_URL as string;
-export const MSE_APP_URL = import.meta.env.VITE_CONFIDENTIAL_SERVICE_URL as string;
+export const RUNNER_URL = import.meta.env.VITE_CONFIDENTIAL_SERVICE_URL as string;

src/actions/javascript/summarizeDocumentContent.ts

@@ -1,9 +1,9 @@
-import { MSE_APP_URL } from "./backendConfig";
+import { RUNNER_URL } from "./backendConfig"
 
 export const summarizeDocumentContent = async (textInput: string, userToken: string): Promise<{ summary: string } | Error> => {
   const formData = new FormData();
   formData.append("doc", textInput);
-  const response = await fetch(`${MSE_APP_URL}/summarize`, {
+  const response = await fetch(`${RUNNER_URL}/summarize`, {
     method: "POST",
     headers: {
       Authorization: "Bearer " + userToken,

src/component/layout.less

@@ -184,6 +184,9 @@ ul {
       font-size: 1rem;
     }
   }
+  .code-cmd {
+    margin: 10px 0px 20px 20px;
+  }
   .single-content .introduction,
   .content .introduction {
     font-family: "Montserrat", Arial, Helvetica, sans-serif;

src/pages/cse/AboutCse.tsx

@@ -1,8 +1,8 @@
-import { Link } from "react-router-dom";
-import GoogleCse from "../../assets/google_cse_architecture.drawio.svg";
-import { ImageWrapper, SingleContent } from "../../component/Layout";
-import { useBoundStore } from "../../store/store";
-import { findCurrentNavigationItem } from "../../utils/navigationActions";
+import { Link } from "react-router-dom"
+import CseSchema from "../../assets/cse_schema.drawio.svg"
+import { ImageWrapper, SingleContent } from "../../component/Layout"
+import { useBoundStore } from "../../store/store"
+import { findCurrentNavigationItem } from "../../utils/navigationActions"
 
 const AboutCse = (): JSX.Element => {
   const steps = useBoundStore((state) => state.steps);
@@ -14,16 +14,22 @@ const AboutCse = (): JSX.Element => {
       <p className="introduction">
         Using Google{" "}
         <Link to="https://support.google.com/a/answer/10741897" target="_blank" rel="noopener noreferrer">
-          client-side encryption
+          CSE
         </Link>
-        , we show how to summarize or translate an encrypted document, using Cosmian AI.
+         {" "}(client-side encryption) or Microsoft{" "}
+         <Link to="https://learn.microsoft.com/en-us/purview/double-key-encryption" target="_blank" rel="noopener noreferrer">
+          DKE
+        </Link>
+        {" "}(double key encryption), together with Cosmian KMS, you can work with client-side encrypted documents.
+      </p>
+      <p>
+        When configured on workplace applications - client-side encryption uses <b>Cosmian KMS</b> to handle encryption operations.
       </p>
       <p>
-        Text content is parsed in the browser (using Cosmian AI dedicated Chrome extension) and sent to the runner AI, which is in a Cosmian
-        VM (verifiabled TEE), using TLS connexion.
+        <b>Cosmian AI</b> restores some AI functionalities without compromising security: text content is parsed directly in the browser via Cosmian AI’s dedicated Chrome extension, then securely sent to the AI runner within a Cosmian VM (verifiable TEE) over a TLS connection.
       </p>
-      <ImageWrapper maxWidth={800}>
-        <img src={GoogleCse} alt="Google CSE architecture" width="100%" />
+      <ImageWrapper maxWidth={600} style={{marginTop: "50px"}}>
+        <img src={CseSchema} alt="Global CSE architecture" width="100%" />
       </ImageWrapper>
     </SingleContent>
   );

src/pages/cse/ConfigureCse.tsx

@@ -0,0 +1,73 @@
+import { useEffect } from "react"
+import { Link } from "react-router-dom"
+import Split from "../../component/Split"
+import { useBoundStore } from "../../store/store"
+import { findCurrentNavigationItem, updateNavigationSteps } from "../../utils/navigationActions"
+
+const ConfigureCse = (): JSX.Element => {
+  const { steps, setSteps } = useBoundStore((state) => state);
+  const currentItem = findCurrentNavigationItem(steps);
+
+  useEffect(() => {
+    return () => {
+      updateNavigationSteps(steps, setSteps);
+    };
+  }, []);
+
+  return (
+    <Split>
+      <Split.Content>
+        <h1>{currentItem?.label}</h1>
+        <p>
+          <Link to="https://cosmian.com/data-protection-suite/cosmian-kms/" target="_blank" rel="noopener noreferrer">
+           Cosmian KMS
+          </Link> (key management server) is compatible with Google Workspace client-side encryption.</p>
+          <p>Using this feature, users from an organization can encrypt files and documents, in their browsers, before sending them to Google servers. The ephemeral encryption keys are protected by “key wrapping keys”, stored in the KMS and unavailable to Google. Only users that have the right to unwrap the ephemeral encryption keys inside the KMS, can decrypt the files. An overview is provided in Google’s{" "}
+          <Link to="https://apps.google.com/supportwidget/articlehome?hl=en&article_url=https%3A%2F%2Fsupport.google.com%2Fa%2Fanswer%2F10741897%3Fhl%3Den&assistant_id=generic-unu&product_context=10741897&product_name=UnuFlow&trigger_context=a" target="_blank" rel="noopener noreferrer">
+            About client-side encryption
+          </Link> page.
+        </p>
+        <p>
+          Enable CSE from Google Workspace client-side encryption page of the admin console.
+        </p>
+        <p>Configuration steps:</p>
+        <ul>
+          <li>Choose and configure an <b>Identity Provider</b></li>
+          <li>Instantiate and configure a <b>Key Management Server</b> (Cosmian KMS)</li>
+          <li>Generate <b><i>google_cse</i> key</b> from the KMS</li>
+          <div className="code-cmd">
+            <code>
+              {GOOGLE_CSE_KEY}
+            </code>
+            <br />
+            <code>
+              {GOOGLE_CSE_GRANT}
+            </code>
+          </div>
+          <li>Handle <b>guest Identity Providers</b> for external users <i>(optional)</i></li>
+          <li>Generate <b>Gmail S/MIME</b> elements: users key-pairs and identities  <i>(optional)</i></li>
+          <div className="code-cmd">
+            <code>
+              {GOOGLE_CSE_SMIME_KEYPAIR}
+            </code>
+            < br/>
+            <code>
+              {GOOGLE_CSE_SMIME_IDENTITY}
+            </code>
+          </div>
+        </ul>
+      </Split.Content>
+    </Split>
+  );
+};
+
+export default ConfigureCse;
+
+
+const GOOGLE_CSE_KEY = "> ckms sym keys create -t google_cse google_cse";
+
+const GOOGLE_CSE_GRANT = "> ckms access-rights grant USER_ID google_cse get encrypt decrypt";
+
+const GOOGLE_CSE_SMIME_KEYPAIR = "> ckms google key-pairs create --cse-key-id CSE_KEY_ID --subject-name \"C=FR, ST=IdF, L=Paris, O=YOUR_ORGANIZATION, OU=DEPARTMENT, CN=user@your_organization.com, emailAddress=user@your_organization.com\" -i ISSUER_PRIVATE_KEY_ID user@your_organization.com";
+
+const GOOGLE_CSE_SMIME_IDENTITY = "> ckms google identities insert --user-id user@your_organization.com CREATED_KEYPAIR_ID";

src/pages/cse/ConfigureDke.tsx

@@ -0,0 +1,45 @@
+import { Link } from "react-router-dom"
+import Split from "../../component/Split"
+import { useBoundStore } from "../../store/store"
+import { findCurrentNavigationItem } from "../../utils/navigationActions"
+
+const ConfigureDke = (): JSX.Element => {
+  const { steps } = useBoundStore((state) => state);
+  const currentItem = findCurrentNavigationItem(steps);
+
+  return (
+    <Split>
+      <Split.Content>
+        <h1>{currentItem?.label}</h1>
+        <p>Cosmian KMS (key management server) is compatible with Microsoft double key encryption.</p>
+        <p>
+        Microsoft DKE is a feature of Microsoft 365 that allows you to protect your most sensitive data by encrypting data on the client computer before sending it to Microsoft servers. One of the keys used to encrypt remains under your control and makes the data unreadable by Microsoft. This key is kept inside your instance of <Link to="https://cosmian.com/data-protection-suite/cosmian-kms/" target="_blank" rel="noopener noreferrer">
+             Cosmian KMS.
+          </Link>
+        </p>
+        <p>
+          Once DKE is configured, the whole process consists in assigning a specific sensitivity label to a document. The label will indicate that the document is encrypted and that the key to decrypt it is stored in your Cosmian KMS.
+          Please check the dedicated <Link to="https://learn.microsoft.com/en-us/purview/double-key-encryption" target="_blank" rel="noopener noreferrer">
+            Microsoft documentation
+          </Link> for a complete overview of the feature.
+        </p>
+        <p>The DKE feature is currently only available for the Office Windows clients.</p>
+        <p>Configuration steps:</p>
+        <ul>
+          <li>Configure Microsoft DKE in Purview and create a sensitivity label for encryption</li>
+          <li>Instantiate and configure Cosmian <b>Key Management Server</b> (Cosmian KMS)</li>
+          <li>Generate <b>RSA key</b> with tag <i>dke_key</i></li>
+          <div className="code-cmd">
+            <code>
+              {DKE_KEY}
+            </code>
+          </div>
+        </ul>
+      </Split.Content>
+    </Split>
+  );
+};
+
+export default ConfigureDke;
+
+const DKE_KEY = "> ckms rsa keys create --tag dke_key --size_in_bits 2048";

src/pages/cse/SetupCse.tsx → src/pages/cse/SetupAiRunner.tsx

@@ -1,12 +1,12 @@
-import { CheckCircleOutlined } from "@ant-design/icons";
-import { Button } from "cosmian_ui";
-import { useNavigate } from "react-router-dom";
-import { CodeBackground, VmCode } from "../../component/Code";
-import Split from "../../component/Split";
-import { useBoundStore, useCseStore } from "../../store/store";
-import { findCurrentNavigationItem, updateNavigationSteps } from "../../utils/navigationActions";
+import { CheckCircleOutlined } from "@ant-design/icons"
+import { Button } from "cosmian_ui"
+import { useNavigate } from "react-router-dom"
+import { CodeBackground, VmCode } from "../../component/Code"
+import Split from "../../component/Split"
+import { useBoundStore, useCseStore } from "../../store/store"
+import { findCurrentNavigationItem, updateNavigationSteps } from "../../utils/navigationActions"
 
-const SetupCse = (): JSX.Element => {
+const SetupAiRunner = (): JSX.Element => {
   const { integrity, setIntegrity } = useCseStore((state) => state);
   const { steps, setSteps } = useBoundStore((state) => state);
   const navigate = useNavigate();
@@ -43,9 +43,9 @@ const SetupCse = (): JSX.Element => {
   );
 };
 
-export default SetupCse;
+export default SetupAiRunner;
 
-const INTEGRITY = `$ ./cosmian_vm verify --url MSE_APP_URL --snapshot cosmian_vm.snapshot
+const INTEGRITY = `$ ./cosmian_vm verify --url RUNNER_URL --snapshot cosmian_vm.snapshot
 Fetching the collaterals...
 [ OK ] Verifying VM integrity
 [ OK ] Verifying TPM attestation