diff --git a/config/config.go b/config/config.go
index 9d443b9cb..c2fdaa660 100644
--- a/config/config.go
+++ b/config/config.go
@@ -205,6 +205,9 @@ func VerifyConfig() error {
 		cssFontRestriction = "'self'"
 	}
 
+	// The default Content Security Policy is updates on every application page load to replace script-src 'self'
+	// with a random nonce ID to prevent XSS. This applies to the Mailpit app & API.
+	// See server.middleWareFunc()
 	ContentSecurityPolicy = fmt.Sprintf("default-src 'self'; script-src 'self'; style-src %s 'unsafe-inline'; frame-src 'self'; img-src * data: blob:; font-src %s data:; media-src 'self'; connect-src 'self' ws: wss:; object-src 'none'; base-uri 'self';",
 		cssFontRestriction, cssFontRestriction,
 	)
diff --git a/package-lock.json b/package-lock.json
index 6788fbf77..fde6e5c08 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "bootstrap5-tags": "^1.6.1",
         "color-hash": "^2.0.2",
         "dayjs": "^1.11.10",
+        "dompurify": "^3.1.6",
         "ical.js": "^2.0.1",
         "modern-screenshot": "^4.4.30",
         "prismjs": "^1.29.0",
@@ -1417,6 +1418,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.6.tgz",
+      "integrity": "sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ=="
+    },
     "node_modules/end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
diff --git a/package.json b/package.json
index d48725c6d..be6f5a10c 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "bootstrap5-tags": "^1.6.1",
     "color-hash": "^2.0.2",
     "dayjs": "^1.11.10",
+    "dompurify": "^3.1.6",
     "ical.js": "^2.0.1",
     "modern-screenshot": "^4.4.30",
     "prismjs": "^1.29.0",
diff --git a/server/server.go b/server/server.go
index aee94d59d..55dfae362 100644
--- a/server/server.go
+++ b/server/server.go
@@ -25,6 +25,7 @@ import (
 	"github.com/axllent/mailpit/server/pop3"
 	"github.com/axllent/mailpit/server/websockets"
 	"github.com/gorilla/mux"
+	"github.com/lithammer/shortuuid/v4"
 )
 
 //go:embed ui
@@ -75,11 +76,11 @@ func Listen() {
 	}
 
 	// UI shortcut
-	r.HandleFunc(config.Webroot+"view/latest", handlers.RedirectToLatestMessage).Methods("GET")
+	r.HandleFunc(config.Webroot+"view/latest", middleWareFunc(handlers.RedirectToLatestMessage)).Methods("GET")
 
 	// frontend testing
-	r.HandleFunc(config.Webroot+"view/{id}.html", handlers.GetMessageHTML).Methods("GET")
-	r.HandleFunc(config.Webroot+"view/{id}.txt", handlers.GetMessageText).Methods("GET")
+	r.HandleFunc(config.Webroot+"view/{id}.html", middleWareFunc(handlers.GetMessageHTML)).Methods("GET")
+	r.HandleFunc(config.Webroot+"view/{id}.txt", middleWareFunc(handlers.GetMessageText)).Methods("GET")
 
 	// web UI via virtual index.html
 	r.PathPrefix(config.Webroot + "view/").Handler(middleWareFunc(index)).Methods("GET")
@@ -179,7 +180,21 @@ func (w gzipResponseWriter) Write(b []byte) (int, error) {
 func middleWareFunc(fn http.HandlerFunc) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		w.Header().Set("Referrer-Policy", "no-referrer")
-		w.Header().Set("Content-Security-Policy", config.ContentSecurityPolicy)
+
+		// generate a new random nonce on every request
+		randomNonce := shortuuid.New()
+		// header used to pass nonce through to function
+		r.Header.Set("mp-nonce", randomNonce)
+
+		// Prevent JavaScript XSS by adding a nonce for script-src
+		cspHeader := strings.Replace(
+			config.ContentSecurityPolicy,
+			"script-src 'self';",
+			fmt.Sprintf("script-src 'nonce-%s';", randomNonce),
+			1,
+		)
+
+		w.Header().Set("Content-Security-Policy", cspHeader)
 
 		if AccessControlAllowOrigin != "" && strings.HasPrefix(r.RequestURI, config.Webroot+"api/") {
 			w.Header().Set("Access-Control-Allow-Origin", AccessControlAllowOrigin)
@@ -281,7 +296,7 @@ func swaggerBasePath(w http.ResponseWriter, _ *http.Request) {
 }
 
 // Just returns the default HTML template
-func index(w http.ResponseWriter, _ *http.Request) {
+func index(w http.ResponseWriter, r *http.Request) {
 
 	var h = `<!DOCTYPE html>
 <html lang="en" class="h-100">
@@ -298,10 +313,12 @@ func index(w http.ResponseWriter, _ *http.Request) {
 
 <body class="h-100">
 	<div class="container-fluid h-100 d-flex flex-column" id="app" data-webroot="{{ .Webroot }}" data-version="{{ .Version }}">
-		<noscript>You require JavaScript to use this app.</noscript>
+		<noscript class="alert alert-warning position-absolute top-50 start-50 translate-middle">
+			You need a browser with JavaScript support to use Mailpit
+		</noscript>
 	</div>
 
-	<script src="{{ .Webroot }}dist/app.js?{{ .Version }}"></script>
+	<script src="{{ .Webroot }}dist/app.js?{{ .Version }}" nonce="{{ .Nonce }}"></script>
 </body>
 
 </html>`
@@ -314,9 +331,11 @@ func index(w http.ResponseWriter, _ *http.Request) {
 	data := struct {
 		Webroot string
 		Version string
+		Nonce   string
 	}{
 		Webroot: config.Webroot,
 		Version: config.Version,
+		Nonce:   r.Header.Get("mp-nonce"),
 	}
 
 	buff := new(bytes.Buffer)
diff --git a/server/ui-src/components/message/Message.vue b/server/ui-src/components/message/Message.vue
index c8c80af7c..e826fc4dd 100644
--- a/server/ui-src/components/message/Message.vue
+++ b/server/ui-src/components/message/Message.vue
@@ -9,6 +9,7 @@ import Tags from 'bootstrap5-tags'
 import { Tooltip } from 'bootstrap'
 import commonMixins from '../../mixins/CommonMixins'
 import { mailbox } from '../../stores/mailbox'
+import DOMPurify from 'dompurify'
 
 export default {
 	props: {
@@ -73,6 +74,57 @@ export default {
 			return (mailbox.showHTMLCheck && this.message.HTML)
 				|| mailbox.showLinkCheck
 				|| (mailbox.showSpamCheck && mailbox.uiConfig.SpamAssassin)
+		},
+
+		// remove bad HTML, JavaScript, iframes etc
+		sanitizedHTML() {
+			DOMPurify.addHook('afterSanitizeAttributes', (node) => {
+				if (node.hasAttribute('href') && node.getAttribute('href').substring(0, 1) == '#') {
+					return
+				}
+				if ('target' in node) {
+					node.setAttribute('target', '_blank');
+					node.setAttribute('rel', 'noopener noreferrer');
+				}
+				if (!node.hasAttribute('target') && (node.hasAttribute('xlink:href') || node.hasAttribute('href'))) {
+					node.setAttribute('xlink:show', '_blank');
+				}
+			});
+
+			const clean = DOMPurify.sanitize(
+				this.message.HTML,
+				{
+					WHOLE_DOCUMENT: true,
+					SANITIZE_DOM: false,
+					ADD_TAGS: [
+						'link',
+						'meta',
+						'o:p',
+						'style',
+					],
+					ADD_ATTR: [
+						'bordercolor',
+						'charset',
+						'content',
+						'hspace',
+						'http-equiv',
+						'itemprop',
+						'itemscope',
+						'itemtype',
+						'link',
+						'vertical-align',
+						'vlink',
+						'vspace',
+						'xml:lang'
+					],
+					FORBID_ATTR: ['script'],
+				}
+			)
+
+			// for debugging
+			// this.debugDOMPurify(DOMPurify.removed)
+
+			return clean
 		}
 	},
 
@@ -133,7 +185,7 @@ export default {
 			// delay 0.2s until vue has rendered the iframe content
 			window.setTimeout(() => {
 				let p = document.getElementById('preview-html')
-				if (p) {
+				if (p && typeof p.contentWindow.document.body != 'undefined') {
 					// make links open in new window
 					let anchorEls = p.contentWindow.document.body.querySelectorAll('a')
 					for (var i = 0; i < anchorEls.length; i++) {
@@ -185,9 +237,31 @@ export default {
 			this.resizeIframe(el)
 		},
 
-		sanitizeHTML(h) {
-			// remove <base/> tag if set
-			return h.replace(/<base .*>/mi, '')
+		// this function is unused but kept here to use for debugging
+		debugDOMPurify(removed) {
+			if (!removed.length) {
+				return
+			}
+
+			const ignoreNodes = ['target', 'base', 'script', 'v:shapes']
+
+			let d = removed.filter((r) => {
+				if (typeof r.attribute != 'undefined' &&
+					(ignoreNodes.includes(r.attribute.nodeName) || r.attribute.nodeName.startsWith('xmlns:'))
+				) {
+					return false
+				}
+				// inline comments
+				if (typeof r.element != 'undefined' && (r.element.nodeType == 8 || r.element.tagName == 'SCRIPT')) {
+					return false
+				}
+
+				return true
+			})
+
+			if (d.length) {
+				console.log(d)
+			}
 		},
 
 		saveTags() {
@@ -292,7 +366,7 @@ export default {
 						<tr v-if="message.Bcc && message.Bcc.length" class="small">
 							<th>Bcc</th>
 							<td class="privacy">
-								<span v-for="(   t, i   ) in    message.Bcc   ">
+								<span v-for="(t, i) in message.Bcc">
 									<template v-if="i > 0">,</template>
 									<span class="text-spaces">{{ t.Name }}</span>
 									&lt;<a :href="searchURI(t.Address)" class="text-body">
@@ -510,9 +584,8 @@ export default {
 			<div v-if="message.HTML != ''" class="tab-pane fade show" id="nav-html" role="tabpanel"
 				aria-labelledby="nav-html-tab" tabindex="0">
 				<div id="responsive-view" :class="scaleHTMLPreview" :style="responsiveSizes[scaleHTMLPreview]">
-					<iframe target-blank="" class="tab-pane d-block" id="preview-html"
-						:srcdoc="sanitizeHTML(message.HTML)" v-on:load="resizeIframe" frameborder="0"
-						style="width: 100%; height: 100%; background: #fff;">
+					<iframe target-blank="" class="tab-pane d-block" id="preview-html" :srcdoc="sanitizedHTML"
+						v-on:load="resizeIframe" frameborder="0" style="width: 100%; height: 100%; background: #fff;">
 					</iframe>
 				</div>
 				<Attachments v-if="allAttachments(message).length" :message="message"