grimhilt/mail
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix blocked iframe when change room

Browse Source
This commit is contained in:
grimhilt 2023-04-05 15:46:17 +02:00
parent 41aabb868f
commit 8b4210914b
1 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
front/src/views/room/Message.vue
View File

@ -1,22 +1,17 @@
<script setup> <script setup>
import { defineProps, onMounted, ref } from "vue"; import { defineProps, onMounted, ref, watch } from "vue";
import { decodeEmojis } from "../../utils/string"; import { decodeEmojis } from "../../utils/string";
import { removeDuplicates } from "../../utils/array"; import { removeDuplicates } from "../../utils/array";
import DOMPurify from "dompurify"; import DOMPurify from "dompurify";
import store from "@/store/store"; import store from "@/store/store";
const props = defineProps({ data: Object }); const props = defineProps({ data: Object });
const date = new Date(props.data.date);
const iframe = ref(null); const iframe = ref(null);
onMounted(() => { // todo dompurify
const doc = iframe.value.contentDocument || iframe.value.contentWindow.document; // background vs color
const html = DOMPurify.sanitize(props.data.content); const htmlDefault = (html) => {
doc.open(); return `
// todo dompurify
// background vs color
doc.write(`
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@ -29,8 +24,26 @@ onMounted(() => {
${html} ${html}
</body> </body>
</html> </html>
`); `;
};
function setIframeContent(content) {
const doc = iframe.value.contentDocument || iframe.value.contentWindow.document;
const html = DOMPurify.sanitize(content);
doc.open();
doc.write(htmlDefault(html));
doc.close(); doc.close();
}
watch(
() => props.data,
(newData) => {
setIframeContent(newData.content);
},
);
onMounted(() => {
setIframeContent(props.data.content);
}); });
const displayAddresses = (addressesId) => { const displayAddresses = (addressesId) => {
@ -58,7 +71,7 @@ const displayAddresses = (addressesId) => {
<div class="middle">{{ decodeEmojis(props.data.subject) }}</div> <div class="middle">{{ decodeEmojis(props.data.subject) }}</div>
<div class="right" id="date"> <div class="right" id="date">
{{ {{
date.toLocaleString("en-GB", { new Date(props.data.date).toLocaleString("en-GB", {
weekday: "short", weekday: "short",
year: "numeric", year: "numeric",
month: "2-digit", month: "2-digit",