ProfileViewer_unsecure.vue

<template>
  <v-container>
    <v-dialog width="500" v-model="opened">
      <v-card>
        <v-card-title>{{ user.nickname }}</v-card-title>
        <v-card-subtitle>{{ user.email }}</v-card-subtitle>
        <v-card-text class="statusBox" v-html="user.status"></v-card-text>
      </v-card>
    </v-dialog>

    <v-snackbar
      v-model="snackbar.opened"
      :timeout="snackbar.timeout"
      :color="snackbarColor"
      >{{ snackbar.text }}
    </v-snackbar>
  </v-container>
</template>

<script>
import client from "../../services/Client";

export default {
  name: "ProfileViwer",

  data: () => ({
    script: `
      <div>Hier komm ein Bild mit Script:
        <img width="40px" height="40px" src="/a.png" onerror="
          console.log('bild');
          window.open('/we_tasks/task14/maliciousSite.html');
        ">
      </div>`,
    opened: false,
    snackbar: {
      opened: false,
      timeout: 3000,
      success: false,
      text: ""
    },
    user: {
      accountname: "",
      nickname: "",
      email: "",
      status: ""
    }
  }),

  methods: {
    showProfile: function(accountname) {
      let payload = new FormData();
      payload.append("accountname", accountname);
      client.post(client.URLs.profile, payload).then(result => {
        if (result.success) {
          this.opened = true;
          this.user = result.user;
        } else {
          this.snackbar.success = result.success;
          this.snackbar.text = result.message;
          this.snackbar.opened = true;
          this.opened = false;
        }
      });
    }
  },
  computed: {
    snackbarColor: function() {
      return this.snackbar.success ? "success" : "error";
    }
  }
};
</script>

<style scoped>
.statusBox {
  white-space: pre-wrap;
}
</style>