element', () => {
+ // https://on.cypress.io/select
+
+ // at first, no option should be selected
+ cy.get('.action-select')
+ .should('have.value', '--Select a fruit--')
+
+ // Select option(s) with matching text content
+ cy.get('.action-select').select('apples')
+ // confirm the apples were selected
+ // note that each value starts with "fr-" in our HTML
+ cy.get('.action-select').should('have.value', 'fr-apples')
+
+ cy.get('.action-select-multiple')
+ .select(['apples', 'oranges', 'bananas'])
+ // when getting multiple values, invoke "val" method first
+ .invoke('val')
+ .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
+
+ // Select option(s) with matching value
+ cy.get('.action-select').select('fr-bananas')
+ // can attach an assertion right away to the element
+ .should('have.value', 'fr-bananas')
+
+ cy.get('.action-select-multiple')
+ .select(['fr-apples', 'fr-oranges', 'fr-bananas'])
+ .invoke('val')
+ .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
+
+ // assert the selected values include oranges
+ cy.get('.action-select-multiple')
+ .invoke('val').should('include', 'fr-oranges')
+ })
+
+ it('.scrollIntoView() - scroll an element into view', () => {
+ // https://on.cypress.io/scrollintoview
+
+ // normally all of these buttons are hidden,
+ // because they're not within
+ // the viewable area of their parent
+ // (we need to scroll to see them)
+ cy.get('#scroll-horizontal button')
+ .should('not.be.visible')
+
+ // scroll the button into view, as if the user had scrolled
+ cy.get('#scroll-horizontal button').scrollIntoView()
+ .should('be.visible')
+
+ cy.get('#scroll-vertical button')
+ .should('not.be.visible')
+
+ // Cypress handles the scroll direction needed
+ cy.get('#scroll-vertical button').scrollIntoView()
+ .should('be.visible')
+
+ cy.get('#scroll-both button')
+ .should('not.be.visible')
+
+ // Cypress knows to scroll to the right and down
+ cy.get('#scroll-both button').scrollIntoView()
+ .should('be.visible')
+ })
+
+ it('.trigger() - trigger an event on a DOM element', () => {
+ // https://on.cypress.io/trigger
+
+ // To interact with a range input (slider)
+ // we need to set its value & trigger the
+ // event to signal it changed
+
+ // Here, we invoke jQuery's val() method to set
+ // the value and trigger the 'change' event
+ cy.get('.trigger-input-range')
+ .invoke('val', 25)
+ .trigger('change')
+ .get('input[type=range]').siblings('p')
+ .should('have.text', '25')
+ })
+
+ it('cy.scrollTo() - scroll the window or element to a position', () => {
+ // https://on.cypress.io/scrollto
+
+ // You can scroll to 9 specific positions of an element:
+ // -----------------------------------
+ // | topLeft top topRight |
+ // | |
+ // | |
+ // | |
+ // | left center right |
+ // | |
+ // | |
+ // | |
+ // | bottomLeft bottom bottomRight |
+ // -----------------------------------
+
+ // if you chain .scrollTo() off of cy, we will
+ // scroll the entire window
+ cy.scrollTo('bottom')
+
+ cy.get('#scrollable-horizontal').scrollTo('right')
+
+ // or you can scroll to a specific coordinate:
+ // (x axis, y axis) in pixels
+ cy.get('#scrollable-vertical').scrollTo(250, 250)
+
+ // or you can scroll to a specific percentage
+ // of the (width, height) of the element
+ cy.get('#scrollable-both').scrollTo('75%', '25%')
+
+ // control the easing of the scroll (default is 'swing')
+ cy.get('#scrollable-vertical').scrollTo('center', { easing: 'linear' })
+
+ // control the duration of the scroll (in ms)
+ cy.get('#scrollable-both').scrollTo('center', { duration: 2000 })
+ })
+})
diff --git a/cypress/e2e/2-advanced-examples/aliasing.cy.js b/cypress/e2e/2-advanced-examples/aliasing.cy.js
new file mode 100644
index 0000000..a02fb2b
--- /dev/null
+++ b/cypress/e2e/2-advanced-examples/aliasing.cy.js
@@ -0,0 +1,39 @@
+/// element in various ways
+ .should('have.text', 'Column content')
+ .should('contain', 'Column content')
+ .should('have.html', 'Column content')
+ // chai-jquery uses "is()" to check if element matches selector
+ .should('match', 'td')
+ // to match text content against a regular expression
+ // first need to invoke jQuery method text()
+ // and then match using regular expression
+ .invoke('text')
+ .should('match', /column content/i)
+
+ // a better way to check element's text content against a regular expression
+ // is to use "cy.contains"
+ // https://on.cypress.io/contains
+ cy.get('.assertion-table')
+ .find('tbody tr:last')
+ // finds first element with text content matching regular expression
+ .contains('td', /column content/i)
+ .should('be.visible')
+
+ // for more information about asserting element's text
+ // see https://on.cypress.io/using-cypress-faq#How-do-I-get-an-element’s-text-contents
+ })
+
+ it('.and() - chain multiple assertions together', () => {
+ // https://on.cypress.io/and
+ cy.get('.assertions-link')
+ .should('have.class', 'active')
+ .and('have.attr', 'href')
+ .and('include', 'cypress.io')
+ })
+ })
+
+ describe('Explicit Assertions', () => {
+ // https://on.cypress.io/assertions
+ it('expect - make an assertion about a specified subject', () => {
+ // We can use Chai's BDD style assertions
+ expect(true).to.be.true
+ const o = { foo: 'bar' }
+
+ expect(o).to.equal(o)
+ expect(o).to.deep.equal({ foo: 'bar' })
+ // matching text using regular expression
+ expect('FooBar').to.match(/bar$/i)
+ })
+
+ it('pass your own callback function to should()', () => {
+ // Pass a function to should that can have any number
+ // of explicit assertions within it.
+ // The ".should(cb)" function will be retried
+ // automatically until it passes all your explicit assertions or times out.
+ cy.get('.assertions-p')
+ .find('p')
+ .should(($p) => {
+ // https://on.cypress.io/$
+ // return an array of texts from all of the p's
+ const texts = $p.map((i, el) => Cypress.$(el).text())
+
+ // jquery map returns jquery object
+ // and .get() convert this to simple array
+ const paragraphs = texts.get()
+
+ // array should have length of 3
+ expect(paragraphs, 'has 3 paragraphs').to.have.length(3)
+
+ // use second argument to expect(...) to provide clear
+ // message with each assertion
+ expect(paragraphs, 'has expected text in each paragraph').to.deep.eq([
+ 'Some text from first p',
+ 'More text from second p',
+ 'And even more text from third p',
+ ])
+ })
+ })
+
+ it('finds element by class name regex', () => {
+ cy.get('.docs-header')
+ .find('div')
+ // .should(cb) callback function will be retried
+ .should(($div) => {
+ expect($div).to.have.length(1)
+
+ const className = $div[0].className
+
+ expect(className).to.match(/heading-/)
+ })
+ // .then(cb) callback is not retried,
+ // it either passes or fails
+ .then(($div) => {
+ expect($div, 'text content').to.have.text('Introduction')
+ })
+ })
+
+ it('can throw any error', () => {
+ cy.get('.docs-header')
+ .find('div')
+ .should(($div) => {
+ if ($div.length !== 1) {
+ // you can throw your own errors
+ throw new Error('Did not find 1 element')
+ }
+
+ const className = $div[0].className
+
+ if (!className.match(/heading-/)) {
+ throw new Error(`Could not find class "heading-" in ${className}`)
+ }
+ })
+ })
+
+ it('matches unknown text between two elements', () => {
+ /**
+ * Text from the first element.
+ * @type {string}
+ */
+ let text
+
+ /**
+ * Normalizes passed text,
+ * useful before comparing text with spaces and different capitalization.
+ * @param {string} s Text to normalize
+ */
+ const normalizeText = (s) => s.replace(/\s/g, '').toLowerCase()
+
+ cy.get('.two-elements')
+ .find('.first')
+ .then(($first) => {
+ // save text from the first element
+ text = normalizeText($first.text())
+ })
+
+ cy.get('.two-elements')
+ .find('.second')
+ .should(($div) => {
+ // we can massage text before comparing
+ const secondText = normalizeText($div.text())
+
+ expect(secondText, 'second text').to.equal(text)
+ })
+ })
+
+ it('assert - assert shape of an object', () => {
+ const person = {
+ name: 'Joe',
+ age: 20,
+ }
+
+ assert.isObject(person, 'value is object')
+ })
+
+ it('retries the should callback until assertions pass', () => {
+ cy.get('#random-number')
+ .should(($div) => {
+ const n = parseFloat($div.text())
+
+ expect(n).to.be.gte(1).and.be.lte(10)
+ })
+ })
+ })
+})
diff --git a/cypress/e2e/2-advanced-examples/connectors.cy.js b/cypress/e2e/2-advanced-examples/connectors.cy.js
new file mode 100644
index 0000000..f24cf52
--- /dev/null
+++ b/cypress/e2e/2-advanced-examples/connectors.cy.js
@@ -0,0 +1,98 @@
+///
+ */
+ function waitOneSecond () {
+ // return a promise that resolves after 1 second
+ return new Cypress.Promise((resolve, reject) => {
+ setTimeout(() => {
+ // set waited to true
+ waited = true
+
+ // resolve with 'foo' string
+ resolve('foo')
+ }, 1000)
+ })
+ }
+
+ cy.then(() => {
+ // return a promise to cy.then() that
+ // is awaited until it resolves
+ return waitOneSecond().then((str) => {
+ expect(str).to.eq('foo')
+ expect(waited).to.be.true
+ })
+ })
+ })
+})
diff --git a/cypress/e2e/2-advanced-examples/viewport.cy.js b/cypress/e2e/2-advanced-examples/viewport.cy.js
new file mode 100644
index 0000000..a06ae20
--- /dev/null
+++ b/cypress/e2e/2-advanced-examples/viewport.cy.js
@@ -0,0 +1,58 @@
+/// Ajouter un utilisateur
+ Blog with vulnerabilities
+
+
Users List
+
Add User
+
+
+ ID
+ User name
+ Email
+ Role
+
+
+
Blog with vulnerabilities
+ Exploring Cypress for Automated Testing
+
+ Exploring Cypress for Automated Testing
+ Cypress is a revolutionary front-end testing platform. Unlike other testing tools, Cypress is built directly on the browser, enabling faster and more reliable interactions with the tested web application.
+ This article explores the benefits of Cypress, including its browser-based architecture, user-friendly interface, and its ability to handle asynchronous tests more effectively.
+
+ Comments
+
+
+ Leave a comment
+
+ Send
+
+ Your comment has been posted
+
+
+
+
diff --git a/frontend/src/articles/article2.html b/frontend/src/articles/article2.html
new file mode 100644
index 0000000..b8e0808
--- /dev/null
+++ b/frontend/src/articles/article2.html
@@ -0,0 +1,35 @@
+
+
+
+ Integrating Cypress in CI/CD Pipelines
+
+ Integrating Cypress in CI/CD Pipelines
+ Integrating Cypress into CI/CD pipelines can significantly enhance software development quality. With Cypress, automated tests can be seamlessly integrated into development workflows, allowing for quick detection of regressions and bugs.
+ This article provides an overview of integrating Cypress into CI/CD processes, discussing best practices for effective and efficient implementation.
+
+ Comments
+
+ Leave a comment
+
+ Send
+
+
+
+
diff --git a/frontend/src/contact.html b/frontend/src/contact.html
new file mode 100644
index 0000000..345697e
--- /dev/null
+++ b/frontend/src/contact.html
@@ -0,0 +1,116 @@
+
+
+
+
+ Exploring Cypress for Automated Testing
+
+
Contact Us !
+
+
Thanks for your message !
+
Privacy Policy - Blog with vulnerabilities
+
+
+ Privacy Policy
+ Welcome to Blog with vulnerabilities. We are committed to protecting the privacy of our visitors and users. This privacy policy explains how we collect, use, share, and protect your personal information.
+
+ 1. Data Collection
+ We collect personal information in two ways:
+
+ Contact Form: When you use our contact form, we collect your name, email address, and any other information you choose to provide in your message.Authentication Cookie: We use a cookie to maintain your authenticated session on our site. This cookie is essential for securely identifying you during your visit to our website.
+
+ 2. Use of Data
+ Your data is used to:
+
+ Respond to your inquiries or questions submitted through the contact form.
+ Ensure secure and personalized operation of our site through the authentication cookie.
+
+
+ 3. Data Sharing
+ We do not share your personal data with any third parties, except in the following cases:
+
+ To comply with legal or regulatory requirements.
+ To protect our rights or property.
+
+
+ 4. Data Security
+ We take all reasonable measures to ensure the security of your personal data against unauthorized access, misuse, or disclosure.
+
+ 5. Your Rights
+ In accordance with GDPR, you have the right to:
+
+ Access your personal data that we hold.
+ Request correction of your personal data if it is inaccurate.
+ Request deletion of your personal data.
+ Withdraw your consent at any time for future processing of your personal data.
+
+
+ 6. Changes to Privacy Policy
+ We may update this privacy policy from time to time. Changes will be posted on this page.
+
+ 7. Contact
+ If you have any questions or concerns about our privacy policy or your personal data, please contact us via our contact form.
+
+
Blog with vulnerabilities
+
+
Dear readers and tech enthusiasts !
+
+
It was created in order to show you the capabilities that Cypress offers you for testing a website.
+
Besides, this site, as you will see, is not at all secure!
+
+
We will see it together during the testing stages in the book!
+
Thank you for joining us on this exciting journey!
+
+
The Blog Team
+
Login - Blog
+
+
Login
+
+
+
The user has not been found... Try again
+
The mfa is not correct... Try again
+
${userComment}
`;
+ document.getElementById('userComment').value = '';
+ }
+ };
+
+ var data = JSON.stringify({"comment": userComment});
+ xhr.send(data);
+ showSnackbar();
+}
+
+
+fetch('https://example.com/articles')
+ .then(response => response.json())
+ .then(data => {
+ data.forEach(article => {
+ document.getElementById('latest-posts').innerHTML += `${article.title} ${article.content}
`;
+ });
+ });
+
+function showSnackbar() {
+ var snackbar = document.getElementById("snackbar");
+ snackbar.className = "show";
+ setTimeout(function(){ snackbar.className = snackbar.className.replace("show", ""); }, 3000);
+}
diff --git a/server.js b/server.js
new file mode 100644
index 0000000..422fbe3
--- /dev/null
+++ b/server.js
@@ -0,0 +1,76 @@
+const express = require('express');
+const bodyParser = require('body-parser');
+const mysql = require('mysql2');
+const csrf = require('csurf');
+const cookieParser = require('cookie-parser');
+
+
+const app = express();
+const port = 3000;
+
+const swaggerUi = require('swagger-ui-express');
+const swaggerDocument = require('./swagger.json');
+
+app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));
+
+app.use(bodyParser.json());
+
+app.use(cookieParser());
+const csrfProtection = csrf({ cookie: true });
+
+app.use('/articles', express.static('articles'));
+app.use(express.static(__dirname));
+
+const connection = mysql.createConnection({
+ host: 'db',
+ user: 'root',
+ password: 'rootpassword',
+ database: 'blog_cypress'
+});
+
+app.post('/post-comment', function(req, res) {
+ const comment = req.body.comment;
+ connection.query('INSERT INTO comments (comment) VALUES (?)', [comment], function(error, results, fields) {
+ if (error) throw error;
+ res.send(JSON.stringify(results));
+ });
+});
+
+connection.connect();
+
+app.get('/', (req, res) => {
+ res.sendFile(__dirname + '/index.html');
+});
+
+app.get('/get-comments', function(req, res) {
+ connection.query('SELECT * FROM comments ORDER BY id DESC LIMIT 10', function(error, results, fields) {
+ if (error) throw error;
+ res.json(results);
+ });
+});
+
+app.get('/get-users', (req, res) => {
+ connection.query('SELECT * FROM users', (error, results) => {
+ if (error) throw error;
+ res.json(results);
+ });
+});
+
+app.post('/mfa/send-code', (req, res) => {
+ if (!req.body || !req.body.email) {
+ return res.status(400).json({ error: 'Email requis' });
+ }
+ const code = Math.floor(100000 + Math.random() * 900000);
+ console.log(`Code MFA envoyé à ${req.body.email}: ${code}`);
+ res.status(200).json({ success: true });
+});
+
+
+app.get('/login', csrfProtection, (req, res) => {
+ res.render('login', { csrfToken: req.csrfToken() });
+});
+app.set('view engine', 'ejs');
+app.set('views', __dirname);
+app.post('/login', csrfProtection, (req, res) => {
+ res.send('Connexion réussie');
+});
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..c938284
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,214 @@
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f0f0f0;
+}
+
+header, footer {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: flex-start;
+ background-color: black;
+ color: white;
+ text-align: center;
+ padding: 10px 0;
+}
+
+.header-content {
+ width: 100%;
+}
+
+
+
+h1 {
+ color: white;
+}
+
+a {
+ color: white;
+}
+
+nav a {
+ color: white;
+ text-decoration: none;
+ margin: 0 10px;
+}
+
+main {
+ padding: 20px;
+}
+
+.login-form{
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ width: 100%;
+ max-width: 400px;
+}
+
+.articles-container {
+ background: cadetblue;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ flex-direction: column;
+}
+
+.content {
+ background: cadetblue;
+ display: flex;
+ align-items: center;
+ min-height: 70vh;
+ flex-direction: column;
+}
+
+article {
+ background: cadetblue;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ flex-direction: column;
+}
+
+.login-container {
+ background: cadetblue;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ flex-direction: column;
+}
+
+.input-form{
+ padding: 10px;
+ border-radius: 5px;
+ border: 1px solid #ddd;
+}
+
+
+#snackbar {
+ visibility: hidden;
+ min-width: 250px;
+ margin-left: -125px;
+ background-color: orangered;
+ color: white;
+ text-align: center;
+ border-radius: 2px;
+ padding: 16px;
+ position: fixed;
+ z-index: 1;
+ left: 50%;
+ bottom: 30px;
+}
+#snackbar.show {
+ visibility: visible;
+ -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+ animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+#snackbar-mfa {
+ visibility: hidden;
+ min-width: 250px;
+ margin-left: -125px;
+ background-color: orangered;
+ color: white;
+ text-align: center;
+ border-radius: 2px;
+ padding: 16px;
+ position: fixed;
+ z-index: 1;
+ left: 50%;
+ bottom: 30px;
+}
+
+#snackbar-mfa.show {
+ visibility: visible;
+ -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+ animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+fieldset {
+ color: white
+}
+
+legend {
+ color: white
+}
+
+.checkbox{
+ width: 10px;
+}
+
+.consent-privacy {
+ width: 400px;
+}
+
+input, textarea {
+ width: 249px;
+ }
+
+ textarea {
+ height: 100px;
+ }
+
+ label {
+ width: 110px;
+ display: inline-block;
+ vertical-align: top;
+ }
+
+.form-button {
+ background-color: #005858;
+ color: white;
+ text-decoration: none;
+ border-radius: 5px;
+ text-align: center;
+ border-style: none;
+}
+
+.form-button:hover {
+ background-color: cadetblue;
+}
+
+.admin-button {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ padding: 8px 15px;
+ background-color: #005858;
+ color: white;
+ text-decoration: none;
+ border-radius: 5px;
+ text-align: center;
+}
+
+.admin-button:hover {
+ background-color: cadetblue;
+}
+
+.error {
+ color: red;
+}
+
+@-webkit-keyframes fadein {
+ from {bottom: 0; opacity: 0;}
+ to {bottom: 30px; opacity: 1;}
+}
+
+@keyframes fadein {
+ from {bottom: 0; opacity: 0;}
+ to {bottom: 30px; opacity: 1;}
+}
+
+@-webkit-keyframes fadeout {
+ from {bottom: 30px; opacity: 1;}
+ to {bottom: 0; opacity: 0;}
+}
+
+@keyframes fadeout {
+ from {bottom: 30px; opacity: 1;}
+ to {bottom: 0; opacity: 0;}
+}
\ No newline at end of file
diff --git a/swagger.json b/swagger.json
new file mode 100644
index 0000000..2de3383
--- /dev/null
+++ b/swagger.json
@@ -0,0 +1,112 @@
+{
+ "swagger": "2.0",
+ "info": {
+ "description": "API for a blog with vulnerabilities",
+ "version": "1.0.0",
+ "title": "Blog API"
+ },
+ "host": "localhost:3000",
+ "basePath": "/",
+ "schemes": [
+ "http"
+ ],
+ "paths": {
+ "/post-comment": {
+ "post": {
+ "summary": "Post a new comment",
+ "description": "Allows a user to post a comment.",
+ "consumes": [
+ "application/json"
+ ],
+ "parameters": [
+ {
+ "in": "body",
+ "name": "body",
+ "description": "Comment object to be added",
+ "required": true,
+ "schema": {
+ "type": "object",
+ "properties": {
+ "comment": {
+ "type": "string"
+ }
+ }
+ }
+ }
+ ],
+ "responses": {
+ "200": {
+ "description": "Comment added successfully"
+ },
+ "400": {
+ "description": "Error in the submitted data"
+ }
+ }
+ }
+ },
+ "/get-comments": {
+ "get": {
+ "summary": "Retrieve the latest comments",
+ "description": "Returns a list of the latest comments.",
+ "responses": {
+ "200": {
+ "description": "A list of comments",
+ "schema": {
+ "type": "array",
+ "items": {
+ "$ref": "#/definitions/Comment"
+ }
+ }
+ }
+ }
+ }
+ },
+ "/get-users": {
+ "get": {
+ "summary": "Retrieve all users",
+ "description": "Returns a list of all users.",
+ "responses": {
+ "200": {
+ "description": "A list of users",
+ "schema": {
+ "type": "array",
+ "items": {
+ "$ref": "#/definitions/User"
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+ "definitions": {
+ "Comment": {
+ "type": "object",
+ "properties": {
+ "id": {
+ "type": "integer",
+ "format": "int64"
+ },
+ "comment": {
+ "type": "string"
+ }
+ }
+ },
+ "User": {
+ "type": "object",
+ "properties": {
+ "id": {
+ "type": "integer",
+ "format": "int64"
+ },
+ "name": {
+ "type": "string"
+ },
+ "email": {
+ "type": "string"
+ }
+ }
+ }
+ }
+ }
+
\ No newline at end of file