teleren/devto huggingface dataset:
Clickjacking
Tags: applicationsecurity, security
Published: 2020-04-10 12:43:26

__Clickjacking__ refers to any attack where is user is tricked into clicking any unexpected web element unintentionally. It is a malicious practice in which the attacker tricks a user to click on another webpage who actually clicks on another page. This technique is mostly used for websites or web pages by overlaying malicious content over a trusted webpage or by placing a transparent element or an entire page over a visible one.

The attacker injects an html element/code with an **iframe** into the webpage. Suppose you are checking your email and all of a sudden you get a popup saying "You have won an iPhone. Click here to claim." But below this overlay there can be commands to delete all the emails from your inbox, or send an email to someone. It can be a command to shut down your computer or to access private files or to alter your system files. This is also rampant on Android phones. This is also called a UI Redress attack.

Majority of Clickjack attacks exploit the code vulnerabilities related to the use of HTML iframes and protection methods that revolve around its prevention.
To prevent this attack, all prevention methods aim to block framing as most of these attacks involve HTML iframe tag. While legacy solutions use client-side scripts to break pages out of frames, most modern and secure approaches rely on HTTP security headers to specific framing policy:

1) Framebursting: This involves usage of some JS code snippets. The code simply checks top.location to make sure its the current page, if not top.location was set to self.location. But these scripts can easily be blocked or bypassed. This method only provides rudimentary protection for legacy browsers. [OWASP](https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html#best-for-now-legacy-browser-frame-breaking-script) recommends that we hide the entire body of the document and show it only once we verify that the page is not framed.

2) X-Frame-Options: The best solution is to use the X-Frame-Options(XFO) HTTP response header in server responses. This is used to specify if a page can be embedded in a iframe, embed or object element. The header supports three possible directives: sameorigin, to allow framing only by pages of the same origin; deny, not to allow any such frames; or allow-from to specify any specific targets.

3) Content-Security-Policy with frame-ancestors:  it also provides a frame-ancestors directive for specifying sources that are permitted to embed a page (in a frame, iframe, object, embed, or applet element). 

The X-Frame-Options HTTP header is still the most universal way of increasing general website resilience, eliminating not just typical __clickjacking__ attempts, but also a host of other vulnerabilities
Pardus 19 Ekran Kilidi Sorunu
Tags: pardus, linux, xfce, debian
Published: 2020-04-10 12:29:01

**Bilgisayarınız bir süre bekledikten sonra tekrar açmaya çalıştığınızda görüntü gelmiyorsa e bilgisayarınız yeniden başlatmak zorunda kalıyorsanız aşağıdaki adımları izlemeniz yeterlidir;**

**1)** Terminal'i açarak aşağıdaki komutu yazınız;
`sudo nano /etc/X11/xorg.conf.d/20-intel.conf`

**2)** Açılan sayfada aşağıdaki satırları kopyalayıp yapıştırınız ve kaydediniz.
```
Section "Device"
        Identifier "Intel Graphics"
        Driver "intel"
        Option "AccelMethod" "sna"
EndSection
```
**3)** Bu ayardan sonra sistemi yeniden başlatınız, sisteminiz açılmaz ise sorun ekran kartı kaynaklı değildir ve tty ekranına geçip oluşturduğunuz 20-intel.conf dosyasını silip sistemi yeniden başlatmalısınız.
`sudo rm /etc/X11/xorg.conf.d/20-intel.conf`
First Steps with Node.js Part 2
Tags: beginners, node, tutorial, javascript
Published: 2020-04-18 05:43:49

---
title: First Steps with Node.js Part 2
published: true
date: 2020-04-10 12:27:00 UTC
tags: beginners,node,tutorial,javascript
canonical_url: https://raddevon.com/articles/first-steps-with-node-js-part-2/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/52k9aebh7w3qjuvqjycp.jpg
---
{% youtube a35evCZbLoM %}

Video Notes
-----------

We started learning [Node.js](https://nodejs.org) together in [a recent video](https://raddevon.com/articles/first-steps-with-node-js-part-1/). We’ll continue through the Node.js workshop in this video.

📝 In this part, we’ll work through exercises 5 and 6 of the [Learn You Node workshop](https://github.com/workshopper/learnyounode) together. Exercise 5 is to list the directory contents filtered for an extension. Exercise 6 lets us try creating and using a Node module. This is an essential part of being a Node developer!

📚 As you work through the exercises, you’ll want to reference [the Node.js documentation](https://nodejs.org/dist/latest-v12.x/docs/api/).

👋 Thank you for watching and for working through the exercises with me! I’m going to keep this series going and work through the remaining exercises in coming weeks. If you have questions, please leave a comment here on Dev.to or on the video [over on YouTube](https://youtu.be/a35evCZbLoM), or mention me [on Twitter](https://twitter.com/raddevon).

Don’t fall into the trap of working through [tutorial after tutorial](https://raddevon.com/articles/stop-doing-coding-tutorials/) and never getting anything done. **Make sure you apply these skills** toward your ultimate goal of becoming a web developer.

One way to do that is by [**doing freelance work**](https://raddevon.com/articles/inverted-career-path/), but how do you price it? I wrote the book on the subject! 📕 Get a free chapter [here](https://raddevon.com/freelance-web-development-pricing-rates-estimating-projects-and-turning-a-profit/).
Handling JWT securely on your client
Tags: tutorial, security, webdev, beginners
Published: 2020-04-10 12:26:42

This is a series of posts divided into the following parts:
- [Handling JWT securely on your client - Part-1](https://mannharleen.github.io/2020-03-19-handling-jwt-securely-part-1)
- [Handling JWT securely on your client - Part-2](https://mannharleen.github.io/2020-04-10-handling-jwt-securely-part-2) [THIS POST]
- [Handling JWT securely on your client - Part-3](https://mannharleen.github.io/) - not yet published
- [Handling JWT securely on your client - Part-4](https://mannharleen.github.io/) - not yet published

### Summary
* Part-1 covers the main problem statement around jwt security in web-apps; presents a few options and evaluates them 
* Part-2 dives deep into overcoming limitations around the chosen option in Part-1 e.g. SSO, Silent Authentication/Refresh, etc.
* Part-3 talks about non web-apps i.e. backend rest clients that don't run on web browsers e.g. postman
* Part-4 talks about other values added flows such as jwt expiry, force logout etc.

# Handling JWT securely on your client - Part-2

## Quick recap
In the part 1 of this blog series, we established that in-memory storage is most secure way of storing jwt.

We also established that this approach brings about two limitations:
1. Limitation 1: SSO: Hampers the ability to implement SSO
2. Limitation 2: Session: Hampers user experience by forcing him/her to login on every tab/window
A subset of Limitation 2 is that the user is forced to login when they close their browser and reopen it

## More on the limitations 

### Limitation 1: SSO
Limitation 1 can only be solved with some sort of state management on the Authorization server. The server needs to retain information on all users who have logged in. 

**But this goes directly against the principles of using jwt, which are meant to be stateless.**

### Limitation 2: Session
Limitation 2 can only be solved with some sort of state management on the client browser side. The client needs to persist some information that is available across browser tabs and also across browser restarts. 

**But if you are thinking of persisting jwt (through localStorage or cookies), go to PART-1 of this series! I repeat - we will keep the jwt in-memory only**

## Overcoming these limitations
[...continue reading here...](https://mannharleen.github.io/2020-04-10-handling-jwt-securely-part-2/)
How do unique results per user work on huge sites like Twitter, Reddit, etc. Especially with complex criteria.
Tags: database, help, discuss
Published: 2020-04-10 12:11:52

How do sites with millions of users that serve up unique search results weighted by the individuals interests in a quick and scalable way.

For instance let’s say I have a site with 50,000,000 users, 100,000 categories, 10 different ordering criteria (new, best, controversial, etc). I want to return back the results per the persons unique criteria updating continually on the fly showing the best content from all the areas ordered by the best first.

Really interested in how you’d go about doing something like this at huge scale
Data gathering with python. An Example, get the tweets (part 2)
Tags: twitter, python, nasty, scraping
Published: 2020-04-10 12:08:53

---
title: Data gathering with python. An Example, get the tweets (part 2) 
published: true
description: Scraping twitter using nasty library to gather data for data science purposes 
tags: twitter, python, nasty, scraping
---
In the [previous post](https://dev.to/viksaaskool/data-gathering-with-python-an-example-part-1-kic), the part one I've displayed how to automate part of the data gathering process where you know most of the constrains and you need to cut down the manual work of data entry. Namely, my challenge was that I wanted to get tweets from English (most resources for data analysis - sorry other languages 😩) speaking stand up comedians in predefined period.
I've managed to produce `.csv` file with name of the stand up comedian and respective twitter handle. Everything I need to gather(scrape) their tweets. 

There's few ways one can achieve this:
1. Use Twitter API and preferred python library (there are a couple of good ones). 
PRO: you're using the API - you know what data you'll get regardless of the UI/structural changes
CON(?): limited amount of options for free usage, that needs to be approved - there's a process where you need to apply and get the API Key as a result of a request for use processed successfully.

2. Use [GetOldTweets3](https://pypi.org/project/GetOldTweets3/) (and variations of it)
PRO: easy to use for very little amount of data 
CON: google "Too Many Requests"

3. Use nasty library ([NASTY Advanced Search Tweet Yielder](https://github.com/lschmelzeisen/nasty)).
PRO: Easy to use, flexible
CON: I haven't came across one

Since I've tried all the approaches, I'll present you with the colab in which the one I think works the best: nasty

{% gist https://gist.github.com/ViksaaSkool/5fb024ea5b470017a607891d5febda34 %}


The result is `.csv` file with the format (it's [this](https://github.com/lschmelzeisen/nasty/blob/69e68f47521fb6eb19d0c917b030072a32cef997/nasty/tweet/tweet.py#L45) printed in rows):

{% gist https://gist.github.com/ViksaaSkool/615c831e97c86f67b2b770556b8a8e0c %}



After this the data needs to be cleaned, normalized and purified in order to be used for various purposes like sentiment analysis, topic modeling, labeling and so on.

Cheers.
Daily Developer Jokes - Friday, Apr 10, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-04-10 12:00:03

---
title: "Daily Developer Jokes - Friday, Apr 10, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Friday%2C%20Apr%2010%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258be05ecc.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What did the computer do at lunchtime?

___A:___ Had a byte!
 -->
Paylaşılmış Yazıcıların Otomatik Gözükmesi
Tags: pardus, linux, cups, debian
Published: 2020-04-10 11:54:38

**Paylaşılmış Yazıcıların Yazıcı Ayarları Penceresinde Gözükmesi Sorunu**

Yazıcıların otomatik bulunmaması için sırasıyla aşağıdaki komutlar çalıştırılır;
---
```
sudo apt remove avahi-daemon
systemctl disable cups-browsed.service

```
İkinci Diski Bağlamak (NTFS Disk)
Tags: pardus, linux, debian, xfce
Published: 2020-04-10 11:46:46

Laptop ya da masaüstü bildisayarınızda 2 adet disk var ve 1.diske Pardus kurdunuz 2.diskinizi yedek disk olarak kullanmak istiyorsanız aşağıdaki adımları izlemeniz gerekmektedir.

**1)** Pardus İşletim Sisteminizi birinci diske kurduktan sonra ikinci diskinizi fiziksel olarak bağlayınız.
---
**2)** Pardus İşletim Sistemini açtıktan sonra _terminal-uçbirimi_ açınız ve aşağıdaki komutu yazınız;
`sudo fdisk -l` 

Bu komut ile ikinci diskinizin bulunduğu PATH'i yazar. 
İkinci diskinizden başka bir disk fiziksel olarak bağlı değil ise
**/dev/sdb1** olarak gözükür, uzantısında NTFS yazar.
---
**3)** Aşağıdaki komut ile kök dizinin olduğu yerde yeni bir dizin açılır;
`sudo mkdir ikincidisk`
---
**4)** Yetkili kullanıcı (root) olarak oluşturduğumuz **ikincidisk** dizinine normal(yetkisiz) kullanıcı yetkisi veriyoruz;
`sudo chown KullanıcıAdı ikincidisk`
---
**5)**fstab dosyasına ikincidiski yazacağız;
`nano /etc/fstab`
nano ile açtığımız yerde en alt satıra aşağıdaki satırı ekliyoruz ve kaydediyoruz;
_**/dev/sb1 /ikincidisk  ntfs defaults 0 1**_

**6)** Masaüstüne ikincidisk'in kısayolunu(link) oluşturuyoruz (normal kullanıcı yetkisi ile;
`ln -s /ikincidisk .`

**7)** Bilgisayarı yeniden başlatıyoruz, bilgisayar açıldıktan sonra terminal ekranına aşağıdaki son komutu giriyoruz
`ntfsfix /dev/sdaX`
X yerine ikincidiskinizin bağlı olduğu PATH yazılır.
For fun and learning: playing around with JavaScript face detection and html5 canvas
Tags: facedetectionhtml5canvas
Published: 2020-04-10 11:36:52

---
title: For fun and learning: playing around with JavaScript face detection and html5 canvas
published: true
description: 
tags: face detection html5 canvas
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/lctgbucs7ik46v48bfrr.jpg
---

It’s easter and wanted to make some fun for my coworkers and what should be better than some Covid-19 fun in this surreal times.

I had the idea to put every model in our webshop a surgical mask on their face.

But how should I solve this?

*Face Detection!*
This was a topic I ever wanted to discover and so it was a perfect match for this. I started reading the [face-api.js](https://github.com/justadudewhohacks/face-api.js) documentation and after some hours of playing around with it I was ready to ship the easter egg on our testing server.

## Result:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lctgbucs7ik46v48bfrr.jpg)

## Try it yourself:
I made also a version where you can try it yourself: https://tiefenb.github.io/use-a-mask/

... and here are the source code: https://github.com/tiefenb/use-a-mask

## Reactions so far:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m07frd0hxpro04cock0g.png)

## Learnings:

1. [Loading images for HTML5 canvas is only possible with images with crossorigin attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image)
2. crossorigin attribute has to be set on the image tag before the image is loaded - it’s not possible afterwards. That means also, if you create the image element with JavaScript you have to add the crossorigin-attribute before the src-attribute.
3. [Rotating an single image in html5 canvas is not possible in the way most of us think. you have to rotate the canvas-context, than you put on the canvas the image and you rotate the canvas-context back to your normal angle](https://stackoverflow.com/a/16546061/1156058)
4. [Putting an image on a canvas is only possible after the image is full loaded - so you have to listen in the image.onload event](https://stackoverflow.com/a/15504471/1156058)
5. face-api.js tensorflow.js-models are quite big - better to make detection it on the server not the client

Thank's for reading and happy easter!
How to increase the gap between text and underlining in CSS
Tags: css, coding, webdev, frontend
Published: 2020-04-10 11:26:26

---
title: How to increase the gap between text and underlining in CSS
published: true
description: 
tags: CSS, Coding, web development, frontend
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/2img98ousmbpzmhs6y1c.png
---
Most frontend engineers just like me might have encountered this same problem where creating a gap between text and underline is a huge pain. 

In this short article, I will share an effective CSS trick that can make this happen with no stress. 

First, you create a div around that particular element you wish to place an underline.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/maqy5p5lwjmjt3qq1gjt.png)

After that, you proceed to style that particular div by giving it a padding and border-bottom value of your choice.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xep1b9j7arcbob152cfv.png)

If you preview the output at this point, you will notice that the width of the underline spans across the width of it's parent container of which you wouldn't want that to happen. How do we make the underline the same width with the content? Boom! The Max-content value of the width property! Works like magic! 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/966tyiyf52aflmpj6ni5.png)

Although the CSS Working Group has published a draft for text decoration level 4 which would add a new property <code>text-underline-offset </code> (as well as <code>text-decoration-thickness</code>) to allow control over the exact placement of an underline. 

As of this writing, it's an early-stage draft and has not been implemented by any browser. However, this trick is widely supported across all major browsers and also works perfectly with multiple text as well.

I hope you find this article helpful.
Testing droidcam 
Tags: covid, webcam, videoconference, meetings
Published: 2020-04-10 11:20:30

Yours truly is confined with his family since some weeks now. In the first week my son asked for my webcam to follow some lessons, so I had to use my tablet for videoconferencing. 
But the tablet, you know, is not very comfortable when you need to type something in the chat, or you want to open a browser window to check something. So I was using the tablet as an extra 'person' in the VC and the computer for the usual stuff.

These Easter days I'm having some more free time and I'm testing [droidcam](https://www.dev47apps.com/). This software can be installed in a mobile phone as a server and it needs to install a client in the computer, with versions for Windows, Macintosh, and Linux (which needs some compilation; not difficult, but maybe this can be a problem for some people). No version for iOS, if I'm true.

The experience? 
If you do not have a webcam, this allows you to have one. For me it is a problem to use the local WiFi network because of lack of good WiFi. But you can also use the USB connection (this Stack Overflow question [ADB device list doesn't show phone
](https://askubuntu.com/questions/863587/adb-device-list-doesnt-show-phone) helped me to solve the connection problems) and it seems to be working a bit better and avoiding bandwidth comsuption..

Let's see now what will happen.
Code Review: Name file after exposed function
Tags: typescript, refactorit, javascript, codereview
Published: 2020-04-10 11:15:24

In code reviews which we conduct in our team, I might find some examples of code, which is can be misleading or with no clear intent. This post is about to share reasoning and hear critique on some of these examples. 


# Name file after exposed function

One of the cases is having few functions in one file, related or maybe not, or can be completely not related, but somehow group in one file.

```
get/
  index.ts
    export getSomething :: Int -> Int
    export getSomethingElse :: String -> String
```

Few things we can tell immediately, 

* please don't use `index.js`, https://www.youtube.com/watch?v=M3BM9TB-8yA&vl=en
* both `get` directory and `index.ts` gave no context whatsoever.

Instead, try to name files after exposed function,  and move each of them into it's own file, like so

```
getSomething.ts
  export getSomething :: Int -> Int

getSomethingElse.ts
  export getSomethingElse :: String -> String
```

It shows intent by looking at filename. 

Few side effects which you may discover later,

* Functions are enclosed in file to ensure there's no shared variables; which leads to proper unit tests and maintainability.

* And after this change, there's powerful way to quickly go through project structure; by opening files which named after function and not searching through functions in search output of your text editor.


---
### Takeaways

* Name file after exposed function;
* Breaking up into small modules for unit testing and maintainability; 
* Browsing code within file vs. browsing code within project. 

One of the great examples in wild, https://github.com/lodash/lodash/tree/master/
TIL: Put script tags in head and use the defer attribute
Tags: todayilearned, javascript, html, bestpractice
Published: 2020-04-10 11:13:42

---
title: TIL: Put script tags in head and use the defer attribute
published: true
description: Be kind to browsers and let them finish parsing page HTML before running your JS.
tags: todayilearned, javascript, html, bestpractice
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/jal2qi1qkzwnna65k55a.png
---

I noticed the starter webpage project on [Glitch](https://glitch.com/) had this in the `<head>` section:

```
<!-- import the webpage's javascript file -->
<script src="/script.js" defer></script>
```

I was surprised to see a `<script>` tag in the `<head>` section, since I thought the best practice was to put these before `</body>`. That couldn't be right...the Glitch devs seem to care about things like this. Then I saw the `defer` attribute.

MDN says about `defer`:

> This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.

[Flavio Copes has a nice writeup on defer and async](https://flaviocopes.com/javascript-async-defer/). My key takeaways:
* `defer` only works in the `head` section.
* With `defer` the browser fetches the script in parallel with parsing the HTML. Even if the browser finishes fetching the script, it doesn't run it until it's done HTML parsing.
* Use `defer` not `async` because parsing ideally should complete before script execution.
* The best practice is what Glitch does, shown above. Put `<script src="..." defer>` in `<head>`.

Do you agree with this best practice?