teleren/devto huggingface dataset:
A lesser-known vector for XSS attacks: SVG files
Tags: webdev, security, javascript, html
Published: 2023-02-20 01:58:00

Cross-site scripting (XSS) is a type of security vulnerability commonly found in web applications. Attackers exploit XSS vulnerabilities to inject malicious code into a site, which can then be executed on the server or other users’ browsers. While modern web frameworks like Ruby on Rails and Phoenix offer built-in protections against basic XSS attacks, XSS is still a prevalent threat that can compromise sensitive user data.

The most common type of XSS attack occurs when a web application fails to properly sanitize user input before displaying it to other users. When a site fails to escape user input, attackers can inject HTML code, which can be particularly dangerous if it is malicious JavaScript code. If an attacker successfully injects JavaScript into a site, they can hijack user sessions, steal cookies, and even send passwords to external servers.

## SVG files
One lesser-known vector for XSS attacks is the SVG image format. SVGs support JavaScript using the `<script>` tag, which can be exploited by attackers. Here is an example:

```
<svg>
  <polygon id="triangle" points="0,0 0,50 50,0" fill="#009900" stroke="#004400"/>
  <script type="text/javascript">alert("xss");</script>
</svg>
```

For instance, imagine a user uploads an SVG file with a script embedded in it that steals their session cookie when viewed by other users on the same site. If the web application fails to sanitize the uploaded SVG and renders it as-is, the script will execute and the attacker can access the victim’s session.

Similarly, if the application proxies SVGs from an external source, an attacker could inject malicious scripts into the SVG file, and the web application will unwittingly serve the malicious content to its users. This can lead to various types of attacks, such as phishing, data theft, and session hijacking.

## Putting shields in place

There are three common ways of preventing XSS attacks via SVGs:

1. Adding a stricter [Content-Security-Policy header](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) on the route that serves the SVG file.
2. Sanitizing SVG files by removing scripts before rendering.
3. Or converting SVGs to rasterized formats like PNG and JPG.

I’ve recently fixed this vulnerability on Plausible, an open-source analytics tool. You can check my commit [here](https://github.com/plausible/analytics/commit/9b32dace3e27ab63299d1d73dd0c6db557bf8870). The server acted as a proxy and loaded favicons from external sources to be displayed on Plausible’s site. I opted to add the stricter CSP header, meaning that any scripts included in the SVG file will only be executed if they come from the same origin as the webpage that is serving the file. Any attempt to load content from a different origin will be blocked by the browser.

By following best practices for secure coding and staying vigilant for lesser-known attack vectors like SVG, web developers can help protect their users’ data from the threat of XSS attacks.
"Specify /EHsc" warning
Tags: cpp
Published: 2023-02-20 01:01:45

Using cmake to build C++ with custom `CMAKE_CXX_FLAGS` on MSVC may result in a warning to `Specify /EHsc`.

Here is an example:

```cmake
# CMakeLists.txt

cmake_minimum_required (VERSION 3.23)
project(ehsc)
add_executable(ehsc ehsc.cpp)
```

```cpp
// ehsc.cpp
#include <iostream>

class NeedsDestruction {
public:
    NeedsDestruction () {
        std::cout << "Constructor called" << std::endl;
    }

    ~NeedsDestruction () {
        std::cout << "Destructor called" << std::endl;
    }
};

void throws () {
    NeedsDestruction nd;
    throw std::exception("exception");
}

int main () {
    try {
        throws ();
    } catch (std::exception e) {
        std::cout << "caught exception" << std::endl;
    }
}
```

Configure with a custom `CMAKE_CXX_FLAGS`:

```sh
cmake -S. -Bcmake-build -DCMAKE_CXX_FLAGS="/Wall"
cmake --build cmake-build --target ehsc
```

Building results in many warnings suggesting to `Specify /EHsc`:

```
warning C4530: C++ exception handler used, but unwind semantics are not enabled. Specify /EHsc
```

Why does specifying `CMAKE_CXX_FLAGS` result in this warning? Because cmake specifies default flags for MSVC.
Setting `CMAKE_CXX_FLAGS` appears to have the side-effect of overwriting the default MSVC flags set by cmake.
For example, if `CMAKE_CXX_FLAGS` is not set, this is the output of printing `CMAKE_CXX_FLAGS` with cmake 3.23.1 on my Windows machine:
```
CMAKE_CXX_FLAGS=/DWIN32 /D_WINDOWS /W3 /GR /EHsc
```

Excluding `/EHsc` from the build flags appears particularly problematic. `/EHsc` is the [documented default](https://learn.microsoft.com/en-us/cpp/cpp/exception-handling-in-visual-cpp?view=msvc-170) for the exception handling model:

> Use an /EH compiler option to specify the exception handling model to use in a C++ project. Standard C++ exception handling (/EHsc) is the default in new C++ projects in Visual Studio.

Without `/EHsc`, the destructor in the example is not called when the exception is thrown. Executing does not print the expected `Destructor called`:

```
throws ... begin
Constructor called
caught exception
```
Linode + DEV Hackathon: Airflow running in Linode + daemon setup
Tags: linodehackathon
Published: 2023-02-20 00:39:38

## What I built
I built a gist to install airflow (workflow + scheduler) in Linode

### Category Submission:
Smooth Shifters

### App Link
http://143.42.142.188:8080 (you won't be able to log in but you will see the airflow instance running)

### Screenshots

![First view Airflow running in Linode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7onapym783guo3k8ftpw.png)


![Evidence of dags runs in Airflow - running in Linode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/octw0ybet84g8atyodmz.png)

### Description
Airflow is running in linode. A daemon was set as well to enable accessibility to the tool. 

### Link to Source Code
https://gist.github.com/mamontesp/2d2fb5aa7ab880f257cbed25951da5f1

### Permissive License
MIT License

## Background
I need airflow in my work, but I have some security restrictions to create an airflow instance in the cloud provider the company uses. Linode offers a straightforward way to fast testing a tool like airflow

### How I built it
I used the PyPI version of Airflow, created a virtual environment with python and in there, I did the airflow install. Then, I started the airflow webserver. All the instructions are in the gist file provided :) 

I wanted to use my own user in Linode, but got several issues granting permissions, I figured some out, but at the end I just needed to test airflow, so I switched to root and complete the install. It would be good to have a tutorial to set new users.

Also when trying to use my own new user, shell command navigation wasn't working (pressing arrows wasn't navigating across my command history), I was able to solve that out running this.

`sudo chsh -s /bin/bash <username>`

Finally, I needed to create a daemon to keep up airflow, I also included the instructions that I followed to accomplished that. 

## Additional Resources
- Airflow: https://airflow.apache.org/docs/apache-airflow/stable/index.html
- YouTube Course in Linux TV to get more confident with Linux general commands: https://www.youtube.com/watch?v=2733cRPudvI&list=PLT98CRl2KxKGj-VKtApD8-zCqSaN2mD4w
- Daemon creation process: https://baykara.medium.com/how-to-daemonize-a-process-or-service-with-systemd-c34501e646c9

## Let's connect
Mastodon: @mamontesp@fosstodon.org
LinkedIn: https://www.linkedin.com/in/andrea-montes-5a9a25b1/
writing clean and maintainable code: best practices for developers 🦉
Tags: cleancode, productivity, programming, beginners
Published: 2023-02-20 00:06:30

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p86u0yzsyjx8tqzyllzt.png)

## intro
writing code is one thing, but writing clean and maintainable code is another. clean and maintainable code is essential for developing successful applications that are easy to maintain, improve, and scale over time. in this article, we'll cover some best practices for writing clean and maintainable code that you can use to take your development skills to the next level.

#### follow good naming conventions
the first step to writing clean code is to follow naming conventions. use meaningful and descriptive names for your variables, functions, and classes. avoid using abbreviations or acronyms unless they're widely recognized. use camelCase or snake_case for naming variables and functions, and use PascalCase for naming classes.

#### keep it simple stupid (kiss)
when writing code, keep it simple stupid. write code that is easy to understand and that is easy to read. avoid writing long and complex functions, which can be challenging to understand and maintain. if a function is too long, consider splitting it into smaller, more manageable functions.

#### dont repeat yourself (dry)
one of the most essential principles of writing clean and maintainable code is to avoid repetition. if you find yourself writing the same code in multiple places, consider extracting it into a separate function or class. this will not only make your code more concise, but it will also make it easier to maintain.

#### write tests
writing tests is an essential part of writing clean and maintainable code. ensure that your tests cover all the critical parts of your code, and that they're easy to understand and maintain.

#### refactor regularly
refactoring is the process of improving your code without changing its functionality. regularly refactoring your code ensures that it remains clean and maintainable over time. refactor long functions, remove redundant code, and improve variable names. this process will help keep your codebase up-to-date and ensure that it remains easy to maintain. always leave code better than when you found it

## conclusion
writing clean and maintainable code is an essential skill for developers. following these best practices can help you to write code that is easy to understand, maintain, and scale over time.
🤖 Quickly scrape tweets without API or headless browser
Tags: undefined
Published: 2023-04-22 19:28:53

---
title: 🤖 Quickly scrape tweets without API or headless browser
published: true
date: 2023-02-20 00:00:00 UTC
tags: undefined
canonical_url: https://bstefanski.com/quickly-scrape-tweets-without-api-or-headless-browser
---

Writing a scraping tool is a boring process, you have to use headless browser or an API (but that wouldn't be called scraping, would it?).  
<!-- -->It takes a lot of time to develop and run such a tool. Whenever possible, it's best to avoid writing a standalone application for that.

My goal was to gather links to some tweets that were listed under Twitter's search page. I went to the search page, put this little snippet that I wrote in the DevTools and started scrolling until I was satisfied with the results.  
<!-- -->It will probably stop working in the near future, since it is fully based on text content of some DOM nodes, but you can of course take a look at Twitter's DOM and modify it to your needs.

```

const links = new Set();

window.addEventListener('scroll', () =>

[...document.querySelector('[aria-label="Timeline: Search timeline"').children[0].children].forEach((el) => {

const singleLink = el.querySelectorAll('a')[3];

if (singleLink) {

 links.add(singleLink.getAttribute('href'));

}

}),

);

console.log(links);

```
22+ Web Projects with Source Code
Tags: webdev, javascript, programming, beginners
Published: 2023-02-19 23:54:44

Preview Website: https://alsiam.github.io/al-projects

Source Code: https://github.com/alsiam/al-projects


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgb6raa3s9fa5hhoz1mc.png)
Frontend Mentor
Tags: webdev, beginners, learning, tutorial
Published: 2023-02-19 22:32:49

Hello dev`s today am happy to share that few day back I join the frontend mentor community, go through all their challenges and today I take up a very basic project to challenge myself with and I was able to complete it in 15 minutes, its a responsive design build with custom html and css.

Live link: [View Live Solution](https://qrcode-tayyib.netlify.app/) 
Source Code:[View Source Code](https://qrcode-tayyib.netlify.app/)

## Please Review and I will appreciate if you could give a feedback.
Automate the EBS Snapshot and AMIs creation using Amazon Data Lifecycle Manager
Tags: aws, cloud, awscommunity, 100daysofcloud
Published: 2023-02-19 22:23:59

[50/100] #100DaysOfCloud Today, I created an EBS Snapshot Policy to automate the EBS Snapshot using Amazon Data Lifecycle Manager.

You can use Amazon Data Lifecycle Manager to automate the creation, retention, and deletion of EBS snapshots and EBS-backed AMIs. When you automate snapshot and AMI management, it helps you to:
 - Protect valuable data by enforcing a regular backup schedule.
 - Create standardized AMIs that can be refreshed at regular intervals.
 - Retain backups as required by auditors or internal compliance.
 - Reduce storage costs by deleting outdated backups.
 - Create disaster recovery backup policies that back up data to isolated accounts.

When combined with the monitoring features of Amazon CloudWatch Events and AWS CloudTrail, Amazon Data Lifecycle Manager provides a complete backup solution for Amazon EC2 instances and individual EBS volumes at no additional cost.

You can try do it by yourself by following the steps from the link below: [GitHub](https://github.com/aaditunni/100DaysOfCloud/blob/main/Journey/050/Readme.md)
Text Typing Effect Using HTML CSS Only
Tags: css, html, webdev, design
Published: 2023-02-19 21:55:11


## Text Typing Effect Using HTML CSS Only

In this article, we’ll show you **how to create a text typing effect using HTML and CSS only.** No JavaScript is needed!

Moreover, we’ll walk you through step by step **how to create this cool text typing effect** that can be added to your web projects. It’s a great way to add some interactivity and engagement to your web pages.

We’ll be using **HTML** and **CSS** to create this effect, so even if you’re a beginner, you’ll be able to follow along with ease. Plus, with no JavaScript involved, this article is perfect for those who want to keep their websites lightweight and fast-loading.

![Created By [Author](https://rutikkpatel.medium.com/) ( [Rutik Patel](https://rutikkpatel.medium.com/) )](https://cdn-images-1.medium.com/max/2560/1*tpa0oboyqUkjiVHjBamdoQ.png)

&nbsp;
## Points to be discussed

* Preview

* YouTube Tutorial

* HTML Code

* CSS Code

* References

&nbsp;
## Preview :

A live demo of the website can be viewed by [clicking here](https://rutikkpatel.github.io/HTML-CSS/Text%20Typing%20Effect/index.html).

![Preview — 1](https://cdn-images-1.medium.com/max/2000/1*g3_pxMvXsqowXVVhRajovw.png)



![Preview — 2](https://cdn-images-1.medium.com/max/2000/1*6K-5k5sbouXGc4CathlxYA.png)

---

&nbsp;
## YouTube Tutorial :
{% youtube 0AqkgYisq04  %}

&nbsp;
## HTML CODE :

index.html

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Typing Effect Using CSS</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="heading">
    <h1> Text Typing Effect Using CSS </h1>
  </div>
  <div class="container">
    <div>
      <p class="welcome_text"> Hello Folks, I am Rutik Patel... </p>
    </div>
  </div>
</body>

</html>
```

&nbsp;
## CSS CODE :

style.css

```css
* {
  margin: 0;
  padding: 0;
}

.heading {
  text-align: center;
  margin: 10px 0px;
}

.container {
  width: 100vw;
  height: 90vh;
  display: grid;
  place-items: center;
}

.welcome_text {
  font-size: 3.2rem;
  border-right: 2px solid red;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  animation: typewriter 5s steps(55, end) forwards;
}

@keyframes typewriter {
  from {
    width: 0
  }

  to {
    width: 100%
  }
}
```

&nbsp;
## References :

**GitHub Repository**: [https://github.com/rutikkpatel/HTML-CSS/tree/main/Text%20Typing%20Effect](https://github.com/rutikkpatel/HTML-CSS/tree/main/Text%20Typing%20Effect)
Hacktoberfest 2022 T-shirt received
Tags: hacktoberfest, 2022, tshirt, blog
Published: 2023-02-19 21:31:38

[Hacktoberfest](https://hacktoberfest.com/) is an annual event that occurs in Oct, and Contributing to open source by having 4 PRs merged to participated github projects, and you will receive the T-shrits and the stickers!

It is sponsored by Github, [Digital Ocean](https://steemyy.com/out/do) and more!

![2023-02-11 11.58.55.jpg](https://cdn.steemitimages.com/DQmcZ14nBZDVjaoYVd2N5wTPVZmtBKnMPh2rJQTQiSrhmLt/2023-02-11%2011.58.55.jpg)

![2023-02-11 11.58.36.jpg](https://cdn.steemitimages.com/DQmXBLQjwAttkSVgeT1orkgRDDyuP4Hqqb7LgNnUZbBHEn8/2023-02-11%2011.58.36.jpg)


<hr/>

### [Steem](https://steemyy.com) to the Moon!
You can swap the STEEM/SBD to USDT (TRC-20) via [Steem2USDT](https://steemyy.com/steem2usdt.php)
CLI Client for ReductStore v0.7.0 has been released
Tags: news, database, reductstore, cli
Published: 2023-02-19 21:04:22


Hey everyone,

I'm happy to announce that we have
released [Reduct CLI client v0.7.0](https://github.com/reductstore/reduct-cli/releases/tag/v0.7.0) with some minor improvements and bug fixes. We started using the tool in real applications and faced some problems exporting data from a ReductStore instance when the connection is slow and we have many entries to download asynchronously.

First of all, it wasn't very convenient to count all needed entries in the `rcli export` command. Now we can use wildcards:

```
rcli export folder instance/bucket ./export_path  --entries=sensor-*
```

<!--more-->

More over, the `rcli export` command used the query API with default TTL 5 seconds for a query. When the internet connection was slow, it may have taken more than 5 seconds to request the next record in the query. The query could expire and the CLI would receive the 404 HTTP error. Now the CLI client uses the TTL equal to the number of parallel tasks multiplied by the timeout. By default, the TTL is 50 seconds (10 parallel tasks * 5 second timeout). This makes the data export more robust and allows a user to change the TTL by using the `parallel` and `timeout` options.

```
rcli --parallel 5 --timeout 3 export folder  instance/bucket ./export_path # TTL is 15 second
```

if you have any questions or feedback, don't hesitate to reach out in [Discord](https://discord.gg/8wPtPGJYsn) or by opening a discussion on [GitHub](https://github.com/reductstore/reductstore/discussions).

Thanks for using [ReductStore](https://www.reduct.store)!
Python 101: Introduction to Python for Data Science
Published: 2023-02-19 21:00:48

Data science is a rapidly growing field. It is fueled by several factors which include: big data, increased computing power, artificial intelligence and machine learning. While no specific term can conclusively define data science, we can all agree that it is an umbrella term for data science that describes the application of scientific methods to generate insights from data.
Python is a popular tool for data science considering it is a high-level programming language with comparatively easy syntax. It has a wealthy ecosystem of libraries and tools that help carry out data science tasks.
Some of the tools include **NumPy** for mathematical operations on arrays, Pandas for reading data in different formats, **Matplotlib** for data visualization and **Seaborn** for creating statistical graphics and **Scikit-learn** for machine learning.
With python, you get various frameworks that enhance your experience of working in data science. They include **Jupyter Notebook**, a web-based environment, **Spyder** and **PyCharm**. 
The techniques involved in data science include:
Data cleaning and pre-processing, data visualization, Machine Learning and Deep Learning.

Data science typically involves several phases  used to transform raw data into useful information. Below are some of the popular ones in a data science project:

1. Data Collection: Involves collecting data from various sources, such as databases, APIs, or web scraping.

2. Data Cleaning and Preprocessing: Raw data is often incomplete, inconsistent, or contains errors or outliers. Through data cleaning and preprocessing stage these issues are identified and corrected. .

3. Data Analysis: The data analysis stage involves using statistical methods and algorithms to identify patterns and relationships in the data.

4. Data Visualization: This presents insights and patterns in the data visually. 

5. Model Building and Evaluation: In this stage, a predictive model is built using machine learning algorithms or statistical models. The model is then evaluated to determine its accuracy and effectiveness in making predictions or classifications.

6. Deployment and Integration: This may involve creating an API or deploying the model on a cloud platform.

7. Monitoring and Maintenance.
My Tiny Git CLI Tool I Use Daily To Improve My Git Workflow
Tags: webdev, productivity, javascript, node
Published: 2023-02-19 21:00:36

Most developers work with Git on a daily basis. I would almost assume there are as many work flows as there are developers. I recently came upon a problem all over again. Finally I decided to create a tiny CLI application to solve the problem I was having, and I ended up using that so much that I changed my actual Git workflow.

The problem I was facing was the constant switching of branches. Bug fixes, features, dev reviews, and so much more. With long branch names like `bugfix/<CATEGORY>-<ID>-long-descriptive-name`, I always forgot the names of the branches.  

Enter: `git-recent-branch`, my new very simple CLI tool.

![Gif showing usage of git-recent-branch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t2mmgzdtsup4u0el8b27.gif)

Just run `git-recent-branch` (or `rb` as an alias), and you'll get a nice looking prompt, allowing you to checkout one of your 5 recent branches with on click on the keyboard.  I use it almost all the time when switching branches. 

It might be a bit of a shameless plug, but it really helped me a lot and who knows, other people might perhaps find it helpful.

The code is all open-source and available on [Github](https://github.com/banjo/git-recent-branch) for those who want to look or contribute. Or feel free to hit me up on [Twitter](https://twitter.com/banjo_dev) if you want to talk code.

Happy coding!