Merge branch 'image' of https://github.com/Avans/Security-Workshop into xss

image/image.php

@@ -0,0 +1,7 @@
+<?php
+
+header('Content-Type: image/jpeg');
+
+echo file_get_contents($_GET['file']);
+
+?>

image/index.php

@@ -0,0 +1,41 @@
+<?php
+if($_FILES) {
+    move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/" . $_FILES["file"]["name"]);
+}
+?><!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>imgr: the simple image sharer</title>
+
+    <link rel="stylesheet" href="/themes/css/bootstrap.min.css" media="screen"/>
+    <link rel="stylesheet" href="/themes/css/imgr.css" media="screen"/>
+
+  <!-- De code in dit bestand is met opzet slecht en zeer onveilig opgezet.
+       GEBRUIK DEZE CODE NIET als referentiemateriaal voor je eigen PHP projecten! -->
+  </head>
+
+  <body class="row-fluid">
+
+    <div id="site-header">
+      <img src="/themes/images/imgr.png" class="offset1">
+    </div>
+
+    <div class="panel span6 offset1 images">
+        <div class="header">The <em>meest recente</em> plaatjes van vandaag:</div>
+        <?php
+        foreach ( glob('uploads/*') as $image ) {
+            echo '<a href="image.php?file='.$image.'"><img src="'.$image.'"></a>';
+        }
+        ?>
+    </div>
+
+    <div class="panel span4">
+      <form enctype="multipart/form-data" method="POST">
+        <input type="file" name="file">
+        <button type="submit">Upload afbeelding</button>
+      </form>
+    </div>
+
+  </body>
+</html>

themes/css/imgr.css

@@ -0,0 +1,72 @@
+body {
+    background-color: #121211;
+    color: white;
+    margin: 0 auto;
+    font-family: Arial, sans-serif;
+}
+
+#center {
+    margin: 0 auto;
+    float: none;
+}
+
+#site-header {
+    background-color: #2b2b2b;
+    border-bottom: 4px solid #444442;
+    height: 36px;
+    margin-bottom: 10px;
+}
+
+#site-header img {
+    height: 36px;
+}
+
+.panel {
+    background-color: #2b2b2b;
+    padding: 25px;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+    font-weight: 700;
+}
+
+.header {
+    background-color: #181817;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    padding: 10px;
+    margin-bottom: 10px;
+    height: 19px;
+    line-height: 18px;
+    color: #ddddd1;
+}
+
+.header em {
+    font-style: normal;
+    color: #85bf25;
+}
+
+.images img {
+    width: 135px;
+    height: 135px;
+    margin: 3px;
+    float: left;
+    border: 3px solid #444442;
+}
+
+button {
+    background: #2b2b2b;
+    background: -moz-linear-gradient(top,#2b2b2b 0,#444442 0,#121211 100%);
+    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#2b2b2b),color-stop(0%,#444442),color-stop(100%,#121211));
+    background: -webkit-linear-gradient(top,#2b2b2b 0,#444442 0,#121211 100%);
+    background: -o-linear-gradient(top,#2b2b2b 0,#444442 0,#121211 100%);
+    background: -ms-linear-gradient(top,#2b2b2b 0,#444442 0,#121211 100%);
+    background: linear-gradient(to bottom,#2b2b2b 0,#444442 0,#121211 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444442', endColorstr='#121211', GradientType=0);
+    border-radius: 8px;
+    color: white;
+    font-weight: 700;
+    width: 100%;
+    padding: 4px;
+}