Winston WWW Vienna based web penetration-tester/developer/designer
Web Security
I offer penetration testing for web applications. During tests I use manual and automated techniques to identify vulnerabilities in alignment with industry standards, such as the OWASP Web Security Testing Guide.
Web Development
As a freelance web developer I focus on frontend development with React and NextJS. I also bring experience with a variety of other technologies such as NodeJS, Java Spring Boot, MongoDB, MySQL and more.
Web Design
When creating web designs I pay much attention to user experience as well as to SEO. In addition, I use my web development knowledge to ensure that the designs are easily implementable by programmers.
Web Security
I enjoy it when things are used in ways they're not meant to be used, and IT security, especially penetration testing, very much scratches that itch. My background in web development naturally led me to focus on web security, where I conduct web penetration tests.
If you would like your application to be tested, contact me at hello@winstonwww.com
To see what you would receive after a penetration test, you can take a look at a by clicking sample report
Let me try to spark some enthusiasm for security
Below I created a couple of challenges to tickle your puzzle brain.
Level 1
Requirements: NoneThe word “dog” is filtered out and will be deleted as soon as you type it in. Can you find a way to output it anyway?
Expected output: dog
Input:Output:Level 2
Requirements: Understandig of JavaScriptImagine the input is placed in a template like the following:var someString = '[input]';
Apostrophes are escaped. Can you find a way to break out of the string and open an alert() window?
When coding, there are many characters which have a specific meaning in a programming language. Sometimes you want to write these characters in plain text without them executing their functionality. To achieve that you can use the backslash character “ \ ”. It escapes the next character, which means displaying it normally and removing any functionality.
Hints:
- JS commands in the same line can be separated by a semicolon.
- It can be useful to comment out code parts which cause errors.
var someString = '';
Level 3
Requirements: Understandig of SQLImagine the input field below is used to input a username to find their favorite food. On the backend the input will be put into a SQL query. Can this be exploited?
If you got access to a database with user data, you might be able to find passwords which are (probably) hashed.
Your goal is to find a user with a weak password. What is the users password? Put it into the password field below.
Hints:
- 'UNION' can be used in an SQL statement to add data from a different table.
- There are password cracking tools out there, even some online tools like crackstation.net
SELECT username, food FROM users_food WHERE username='';
herbertspassword
Web Development
Want me to work on your project?
I am a React + NextJS developer.
If you want to hire me for freelance work you can contact me at hello@winstonwww.com
Some programmy things I find interesting:
Lottie animations are JSON based animations which are smaller and more customizable than GIFs. Programs such as After Effects can be used to create complex animations.
What I love about lottie animations is that they can be very interactive while maintaining great performance. In the example below you can control the flow of the animation with your cursor movement or by draging on touch devices.
There are multiple different libraries to play lottie animations. For this example I used lottie-player
and lottie-interactivity
.
To improve page speed React components can be loaded only when they are needed.
When lazy loading prerendered components on the client side with next/dynamic
NextJS leverages React Version 18's <Suspense>
feature in the background to display fallbacks while the component is loading. This is demonstrated in the example below.
Also worth checking out: NextJS Streaming with Suspense
Oscillators are used to generate sound waves.
In JavaScript you can create oscillators using the AudioContext
API. It is quite powerful. You can even build a full synthesizer with it.
The example below let's you can play around with the frequency and amplitude of different types of waves. You can add multiple waves and then click the"Play Sound" button to hear what you've created.
The dark wave shows the sum of all other waves.
const audioContext = new (window.AudioContext ||
window.webkitAudioContext)()
const oscillator = audioContext.createOscillator();
/* Set the type of the oscillator ('sine', 'square', ...) */
oscillator.type = waveform.type;
/* Set the frequency of the oscillator */
oscillator.frequency.setValueAtTime(
waveform.frequency,
audioContext.currentTime
);
/* Set the gain value, scaling the amplitude
and ensuring it does not exceed 1 */
const gain = audioContext.createGain();
gain.gain.value = Math.min(waveform.amplitude / 10, 1);
oscillator.connect(gain);
oscillator.start();
oscillator.stop(audioContext.currentTime + 1);
import dynamic from "next/dynamic";
import { useState } from "react";
const Lazy = dynamic(
() => import("./LazyComponent"),
{ loading: () => <LoadingSkeleton /> }
);
export default function Demo() {
const [show, setShow] = useState(false);
return (
<>
<button onClick={() => setShow(true)}>
Lazy load component
</button>
{show && <Lazy />}
</>
);
}
Hover or drag left and right to control the animation
/* Lottie Interactivity */
create({
mode: "cursor",
player: "#lottie",
actions: [
{
position: { x: [0, 1], y: [-1, 2] },
type: "seek",
frames: [0, 60],
},
],
});
/* Lottie Player */
<lottie-player
ref={player}
id="lottie"
mode="normal"
src="/spider.json"
/>
Web Design
Not doing web design any more, I just needed a section for the third "W" in the site's title. Although, if you got a very unusual project that involves design I might be intersted, if not, then you've just unnecessarily read this text.