DotNet First Side: Aug 22, 2020

Saturday, August 22, 2020

Chapter 1To 5 HTML

Contents

About

................................................................................................................................................................................... 1

Chapter 1: Getting started with HTML

................................................................................................................ 2

Section 1.1: Hello World 2

Chapter 2: Doctypes

.................................................................................................................................................... 4

Section 2.1: Adding the Doctype 4

Section 2.2: HTML 5 Doctype 4

Chapter 3: Headings

.................................................................................................................................................... 5

Section 3.1: Using Headings 5

Chapter 4: Paragraphs

.............................................................................................................................................. 6

Section 4.1: HTML Paragraphs

Chapter 5: Text Formatting

..................................................................................................................................... 6

..................................................................................................................................... 7

Section 5.1: Highlighting 7

Section 5.2: Bold, Italic, and Underline 7

Section 5.3: Abbreviation 8

Section 5.4: Inserted, Deleted, or Stricken 8

Section 5.5: Superscript and Subscript 8

Chapter 1: Getting started with HTML

Version Speciﬁcation Release Date

1.0 N/A 1994-01-01

2.0 RFC 1866

1995-11-24

3.2 W3C: HTML 3.2 Speciﬁcation

1997-01-14

4.0 W3C: HTML 4.0 Speciﬁcation

1998-04-24

4.01 W3C: HTML 4.01 Speciﬁcation

1999-12-24

5 WHATWG: HTML Living Standard

2014-10-28

5.1 W3C: HTML 5.1 Speciﬁcation

2016-11-01

Section 1.1: Hello World

Introduction

HTML (Hypertext Markup Language) uses a markup system composed of elements which represent speciﬁc content. Markup means that with HTML you declare what is presented to a viewer, not how it is presented. Visual representations are deﬁned by Cascading Style Sheets (CSS) and realized by browsers. Still existing elements that allow for such, like e.g. font, "are entirely obsolete, and must not be used by authors"[1].

HTML is sometimes called a programming language but it has no logic, so is a markup language. HTML tags provide semantic meaning and machine-readability to the content in the page.

An element usually consists of an opening tag (<element_name>), a closing tag (</element_name>), which contain the element's name surrounded by angle brackets, and the content in between:

<element_name>...content...</element_name>

There are some HTML elements that don't have a closing tag or any contents. These are called void elements. Void elements include <img>, <meta>, <link> and <input>.

Element names can be thought of as descriptive keywords for the content they contain, such as video, audio, table, footer.

A HTML page may consist of potentially hundreds of elements which are then read by a web browser, interpreted and rendered into human readable or audible content on the screen.

For this document it is important to note the diﬀerence between elements and tags:

Elements: video, audio, table, footer

Tags: <video>, <audio>, <table>, <footer>, </html>, </body>

Element insight

Let's break down a tag...

The <p> tag represents a common paragraph.

Elements commonly have an opening tag and a closing tag. The opening tag contains the element's name in angle brackets (<p>). The closing tag is identical to the opening tag with the addition of a forward slash (/) between the opening bracket and the element's name (</p>).

Content can then go between these two tags: <p>This is a simple paragraph.</p>.

Creating a simple page

The following HTML example creates a simple "Hello World" web page.

HTML ﬁles can be created using any text editor. The ﬁles must be saved with a .html or .htm[2] extension in order to be recognized as HTML ﬁles.

Once created, this ﬁle can be opened in any web browser.

Simple page break down

These are the tags used in the example:

Tag Meaning

<!DOCTYPE> Deﬁnes the HTML version used in the document. In this case it is HTML5.

See the doctypes topic for more information.

Opens the page. No markup should come after the closing tag (</html>). The lang attribute declares

<html>

<head>

<meta>

the primary language of the page using the ISO language codes (en for English). See the Content Language topic for more information.

Opens the head section, which does not appear in the main browser window but mainly contains information about the HTML document, called metadata. It can also contain imports from external stylesheets and scripts. The closing tag is </head>.

Gives the browser some metadata about the document. The charset attribute declares the character encoding. Modern HTML documents should always use UTF-8, even though it is not a requirement. In HTML, the <meta> tag does not require a closing tag.

See the Meta topic for more information.

<title> The title of the page. Text written between this opening and the closing tag (</title>) will be displayed on the tab of the page or in the title bar of the browser.

<body> Opens the part of the document displayed to users, i.e. all the visible or audible content of a page. No content should be added after the closing tag </body>.

<h1> A level 1 heading for the page.

See headings for more information.

<p> Represents a common paragraph of text.

1. ↑ HTML5, 11.2 Non-conforming features

2. ↑ .htm is inherited from the legacy DOS three character ﬁle extension limit.

Chapter 2: Doctypes

Doctypes - short for 'document type' - help browsers to understand the version of HTML the document is written in for better interpretability. Doctype declarations are not HTML tags and belong at the very top of a document. This topic explains the structure and declaration of various doctypes in HTML.

Section 2.1: Adding the Doctype

The <!DOCTYPE> declaration should always be included at the top of the HTML document, before the <html> tag.

Version ≥ 5

See HTML 5 Doctype for details on the HTML 5 Doctype.

Section 2.2: HTML 5 Doctype

HTML5 is not based on SGML (Standard Generalized Markup Language), and therefore does not require a reference to a DTD (Document Type Deﬁnition).

HTML 5 Doctype declaration:

Case Insensitivity

Per the W3.org HTML 5 DOCTYPE Spec:

A DOCTYPE must consist of the following components, in this order:

1. A string that is an ASCII case-insensitive match for the string "<!DOCTYPE".

therefore the following DOCTYPEs are also valid:

This SO article discusses the topic extensively: Uppercase or lowercase doctype?

Chapter 3: Headings

HTML provides not only plain paragraph tags, but six separate header tags to indicate headings of various sizes and thicknesses. Enumerated as heading 1 through heading 6, heading 1 has the largest and thickest text while heading 6 is the smallest and thinnest, down to the paragraph level. This topic details proper usage of these tags.

Section 3.1: Using Headings

Headings can be used to describe the topic they precede and they are deﬁned with the <h1> to <h6> tags. Headings support all the global attributes.

<h1> deﬁnes the most important heading.

<h6> deﬁnes the least important heading.

Deﬁning a heading:

Correct structure matters

Search engines and other user agents usually index page content based on heading elements, for example to create a table of contents, so using the correct structure for headings is important.

In general, an article should have one h1 element for the main title followed by h2 subtitles – going down a layer if necessary. If there are h1 elements on a higher level they shoudn't be used to describe any lower level content.

Example document (extra intendation to illustrate hierarchy):

Chapter 4: Paragraphs

Column Column

<p> Deﬁnes a paragraph

<br> Inserts a single line break

<pre> Deﬁnes pre-formatted text

Paragraphs are the most basic HTML element. This topic explains and demonstrates the usage of the paragraph element in HTML.

Section 4.1: HTML Paragraphs

The HTML <p> element deﬁnes a paragraph:

Display-

You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create diﬀerent results.

With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code. The browser will remove any extra spaces and extra lines when the page is displayed:

Chapter 5: Text Formatting

While most HTML tags are used to create elements, HTML also provides in-text formatting tags to apply speciﬁc text-related styles to portions of text. This topic includes examples of HTML text formatting such as highlighting, bolding, underlining, subscript, and stricken text

Section 5.1: Highlighting

The <mark> element is new in HTML5 and is used to mark or highlight text in a document "due to its relevance in another context".1

The most common example would be in the results of a search were the user has entered a search query and results are shown highlighting the desired query.

Output:

A common standard formatting is black text on a yellow background, but this can be changed with CSS.

Section 5.2: Bold, Italic, and Underline

Bold Text

To bold text, use the <strong> or <b> tags:

What's the diﬀerence? Semantics. <strong> is used to indicate that the text is fundamentally or semantically important to the surrounding text, while <b> indicates no such importance and simply represents text that should be bolded.

If you were to use <b> a text-to-speech program would not say the word(s) any diﬀerently than any of the other words around it - you are simply drawing attention to them without adding any additional importance. By using

<strong>, though, the same program would want to speak those word(s) with a diﬀerent tone of voice to convey that the text is important in some way.

Italic Text

To italicize text, use the <em> or <i> tags:

What's the diﬀerence? Semantics. <em> is used to indicate that the text should have extra emphasis that should be stressed, while <i> simply represents text which should be set oﬀ from the normal text around it.

For example, if you wanted to stress the action inside a sentence, one might do so by emphasizing it in italics via

<em>: "Would you just submit the edit already?"

But if you were identifying a book or newspaper that you would normally italicize stylistically, you would simply use

<i>: "I was forced to read Romeo and Juliet in high school.

Underlined Text

While the <u> element itself was deprecated in HTMl 4, it was reintroduced with alternate semantic meaning in HTML 5 - to represent an unarticulated, non-textual annotation. You might use such a rendering to indicate misspelled text on the page, or for a Chinese proper name mark.

Section 5.3: Abbreviation

To mark some expression as an abbreviation, use <abbr> tag:

If present, the title attribute is used to present the full description of such abbreviation.

Section 5.4: Inserted, Deleted, or Stricken

To mark text as inserted, use the <ins> tag:

To mark text as deleted, use the <del> tag:

To strike through text, use the <s> tag:

Section 5.5: Superscript and Subscript

To oﬀset text either upward or downward you can use the tags <sup> and <sub>. To create superscript:

To create subscript:

@EVERYTHINGNT

Related word

DSniff

"dsniff is a collection of tools for network auditing and penetration testing. dsniff, filesnarf, mailsnarf, msgsnarf, urlsnarf, and webspy passively monitor a network for interesting data (passwords, e-mail, files, etc.). arpspoof, dnsspoof, and macof facilitate the interception of network traffic normally unavailable to an attacker (e.g, due to layer-2 switching). sshmitm and webmitm implement active monkey-in-the-middle attacks against redirected SSH and HTTPS sessions by exploiting weak bindings in ad-hoc PKI." read more...

Website: http://www.monkey.org/~dugsong/dsniff/

More info

Mythbusters: Is An Open (Unencrypted) WiFi More Dangerous Than A WPA2-PSK? Actually, It Is Not.

Introduction

Whenever security professionals recommend the 5 most important IT security practices to average users, one of the items is usually something like: "Avoid using open Wifi" or "Always use VPN while using open WiFi" or "Avoid sensitive websites (e.g. online banking) while using open WiFI", etc.

What I think about this? It is bullshit. But let's not jump to the conclusions. Let's analyze all risks and factors here.

During the following analysis, I made two assumptions. The first one is that we are comparing public WiFi hotspots with no encryption at all (referred to as Open), and we compare this to public WiFi hotspots with WPA2-PSK (and just hope WEP died years before). The other assumption is there are people who are security-aware, and those who just don't care. They just want to browse the web, access Facebook, write e-mails, etc.

The risks

Let's discuss the different threats people face using public hotspots, compared to home/work internet usage:

1. Where the website session data is not protected with SSL/TLS (and the cookie is not protected with secure flag), attackers on the same hotspot can obtain the session data and use it in session/login credentials stealing. Typical protocols affected:

HTTP sites
HTTPS sites but unsecured cookie
FTP without encryption
IMAP/SMTP/POP3 without SSL/TLS or STARTTLS

2. Attackers can inject extra data into the HTTP traffic, which can be used for exploits, or social engineer attacks (e.g. update Flash player with our malware) – see the Dark Hotel campaign

3. Attackers can use tools like SSLStrip to keep the user's traffic on clear text HTTP and steal password/session data/personal information

4. Attackers can monitor and track user activity

5. Attackers can directly attack the user's machine (e.g. SMB service)

WPA2-PSK security

So, why is a public WPA2-PSK WiFi safer than an open WiFi? Spoiler alert: it is not!

In a generic public WPA2-PSK scenario, all users share the same password. And guess what, the whole traffic can be decrypted with the following information: SSID + shared password + information from the 4-way handshake. https://wiki.wireshark.org/HowToDecrypt802.11

If you want to see it in action, here is a nice tutorial for you

http://www.lovemytool.com/blog/2010/05/wireshark-and-tshark-decrypt-sample-capture-file-by-joke-snelders.html

Decrypted WPA2-PSK traffic

Any user having access to the same WPA2-PSK network knows this information. So they can instantly decrypt your traffic. Or the attackers can just set up an access point with the same SSID, same password, and stronger signal. And now, the attacker can instantly launch active man-in-the-middle attacks. It is a common belief (even among ITSEC experts) that WPA2-PSK is not vulnerable to this attack. I am not sure why this vulnerability was left in the protocol, if you have the answer, let me know. Edit (2015-08-03): I think the key message here is that without server authentication (e.g. via PKI), it is not possible to solve this.

Let me link here one of my previous posts here with a great skiddie tool:

http://jumpespjump.blogspot.nl/2014/04/dsploit.html

To sum up, attackers on a WPA2-PSK network can:

Decrypt all HTTP/FTP/IMAP/SMTP/POP3 passwords or other sensitive information
Can launch active attacks like SSLStrip, or modify HTTP traffic to include exploit/social engineer attacks
Can monitor/track user activity

The only difference between open and WPA2-PSK networks is that an open network can be hacked with an attacker of the skill level of 1 from 10, while the WPA2-PSK network needs and an attacker with a skill level of 1.5. That is the difference.

The real solutions

1. Website owners, service providers should deploy proper (trusted) SSL/TLS infrastructure, protect session cookies, etc. Whenever a user (or security professional) notices a problem with the quality of the service (e.g. missing SSL/TLS), the service provider has to be notified. If no change is made, it is recommended to drop the service provider and choose a more secure one. Users have to use HTTPS Everywhere plugin.

2. Protect the device against exploits by patching the software on it, use a secure browser (Chrome, IE11 + enhanced protection), disable unnecessary plugins (Java, Flash, Silverlight), or at least use it via click-to-play. Also, the use of exploit mitigations tools (EMET, HitmanPro Alert, Malwarebytes AntiExploit) and a good internet security suite is a good idea.

3. Website owners have to deploy HSTS, and optionally include their site in an HSTS preload list

4. Don't click blindly on fake downloads (like fake Flash Player updates)

5. The benefits of a VPN is usually overestimated. A VPN provider is just another provider, like the hotspot provider, or the ISP. They can do the same malicious stuff (traffic injecting, traffic monitoring, user tracking). Especially when people use free VPNs. And "Average Joe" will choose a free VPN. Also, VPN connections tend to be disconnected, and almost none of the VPN providers provide fail secure VPNs. Also, for the price of a good VPN service you can buy a good data plan and use 4G/3G instead of low-quality public hotspots. But besides this, on mobile OSes (Android, iOS, etc.) I strongly recommend the use of VPN, because it is not practically feasible to know for users which app is using SSL/TLS and which is not.

6. Use a location-aware firewall, and whenever the network is not trusted, set it to a Public.

7. In a small-business/home environment, buy a WiFi router with guest WiFi access possibility, where the different passwords can be set to guest networks than used for the other.

Asking the question "Are you using open WiFi?", or "Do you do online banking on open WiFi?" are the wrong questions. The good questions are:

Do you trust the operator(s) of the network you are using?
Are the clients separated?
If clients are not separated, is it possible that there are people with malicious intent on the network?
Are you security-aware, and are you following the rules previously mentioned? If you do follow these rules, those will protect you on whatever network you are.

And call me an idiot, but I do online banking, e-shopping, and all the other sensitive stuff while I'm using open WiFi. And whenever I order pizza from an HTTP website, attackers can learn my address. Which is already in the phone book, on Facebook, and in every photo metadata I took with my smartphone about my cat and uploaded to the Internet (http://iknowwhereyourcatlives.com/).

Most articles and research publications are full of FUD about what people can learn from others. Maybe they are just outdated, maybe they are not. But it is totally safe to use Gmail on an open WiFi, no one will be able to read my e-mails.

PS: I know "Average Joe" won't find my blog post, won't start to read it, won't understand half I wrote. But even if they do, they won't patch their browser plugins, pay for a VPN, or check the session cookie. So they are doomed to fail. That's life. Deal with it.

Read more

DotNet First Side

Saturday, August 22, 2020

Chapter 1To 5 HTML

Related word

DSniff

More info

Mythbusters: Is An Open (Unencrypted) WiFi More Dangerous Than A WPA2-PSK? Actually, It Is Not.

Introduction

The risks

WPA2-PSK security

The real solutions

Dotnet-Interviews

Blog Archive

Blog Roll