Vue.js3超初心者向け。v-htmlが何かと危険性を簡単なサンプルコードで解説
8 回閲覧されました
みなさんこんにちは、jonioです。
今回はVue.js3のv-htmlが何かと危険性について簡単なサンプルコードで解説します。
Laravelの無料学習サイトを作りました
Laravelを勉強したい人向けの無料の学習サイトを作りました。
ここからリンクに飛べますのでぜひ利用してください。
v-htmlとは
HTMLをテンプレートに埋め込むことができます。
下記のサンプルコードで解説します。
<template>
<div>
<h2>v-htmlのサンプル</h2>
<div v-html="htmlContent"></div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const htmlContent = ref('<p style="color: red;"><strong>こんにちは、Vue 3！</strong></p>');
</script>4行目の「htmlContent」に11行目のrefの中身が埋め込まれます。
cssを使ったHTMLを埋め込むことができるのでcssを適用させた内容を埋め込みたい時に便利です。
HTMLを埋め込むことができるのでリスクもあります。
危険性
xssの危険性があります。
xssとはscriptタグを使って不正な操作をすることです。
scriptタグはv-htmlが防ぎますがscriptタグの中に入っているDOM操作は防がないのでxssの危険性があります。
下記のサンプルコードで解説します。
<template>
<div v-html="htmlContent"></div>
</template>
<script setup>
import { ref } from 'vue';
const htmlContent = ref(`<script><a href="javascript:alert('攻撃')">クリックしてね</a></script>`);
</script>aタグをクリックするとalertが表示されますがこの部分を攻撃するコードに変えるとxssが成立します。
防ぐ方法
例えばDompurifyを使います。
下記のコマンドを叩きます。
npm install dompurifyそして下記の記述をします。
<template>
<div v-html="sanitizedHtml"></div> //この行を修正
</template>
<script setup>
import { ref } from 'vue';
import DOMPurify from 'dompurify'; //この行を追記
const htmlContent = ref(`<script><a href="javascript:alert('攻撃')">クリックしてね</a>
const sanitizedHtml = ref(DOMPurify.sanitize(htmlContent)); //この行を追記
</script>`);
</script>これでxssを防ぐことができます。