48 attack jailbreak prompt (#86)

* General css for strategies * Attack box * Slightly better strategy styling * Fixed attack id * Attack mechanism no longer highlighted on hover * TypeScript attacks * TypeScript AttackBox * Removed JS DefenceBox
ScottLogic · Aug 8, 2023 · b11314f · b11314f
1 parent a09c06c
commit b11314f
Show file tree

Hide file tree

Showing 10 changed files with 130 additions and 51 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,4 +1,5 @@
 import "./App.css";
+import AttackBox from "./components/AttackBox/AttackBox";
 import ChatBox from "./components/ChatBox/ChatBox";
 import DefenceBox from "./components/DefenceBox/DefenceBox";
 import EmailBox from "./components/EmailBox/EmailBox";
@@ -23,6 +24,8 @@ function App() {
  <div className="side-bar">
  <div className="side-bar-header">defence mechanisms</div>
  <DefenceBox key={defenceBoxKey} triggeredDefences={triggeredDefences} />
+ <div className="side-bar-header">attack mechanisms</div>
+ <AttackBox />
  </div>
  <div id="centre-area">
  <Header />

diff --git a/frontend/src/Attacks.ts b/frontend/src/Attacks.ts
@@ -0,0 +1,11 @@
+import { ATTACK_TYPES, AttackInfo } from "./models/attack";
+
+const ATTACKS: AttackInfo[] = [
+ {
+ id: ATTACK_TYPES.JAILBREAK_PROMPT,
+ name: "jailbreak prompt",
+ info: "using prompt injection, get the chat bot in a state where it no longer follows its original instructions.",
+ },
+];
+
+export default ATTACKS;
diff --git a/frontend/src/components/AttackBox/AttackBox.tsx b/frontend/src/components/AttackBox/AttackBox.tsx
@@ -0,0 +1,15 @@
+import "../StrategyBox/StrategyBox.css";
+import AttackMechanism from "./AttackMechanism";
+import ATTACKS from "../../Attacks";
+
+function AttackBox() {
+ return (
+ <div id="strategy-box">
+ {ATTACKS.map((attack, index) => {
+ return <AttackMechanism key={attack.id} attack={attack} />;
+ })}
+ </div>
+ );
+}
+
+export default AttackBox;
diff --git a/frontend/src/components/AttackBox/AttackMechanism.tsx b/frontend/src/components/AttackBox/AttackMechanism.tsx
@@ -0,0 +1,33 @@
+import { AttackInfo } from "../../models/attack";
+import "../StrategyBox/StrategyMechanism.css";
+import React from "react";
+
+function DefenceMechanism({ attack }: { attack: AttackInfo }) {
+ const [isInfoBoxVisible, setIsInfoBoxVisible] = React.useState(false);
+
+ return (
+ <span>
+ <div className="strategy-mechanism">
+ <div className="strategy-mechanism-header">
+ <span>{attack.name}</span>
+ <span
+ className="strategy-mechanism-info"
+ onMouseOver={() => {
+ setIsInfoBoxVisible(true);
+ }}
+ onMouseLeave={() => {
+ setIsInfoBoxVisible(false);
+ }}
+ >
+ <span>?</span>
+ </span>
+ </div>
+ {isInfoBoxVisible ? (
+ <div className="strategy-mechanism-info-box">{attack.info}</div>
+ ) : null}
+ </div>
+ </span>
+ );
+}
+
+export default DefenceMechanism;
diff --git a/frontend/src/components/DefenceBox/DefenceBox.tsx b/frontend/src/components/DefenceBox/DefenceBox.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import "./DefenceBox.css";
+import "../StrategyBox/StrategyBox.css";
 import DefenceMechanism from "./DefenceMechanism";
 import {
  getActiveDefences,
@@ -70,7 +70,7 @@ function DefenceBox({ triggeredDefences }: { triggeredDefences: string[] }) {
  }, [defenceDetails]);
 
  return (
- <div id="defence-box">
+ <div id="strategy-box">
  {defenceDetails.map((defenceDetail, index) => {
  return (
  <DefenceMechanism

diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.css b/frontend/src/components/DefenceBox/DefenceMechanism.css
@@ -1,52 +1,12 @@
-.defence-mechanism {
- border-color: #ccc;
- border-radius: 8px;
- border-style: solid;
- border-width: 1px;
- padding: 6px;
- margin-bottom: 8px;
- cursor: default;
-}
-
 .defence-active {
  background-color: #eef;
 }
 
 .defence-mechanism:hover {
  border-color: #444;
  border-width: 2px;
-}
-
-.defence-mechanism-header {
- display: flex;
- justify-content: space-between;
-}
-
-.defence-mechanism-info {
- display: flex;
- align-items: center;
- justify-content: center;
- border-color: #ccc;
- border-radius: 10px;
- border-style: solid;
- border-width: 1px;
- height: 20px;
- width: 20px;
- background-color: #ddd;
- color: #444;
-}
-
-.defence-mechanism-info span {
- position: relative;
- bottom: 1px;
-}
-
-.defence-mechanism-info-box {
- border-color: #ccc;
- border-style: solid;
- border-width: 1px 0 0 0;
- font-size: 14px;
- margin-top: 4px;
+ margin: 0px;
+ margin-bottom: 7px;
 }
 
 @keyframes flash-red-active {

diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.tsx b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { DefenceInfo } from "../../models/defence";
 import "./DefenceMechanism.css";
+import "../StrategyBox/StrategyMechanism.css";
 
 const ANIMATION_FLASH_TIME_SECONDS = 1;
 const ANIMATION_FLASH_REPEAT = 3;
@@ -24,8 +25,8 @@ function DefenceMechanism({
  key={key}
  className={
  defenceDetail.isActive
- ? "defence-mechanism defence-active"
- : "defence-mechanism"
+ ? "strategy-mechanism defence-mechanism defence-active"
+ : "strategy-mechanism defence-mechanism"
  }
  style={
  defenceDetail.isTriggered
@@ -54,10 +55,10 @@ function DefenceMechanism({
  : setDefenceActive(defenceDetail.id);
  }}
  >
- <div className="defence-mechanism-header">
- <span className="defence-mechanism-name">{defenceDetail.name}</span>
+ <div className="strategy-mechanism-header">
+ <span>{defenceDetail.name}</span>
  <span
- className="defence-mechanism-info"
+ className="strategy-mechanism-info"
  onMouseOver={() => {
  setIsInfoBoxVisible(true);
  }}
@@ -69,7 +70,9 @@ function DefenceMechanism({
  </span>
  </div>
  {isInfoBoxVisible ? (
- <div className="defence-mechanism-info-box">{defenceDetail.info}</div>
+ <div className="strategy-mechanism-info-box">
+ {defenceDetail.info}
+ </div>
  ) : null}
  </div>
  </span>

diff --git a/.../src/components/DefenceBox/DefenceBox.css → ...rc/components/StrategyBox/StrategyBox.css b/.../src/components/DefenceBox/DefenceBox.css → ...rc/components/StrategyBox/StrategyBox.css
@@ -1,4 +1,4 @@
-#defence-box {
+#strategy-box {
  padding: 16px 32px;
  position: relative;
 }
diff --git a/frontend/src/components/StrategyBox/StrategyMechanism.css b/frontend/src/components/StrategyBox/StrategyMechanism.css
@@ -0,0 +1,42 @@
+.strategy-mechanism {
+ border-color: #ccc;
+ border-radius: 8px;
+ border-style: solid;
+ border-width: 1px;
+ padding: 6px;
+ margin: 1px;
+ margin-bottom: 8px;
+ cursor: default;
+}
+
+.strategy-mechanism-header {
+ display: flex;
+ justify-content: space-between;
+}
+
+.strategy-mechanism-info {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-color: #ccc;
+ border-radius: 10px;
+ border-style: solid;
+ border-width: 1px;
+ height: 20px;
+ width: 20px;
+ background-color: #ddd;
+ color: #444;
+}
+
+.strategy-mechanism-info span {
+ position: relative;
+ bottom: 1px;
+}
+
+.strategy-mechanism-info-box {
+ border-color: #ccc;
+ border-style: solid;
+ border-width: 1px 0 0 0;
+ font-size: 14px;
+ margin-top: 4px;
+}
diff --git a/frontend/src/models/attack.ts b/frontend/src/models/attack.ts
@@ -0,0 +1,12 @@
+enum ATTACK_TYPES {
+ JAILBREAK_PROMPT = "JAILBREAK_PROMPT",
+}
+
+interface AttackInfo {
+ id: ATTACK_TYPES;
+ name: string;
+ info: string;
+}
+
+export { ATTACK_TYPES };
+export type { AttackInfo };