jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

images to svg

Browse source
This commit is contained in:
Ilya Kantor 2019-07-28 15:42:37 +03:00
parent a31e881856
commit 3ba28aa104
734 changed files with 11682 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

8
6-data-storage/01-cookie/article.md
View file

@ -196,7 +196,7 @@ Now, while browsing the web in another window, you occasionally come to another
The form is submitted from `evil.com` directly to the bank site, and your cookie is also sent, just because it's sent every time you visit `bank.com`. So the bank recognizes you and actually performs the payment.
![](cookie-xsrf.png)
![](cookie-xsrf.svg)
That's called a cross-site request forgery (or XSRF) attack.
@ -358,15 +358,15 @@ For instance:
1. A page at `site.com` loads a banner from another site: `<img src="https://ads.com/banner.png">`.
2. Along with the banner, the remote server at `ads.com` may set `Set-Cookie` header with cookie like `id=1234`. Such cookie originates from `ads.com` domain, and will only be visible at `ads.com`:
![](cookie-third-party.png)
![](cookie-third-party.svg)
3. Next time when `ads.com` is accessed, the remote server gets the `id` cookie and recognizes the user:
![](cookie-third-party-2.png)
![](cookie-third-party-2.svg)
4. What's even more important, when the users moves from `site.com` to another site `other.com` that also has a banner, then `ads.com` gets the cookie, as it belongs to `ads.com`, thus recognizing the visitor and tracking him as he moves between sites:
![](cookie-third-party-3.png)
![](cookie-third-party-3.svg)
Third-party cookies are traditionally used for tracking and ads services, due to their nature. They are bound to the originating domain, so `ads.com` can track the same user between different sites, if they all access it.

BIN
6-data-storage/01-cookie/cookie-third-party-2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 18 KiB

28
6-data-storage/01-cookie/cookie-third-party-2.svg Normal file
View file

@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="668px" height="192px" viewBox="0 0 668 192" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>cookie-third-party-2.svg</title>
<desc>Created with sketchtool.</desc>
<g id="data-storage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="cookie-third-party-2.svg">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="38" y="48" width="282" height="99"></rect>
<text id="&lt;img-src=&quot;https://ad" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="42" y="70">&lt;img src="https://ads.com/banner.png"&gt;</tspan>
</text>
<text id="site.com" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="149" y="36">site.com</tspan>
</text>
<rect id="Rectangle-1-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="505" y="48" width="140" height="99"></rect>
<text id="ads.com" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="543" y="36">ads.com</tspan>
</text>
<path id="Line" d="M485.492587,91.6098407 L321.374704,69.3565684 L321.643432,67.3747042 L485.761314,89.6279765 L486.567496,83.682384 L499.5,92.5 L484.686405,97.5554332 L485.492587,91.6098407 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="GET-/banner.png" transform="translate(416.568389, 68.381858) rotate(7.000000) translate(-416.568389, -68.381858) " font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="361.068389" y="73.8818576">GET /banner.png</tspan>
</text>
<text id="cookie:-id=123" transform="translate(410.079569, 93.199054) rotate(7.000000) translate(-410.079569, -93.199054) " font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="363.079569" y="98.6990536">cookie: id=123</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
6-data-storage/01-cookie/cookie-third-party-2@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 41 KiB

BIN
6-data-storage/01-cookie/cookie-third-party-3.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 19 KiB

29
6-data-storage/01-cookie/cookie-third-party-3.svg Normal file
View file

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="668px" height="192px" viewBox="0 0 668 192" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>cookie-third-party-3.svg</title>
<desc>Created with sketchtool.</desc>
<g id="data-storage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="cookie-third-party-3.svg">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="38" y="48" width="282" height="99"></rect>
<text id="&lt;img-src=&quot;https://ad" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="42" y="70">&lt;img src="https://ads.com/banner.png"&gt;</tspan>
</text>
<text id="other.com" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="144" y="36">other.com</tspan>
</text>
<rect id="Rectangle-1-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="505" y="48" width="140" height="99"></rect>
<text id="ads.com" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="543" y="36">ads.com</tspan>
</text>
<path id="Line" d="M485.492587,91.6098407 L321.374704,69.3565684 L321.643432,67.3747042 L485.761314,89.6279765 L486.567496,83.682384 L499.5,92.5 L484.686405,97.5554332 L485.492587,91.6098407 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="GET-/banner.png" transform="translate(416.568389, 68.381858) rotate(7.000000) translate(-416.568389, -68.381858) " font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="361.068389" y="73.8818576">GET /banner.png</tspan>
</text>
<text id="cookie:-id=123" transform="translate(410.079569, 93.199054) rotate(7.000000) translate(-410.079569, -93.199054) " font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="363.079569" y="98.6990536">cookie: id=123</tspan>
</text>
<ellipse id="Oval-6" stroke-opacity="0.572803442" stroke="#EE6B47" stroke-width="2" cx="176" cy="31.5" rx="48" ry="13.5"></ellipse>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
6-data-storage/01-cookie/cookie-third-party-3@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 47 KiB

BIN
6-data-storage/01-cookie/cookie-third-party.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 20 KiB

29
6-data-storage/01-cookie/cookie-third-party.svg Normal file
View file

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="668px" height="192px" viewBox="0 0 668 192" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>cookie-third-party.svg</title>
<desc>Created with sketchtool.</desc>
<g id="data-storage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="cookie-third-party.svg">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="38" y="48" width="282" height="99"></rect>
<text id="&lt;img-src=&quot;https://ad" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="42" y="70">&lt;img src="https://ads.com/banner.png"&gt;</tspan>
</text>
<text id="site.com" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="149" y="36">site.com</tspan>
</text>
<rect id="Rectangle-1-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="505" y="48" width="140" height="99"></rect>
<text id="ads.com" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="543" y="36">ads.com</tspan>
</text>
<path id="Line" d="M485.492587,88.6098407 L321.374704,66.3565684 L321.643432,64.3747042 L485.761314,86.6279765 L486.567496,80.682384 L499.5,89.5 L484.686405,94.5554332 L485.492587,88.6098407 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy" d="M336.262135,126.742529 L500.365913,105.881879 L500.618121,107.865913 L336.514342,128.726563 L337.270966,134.678665 L322.5,129.5 L335.505512,120.790427 L336.262135,126.742529 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="GET-/banner.png" transform="translate(416.568389, 65.381858) rotate(7.000000) translate(-416.568389, -65.381858) " font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="361.068389" y="70.8818576">GET /banner.png</tspan>
</text>
<text id="Set-Cookie:-id=123" transform="translate(413.468881, 128.991204) rotate(-7.000000) translate(-413.468881, -128.991204) " font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="352.968881" y="134.491204">Set-Cookie: id=123</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
6-data-storage/01-cookie/cookie-third-party@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 47 KiB

BIN
6-data-storage/01-cookie/cookie-xsrf.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 20 KiB

34
6-data-storage/01-cookie/cookie-xsrf.svg Normal file
View file

@ -0,0 +1,34 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="668px" height="166px" viewBox="0 0 668 166" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>cookie-xsrf.svg</title>
<desc>Created with sketchtool.</desc>
<g id="data-storage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="cookie-xsrf.svg">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="38" y="48" width="282" height="88"></rect>
<text id="&lt;form-action=&quot;https:" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="48" y="69">&lt;form action="https://bank.com/pay"&gt;</tspan>
<tspan x="48" y="88"> ....</tspan>
<tspan x="48" y="107">&lt;/form&gt;</tspan>
</text>
<text id="evil.com" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="149" y="36">evil.com</tspan>
</text>
<rect id="Rectangle-1-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="505" y="48" width="140" height="88"></rect>
<text id="got-the-cookie?-okay" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="526.469238" y="108">got the cookie?</tspan>
<tspan x="558.307617" y="127">okay!</tspan>
</text>
<text id="bank.com" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="543" y="36">bank.com</tspan>
</text>
<path id="Line" d="M485.492587,91.6098407 L321.374704,69.3565684 L321.643432,67.3747042 L485.761314,89.6279765 L486.567496,83.682384 L499.5,92.5 L484.686405,97.5554332 L485.492587,91.6098407 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="POST-/pay" transform="translate(409.575842, 67.259988) rotate(7.000000) translate(-409.575842, -67.259988) " font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="376.075842" y="72.7599882">POST /pay</tspan>
</text>
<text id="cookie:-user=John" transform="translate(407.075842, 90.259988) rotate(7.000000) translate(-407.075842, -90.259988) " font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="349.075842" y="95.7599882">cookie: user=John</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
6-data-storage/01-cookie/cookie-xsrf@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 49 KiB