{% extends "exercise_base.html" %}

{% block title %}{{ block.super }}CSRF Image Attack{% endblock %}

{% block header %}
    <h1>CSRF Image Attack</h1>
{% endblock %}

{% block content %}
<p>Imagine, if you will, a website feature where an authenticated user with a
payment on file could easily send a gift card to a friend.</p>

<p>Seems innocent enough. We'll make sure that when the user POSTs the form that
they are authenticated and that have a PoF. Done. Safe. Or...</p>

<p>What would happen if we were not careful about security? Let's pretend
that the view doesn't check if the POST was a POST. If we could find another
page on the site with an XSS vulnerablity we could construct a URL that
could inject an image link that triggers a gift card purchase.</p>

<p>Let's try it!</p>

<ul>
    <li>Use the <a href="{% url 'csrf-gift-card' %}">giftcard</a> form for reference.</li>
    <li>Your email address is <code>evil@evil.com</code></li>
    <li>You want $100 giftcards (the field expects an integer)</li>
    <li>Use a query string parameter <code>qs</code> on this page to inject the image.</li>
</ul>

{% if qs %}
    <div class="hints panel">
        <p>Helpful hints</p>
        <ul>
            <li>Think back to the solution for <a href="/cross-site-scripting/query-params?qs=awesome">XSS via Query Parameters</a> exercise</li>
        </ul>
        <a class="tiny button" id="show_solution">show solution</a>
    </div>
{% endif %}

<div class="solution panel"></div>

{% endblock %}

{% block extra_js %}
{{ block.super }}
<script src="{{STATIC_URL}}js/exercises/csrf-image.js"></script>
<script type="text/javascript">
var x = "{{qs|safe}}";
</script>
{% endblock %}

{% block extra_topnav %}
<li><a href="{% url 'csrf' %}">Prev</a></li>
<li><a href="{% url 'csrf-third-party' %}">Next</a></li>
{% endblock %}

{% block extra_botnav %}
<li><a href="{% url 'csrf' %}">Prev</a></li>
<li><a href="{% url 'csrf-third-party' %}">Next</a></li>
{% endblock %}
