` with styles `height: 100%; width: 100%;`, so that it will intercept all clicks. That `

` is to be removed if `window == top` or if we figure out that we don't need the protection. +Тому є інші рішення...Наприклад, ми можемо "покрити" сторінку `

` зі стилями `height: 100%; width: 100%;`, щоб він перехоплював усі клацання. Цей `

` можна видалити, якщо `window == top` або якщо ми зрозуміли, що захист нам не потрібен. -Something like this: +Щось на зразок цього: ```html

- Go to the site + Перейти на сайт

``` -The demo: +Демо: [codetabs src="protector"] -## Samesite cookie attribute +## Атрибут cookie: samesite -The `samesite` cookie attribute can also prevent clickjacking attacks. +Атрибут cookie `samesite` також може запобігти clickjacking атакам. -A cookie with such attribute is only sent to a website if it's opened directly, not via a frame, or otherwise. More information in the chapter . +Файл cookie з таким атрибутом надсилається на веб-сайт, лише якщо його відкрито безпосередньо, а не через фрейм чи іншим чином. Більше інформації в розділі . -If the site, such as Facebook, had `samesite` attribute on its authentication cookie, like this: +Якби сайт, наприклад Facebook, при аутентифікації мав атрибут `samesite` у файлі cookie, ось так: ``` Set-Cookie: authorization=secret; samesite ``` -...Then such cookie wouldn't be sent when Facebook is open in iframe from another site. So the attack would fail. +...Тоді такий файл cookie не надсилатиметься, коли Facebook буде відкрито в iframe з іншого сайту. Тож атака не вдасться. -The `samesite` cookie attribute will not have an effect when cookies are not used. This may allow other websites to easily show our public, unauthenticated pages in iframes. +Атрибут cookie `samesite` не матиме ефекту, якщо файли cookies не використовуються. Це може дозволити іншим веб-сайтам легко показувати наші загальнодоступні, неавтентифіковані сторінки в iframes. -However, this may also allow clickjacking attacks to work in a few limited cases. An anonymous polling website that prevents duplicate voting by checking IP addresses, for example, would still be vulnerable to clickjacking because it does not authenticate users using cookies. +Однак це також може дозволяти атакам за допомогою clickjacking працювати в кількох обмежених випадках. Наприклад, веб-сайт анонімного опитування, який запобігає дублюванню голосування шляхом перевірки IP-адреси, все одно буде вразливим до clickjacking атаки, оскільки він не автентифікує користувачів за допомогою файлів cookie. -## Summary +## Підсумки -Clickjacking is a way to "trick" users into clicking on a victim site without even knowing what's happening. That's dangerous if there are important click-activated actions. +Clickjacking -- це спосіб "обдурити" користувачів, щоб вони натиснули на сайт-жертву, навіть не знаючи, що відбувається. Це небезпечно, якщо є важливі дії, які активуються кліком. -A hacker can post a link to their evil page in a message, or lure visitors to their page by some other means. There are many variations. +Хакер може розмістити в повідомленні посилання на свою шкідливу сторінку або заманити відвідувачів якимось іншим способом. Існує багато варіацій. -From one perspective -- the attack is "not deep": all a hacker is doing is intercepting a single click. But from another perspective, if the hacker knows that after the click another control will appear, then they may use cunning messages to coerce the user into clicking on them as well. +З однієї точки зору -- атака "не глибока": все, що робить хакер, це перехоплює один клік. Але з іншої -- якщо хакер знає, що після натискання з’явиться інший елемент керування, він може використовувати хитрі повідомлення, щоб змусити користувача натиснути на них. -The attack is quite dangerous, because when we engineer the UI we usually don't anticipate that a hacker may click on behalf of the visitor. So vulnerabilities can be found in totally unexpected places. +Атака досить небезпечна, тому що коли ми розробляємо інтерфейс користувача, ми зазвичай не очікуємо, що хакер може клацнути від імені відвідувача. Тому вразливість можна знайти в абсолютно несподіваних місцях. -- It is recommended to use `X-Frame-Options: SAMEORIGIN` on pages (or whole websites) which are not intended to be viewed inside frames. -- Use a covering `

` if we want to allow our pages to be shown in iframes, but still stay safe. +- Рекомендується використовувати `X-Frame-Options: SAMEORIGIN` на сторінках (або веб-сайтах загалом), які не призначені для перегляду всередині фреймів. +- Використовуйте `

` прикриття, якщо потрібно дозволити показ сторінок у iframes та залишатися в безпеці. diff --git a/3-frames-and-windows/06-clickjacking/clickjacking-visible.view/facebook.html b/3-frames-and-windows/06-clickjacking/clickjacking-visible.view/facebook.html index 6b8231c71..e0c0c3691 100644 --- a/3-frames-and-windows/06-clickjacking/clickjacking-visible.view/facebook.html +++ b/3-frames-and-windows/06-clickjacking/clickjacking-visible.view/facebook.html @@ -3,7 +3,7 @@ - + diff --git a/3-frames-and-windows/06-clickjacking/clickjacking-visible.view/index.html b/3-frames-and-windows/06-clickjacking/clickjacking-visible.view/index.html index 9f8d82197..65dfdda17 100644 --- a/3-frames-and-windows/06-clickjacking/clickjacking-visible.view/index.html +++ b/3-frames-and-windows/06-clickjacking/clickjacking-visible.view/index.html @@ -19,14 +19,14 @@ } -

Click to get rich now:

Натисніть, щоб розбагатіти:

- + - + -

...And you're cool (I'm a cool hacker actually)!

...І ти крутий (насправді я крутий хакер)!

diff --git a/3-frames-and-windows/06-clickjacking/clickjacking.view/facebook.html b/3-frames-and-windows/06-clickjacking/clickjacking.view/facebook.html index 6b8231c71..e0c0c3691 100644 --- a/3-frames-and-windows/06-clickjacking/clickjacking.view/facebook.html +++ b/3-frames-and-windows/06-clickjacking/clickjacking.view/facebook.html @@ -3,7 +3,7 @@ - + diff --git a/3-frames-and-windows/06-clickjacking/clickjacking.view/index.html b/3-frames-and-windows/06-clickjacking/clickjacking.view/index.html index 05ec48cb8..c982bf44d 100644 --- a/3-frames-and-windows/06-clickjacking/clickjacking.view/index.html +++ b/3-frames-and-windows/06-clickjacking/clickjacking.view/index.html @@ -19,14 +19,14 @@ } -

Click to get rich now:

Натисніть, щоб розбагатіти:

- + - + -

...And you're cool (I'm a cool hacker actually)!

...І ти крутий (насправді я крутий хакер)!

diff --git a/3-frames-and-windows/06-clickjacking/protector.view/iframe.html b/3-frames-and-windows/06-clickjacking/protector.view/iframe.html index a1ca6fcc9..f792dfeea 100644 --- a/3-frames-and-windows/06-clickjacking/protector.view/iframe.html +++ b/3-frames-and-windows/06-clickjacking/protector.view/iframe.html @@ -20,7 +20,7 @@

- Go to the site + Перейти на сайт

- This text is always visible. + Цей текст завжди видно. - But if the page was open inside a document from another domain, the div over it would prevent any actions. + Але якщо сторінка була відкрита всередині документа з іншого домену, div над нею завадить будь-яким діям. - + diff --git a/3-frames-and-windows/06-clickjacking/top-location.view/iframe.html b/3-frames-and-windows/06-clickjacking/top-location.view/iframe.html index da477f400..c2e9c2a66 100644 --- a/3-frames-and-windows/06-clickjacking/top-location.view/iframe.html +++ b/3-frames-and-windows/06-clickjacking/top-location.view/iframe.html @@ -7,7 +7,7 @@ -

Changes top.location to javascript.info

Змінює top.location на javascript.info

- Press the "Start" to begin. + Натісніть "Пуск" для початку.

- "Stop" to finish. + "Стоп" для зупинки. diff --git a/6-data-storage/03-indexeddb/article.md b/6-data-storage/03-indexeddb/article.md index 54bdb0382..33dcf7617 100644 --- a/6-data-storage/03-indexeddb/article.md +++ b/6-data-storage/03-indexeddb/article.md @@ -35,6 +35,7 @@ let openRequest = indexedDB.open(name, version); ``` - `name` -- рядок, ім’я бази даних. + - `version` -- версія є цілим числом, типово `1` (пояснення нижче). У нас може бути багато баз даних з різними іменами, але всі вони існують лише в межах поточного вебсайту (протокол/домен/порт). Різні вебсайти не мають доступу до баз даних один одного. @@ -660,9 +661,9 @@ let request = store.openCursor(query, [direction]); - **`query`** є ключем або діапазоном ключів, як і для `getAll`. - **`direction`** є необов’язковим аргументом, що вказує який порядок використовувати: - - `"next"` -- типово, курсор піднімається від найнижчого ключа до найвищчого. - - `"prev"` -- зворотний порядок: вниз від запису з найбільшим ключем. - - `"nextunique"`, `"prevunique"` -- те саме, що й вище, але пропускає записи з тим же ключем, який вже був (лише для курсорів за індексами, наприклад, для кількох книг із ціною=5 буде повернута лише перша). + - `"next"` -- типово, курсор піднімається від найнижчого ключа до найвищчого. + - `"prev"` -- зворотний порядок: вниз від запису з найбільшим ключем. + - `"nextunique"`, `"prevunique"` -- те саме, що й вище, але пропускає записи з тим же ключем, який вже був (лише для курсорів за індексами, наприклад, для кількох книг із ціною=5 буде повернута лише перша). **Основна відмінність курсору полягає в тому, що `request.onsuccess` запускається кілька разів: один раз для кожного результату.** diff --git a/7-animation/2-css-animations/4-animate-circle-callback/task.md b/7-animation/2-css-animations/4-animate-circle-callback/task.md index 4a20ca604..cacf19d36 100644 --- a/7-animation/2-css-animations/4-animate-circle-callback/task.md +++ b/7-animation/2-css-animations/4-animate-circle-callback/task.md @@ -1,15 +1,15 @@ -# Animated circle with callback +# Коло анімоване за допомогою функції. -In the task an animated growing circle is shown. +У завданні показана анімація зростання кола. -Now let's say we need not just a circle, but to show a message inside it. The message should appear *after* the animation is complete (the circle is fully grown), otherwise it would look ugly. +Припустимо, що нам потрібно показати повідомлення всередині нього. Повідомлення має з’явитися *після* завершення анімації (коли коло повністю виросло), інакше це виглядатиме погано. -In the solution of the task, the function `showCircle(cx, cy, radius)` draws the circle, but gives no way to track when it's ready. +У вирішенні завдання функція `showCircle(cx, cy, radius)` малює коло, але не дає можливості відстежити, коли воно готове. -Add a callback argument: `showCircle(cx, cy, radius, callback)` to be called when the animation is complete. The `callback` should receive the circle `

` as an argument. +Додайте аргументом функцію зворотного виклику: `showCircle(cx, cy, radius, callback)`, яка буде викликатися після завершення анімації. Вона має отримувати коло `

` як аргумент. -Here's the example: +Ось приклад: ```js showCircle(150, 150, 100, div => { @@ -18,8 +18,8 @@ showCircle(150, 150, 100, div => { }); ``` -Demo: +Демо: [iframe src="solution" height=260] -Take the solution of the task as the base. +За основу візьмемо рішення задачі diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index 8dd64f39a..c10e7c826 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -1,16 +1,16 @@ -# CSS-animations +# CSS-анімації -CSS animations make it possible to do simple animations without JavaScript at all. +CSS дозволяє робити прості анімації взагалі без JavaScript. -JavaScript can be used to control CSS animations and make them even better, with little code. +JavaScript можна використовувати для керування CSS-анімацією та покращення її, додавши зовсім трохи коду. -## CSS transitions [#css-transition] +## CSS-переходи [#css-transition] -The idea of CSS transitions is simple. We describe a property and how its changes should be animated. When the property changes, the browser paints the animation. +Ідея CSS-переходів дуже проста. Ми описуємо властивість і як саме її зміни мають бути анімовані. Коли властивість змінюється, браузер анімую цей перехід, тобто зміну значення. -That is, all we need is to change the property, and the fluid transition will be done by the browser. +Тобто все, що нам потрібно, це змінити властивість, а плавний перехід буде здійснюватися браузером. -For instance, the CSS below animates changes of `background-color` for 3 seconds: +Наприклад, наведений нижче CSS анімує зміни `background-color` протягом 3 секунд: ```css .animated { @@ -19,12 +19,12 @@ For instance, the CSS below animates changes of `background-color` for 3 seconds } ``` -Now if an element has `.animated` class, any change of `background-color` is animated during 3 seconds. +Якщо елемент має клас `.animated`, будь-яка зміна `background-color` анімується протягом 3 секунд. -Click the button below to animate the background: +Натисніть кнопку нижче, щоб анімувати фон: ```html run autorun height=60 - + ``` -There are many articles about `@keyframes` and a [detailed specification](https://drafts.csswg.org/css-animations/). +Є багато статей про `@keyframes` та [детальна специфікація](https://drafts.csswg.org/css-animations/). -You probably won't need `@keyframes` often, unless everything is in constant motion on your sites. +Ймовірно, `@keyframes` не знадобиться вам часто, хіба якщо на ваших сайтах все постійно рухається. -## Performance +## Продуктивність -Most CSS properties can be animated, because most of them are numeric values. For instance, `width`, `color`, `font-size` are all numbers. When you animate them, the browser gradually changes these numbers frame by frame, creating a smooth effect. +Більшість властивостей CSS можна анімувати, оскільки більшість із них є числовими значеннями. Наприклад, `width`, `color`, `font-size` всі є числами. Коли ви анімуєте їх, браузер поступово змінює ці числа кадр за кадром, створюючи плавний ефект. -However, not all animations will look as smooth as you'd like, because different CSS properties cost differently to change. +Однак не всі анімації виглядатимуть так гладко, як хотілося б, оскільки різні властивості змінюються по-різному. -In more technical details, when there's a style change, the browser goes through 3 steps to render the new look: +Якщо говорити більше про технічні деталі, коли відбувається зміна стилю, браузер виконує 3 кроки для відтворення нового вигляду: -1. **Layout**: re-compute the geometry and position of each element, then -2. **Paint**: re-compute how everything should look like at their places, including background, colors, -3. **Composite**: render the final results into pixels on screen, apply CSS transforms if they exist. +1. **Layout**: перерахувати геометрію, а потім положення кожного елемента +2. **Paint**: перерахувати, як все має виглядати на своїх місцях, включаючи фон, кольори, +3. **Composite**: відтворити кінцеві результати в пікселях на екрані, застосувати CSS-перетворення, якщо вони існують. -During a CSS animation, this process repeats every frame. However, CSS properties that never affect geometry or position, such as `color`, may skip the Layout step. If a `color` changes, the browser doesn't calculate any new geometry, it goes to Paint -> Composite. And there are few properties that directly go to Composite. You can find a longer list of CSS properties and which stages they trigger at . +Під час CSS-анімації цей процес повторюється для кожного кадра. Однак властивості CSS, які ніколи не впливають на геометрію або положення, наприклад, `color`, можуть пропускатись крок Layout. Якщо `color` змінюється, браузер не обчислює нову геометрію, він переходить до кроків Paint -> Composite. І є кілька властивостей, які безпосередньо переходять до Composite. Ви можете знайти довший список властивостей CSS та на яких етапах вони запускаються тут . -The calculations may take time, especially on pages with many elements and a complex layout. And the delays are actually visible on most devices, leading to "jittery", less fluid animations. +Обчислення може зайняти багато часу, особливо на сторінках із великою кількістю елементів і складною структурою. І затримки фактично помітні на більшості пристроїв, що призводить до "тремтіння", менш плавної анімації. -Animations of properties that skip the Layout step are faster. It's even better if Paint is skipped too. +Анімація властивостей, які пропускають Layout крок, працюють швидше. Навіть ліпше, ніж коли пропускається крок Paint. -The `transform` property is a great choice, because: -- CSS transforms affect the target element box as a whole (rotate, flip, stretch, shift it). -- CSS transforms never affect neighbour elements. +Властивість `transform` є чудовим вибором, оскільки: +- Перетворення CSS впливають на блок цільового елемента в цілому (повертають, перевертають, розтягують, зміщують його). +- CSS-перетворення ніколи не впливають на сусідні елементи. -...So browsers apply `transform` "on top" of existing Layout and Paint calculations, in the Composite stage. +...Тому браузери застосовують `transform` після наявних обчислень Layout та Paint на кроці Composite. -In other words, the browser calculates the Layout (sizes, positions), paints it with colors, backgrounds, etc at the Paint stage, and then applies `transform` to element boxes that need it. +Іншими словами, браузер обчислює макет (розміри, положення), розфарбовує його за допомогою colors, background тощо на етапі Paint, а потім застосовує `transform` до елементів, які цього потребують. -Changes (animations) of the `transform` property never trigger Layout and Paint steps. More than that, the browser leverages the graphics accelerator (a special chip on the CPU or graphics card) for CSS transforms, thus making them very efficient. +Зміни (анімації) властивості `transform` ніколи не запускають кроки Layout та Paint. Більше того, браузер використовує графічний прискорювач (спеціальний чіп на ЦП або відеокарті) для CSS-перетворень, що робить їх дуже ефективними. -Luckily, the `transform` property is very powerful. By using `transform` on an element, you could rotate and flip it, stretch and shrink it, move it around, and [much more](https://developer.mozilla.org/docs/Web/CSS/transform#syntax). So instead of `left/margin-left` properties we can use `transform: translateX(…)`, use `transform: scale` for increasing element size, etc. +На щастя, властивість `transform` дуже потужна. Використовуючи `transform` для елемента, ви можете обертати та крутити його, розтягувати та зменшувати, переміщувати та [багато іншого](https://developer.mozilla.org/docs/Web/CSS/transform#syntax ). Тому замість властивостей `left/margin-left` ми можемо використовувати `transform: translateX(…)`, `transform: scale` для збільшення розміру елемента, тощо. -The `opacity` property also never triggers Layout (also skips Paint in Mozilla Gecko). We can use it for show/hide or fade-in/fade-out effects. +Властивість `opacity` ніколи не запускає Layout (в Mozilla Gecko також пропускається Paint). Ми можемо використовувати його для ефектів відображення/приховування або посилення/згасання. -Paring `transform` with `opacity` can usually solve most of our needs, providing fluid, good-looking animations. +Поєднання `transform` з `opacity` зазвичай може вирішувати більшість наших потреб, забезпечуючи плавну, яскраву анімацію. -For example, here clicking on the `#boat` element adds the class with `transform: translateX(300)` and `opacity: 0`, thus making it move `300px` to the right and disappear: +Наприклад, тут клік на елемент `#boat` додає клас із `transform: translateX(300)` та `opacity: 0`, таким чином змушуючи його рухатись на `300px` праворуч і зникати: ```html run height=260 autorun no-beautify

@@ -462,10 +462,10 @@ For example, here clicking on the `#boat` element adds the class with `transform ``` -Here's a more complex example, with `@keyframes`: +Ось більш складний приклад із `@keyframes`: ```html run height=80 autorun no-beautify -

click me to start / stop

натисніть на мене, щоб почати/зупинити

``` -## Summary +## Підсумки -CSS animations allow smoothly (or step-by-step) animated changes of one or multiple CSS properties. +CSS-анімація дозволяє плавно (або покроково) анімувати зміну однієї або кількох властивостей CSS. -They are good for most animation tasks. We're also able to use JavaScript for animations, the next chapter is devoted to that. +Це підходить для більшості задач. Ми також можемо використовувати JavaScript для анімації, цьому присвячений наступний розділ. -Limitations of CSS animations compared to JavaScript animations: +Обмеження анімації CSS порівняно з JavaScript: ```compare plus="CSS animations" minus="JavaScript animations" -+ Simple things done simply. -+ Fast and lightweight for CPU. -- JavaScript animations are flexible. They can implement any animation logic, like an "explosion" of an element. -- Not just property changes. We can create new elements in JavaScript as part of the animation. ++ Прості речі робляться просто. ++ Швидка та легка для процесора. +- Анімації JavaScript є гнучкими. Вони можуть реалізувати будь-яку логіку анімації, навіть "вибух" елемента. +- Не тільки властивості змінюються. В JavaScript ми можемо створювати нові елементи як частину анімації. ``` -In early examples in this chapter, we animate `font-size`, `left`, `width`, `height`, etc. In real life projects, we should use `transform: scale()` and `transform: translate()` for better performance. +У перших прикладах цього розділу ми анімували `font-size`, `left`, `width`, `height` тощо. У реальних проектах ми повинні використовувати `transform: scale()` і `transform: translate()` для кращої продуктивності. -The majority of animations can be implemented using CSS as described in this chapter. And the `transitionend` event allows JavaScript to be run after the animation, so it integrates fine with the code. +Більшість анімацій можна реалізувати за допомогою CSS, як описано в цьому розділі. А подія `transitionend` дозволяє запускати JavaScript після анімації, тому вона добре інтегрується з кодом. -But in the next chapter we'll do some JavaScript animations to cover more complex cases. +Але в наступному розділі ми зробимо кілька анімацій JavaScript, щоб охопити більш складні випадки. diff --git a/7-animation/2-css-animations/boat.view/index.html b/7-animation/2-css-animations/boat.view/index.html index 60b704262..395114f51 100644 --- a/7-animation/2-css-animations/boat.view/index.html +++ b/7-animation/2-css-animations/boat.view/index.html @@ -13,7 +13,7 @@ diff --git a/7-animation/2-css-animations/digits.view/index.html b/7-animation/2-css-animations/digits.view/index.html index a156d8189..7ea2e3593 100644 --- a/7-animation/2-css-animations/digits.view/index.html +++ b/7-animation/2-css-animations/digits.view/index.html @@ -8,7 +8,7 @@ - Click below to animate: + Натисніть для анімації:

0123456789

diff --git a/7-animation/2-css-animations/step-end.view/index.html b/7-animation/2-css-animations/step-end.view/index.html index 2c8df7275..3d9796047 100644 --- a/7-animation/2-css-animations/step-end.view/index.html +++ b/7-animation/2-css-animations/step-end.view/index.html @@ -8,7 +8,7 @@ - Click below to animate: + Натисніть для анімації:

0123456789

diff --git a/7-animation/2-css-animations/step.view/index.html b/7-animation/2-css-animations/step.view/index.html index 2c8df7275..13506bf75 100644 --- a/7-animation/2-css-animations/step.view/index.html +++ b/7-animation/2-css-animations/step.view/index.html @@ -8,7 +8,7 @@ - Click below to animate: + Натисніть для анімації:

0123456789