{"id":281,"date":"2026-01-19T00:00:00","date_gmt":"2026-01-18T23:00:00","guid":{"rendered":"https:\/\/helloblog.io\/hu\/jquery-4-0-0-megerkezett-modernizalas-csp-trusted-types-toresek\/"},"modified":"2026-01-19T00:00:00","modified_gmt":"2026-01-18T23:00:00","slug":"jquery-4-0-0-megerkezett-modernizalas-csp-trusted-types-toresek","status":"publish","type":"post","link":"https:\/\/helloblog.io\/hu\/jquery-4-0-0-megerkezett-modernizalas-csp-trusted-types-toresek\/","title":{"rendered":"Meg\u00e9rkezett a jQuery 4.0.0: moderniz\u00e1l\u00e1s, CSP\/Trusted Types, \u00e9s n\u00e9h\u00e1ny r\u00e9g\u00f3ta esed\u00e9kes t\u00f6r\u00e9s"},"content":{"rendered":"\n

A jQuery 2006. janu\u00e1r 14-\u00e9n indult \u00fatj\u00e1ra, amikor John Resig a New York-i BarCamp-en bemutatta a k\u00f6nyvt\u00e1rat. H\u00fasz \u00e9vvel k\u00e9s\u0151bb pedig itt a jQuery 4.0.0 v\u00e9gleges kiad\u00e1sa. A jQuery csapat szerint hossz\u00fa fejleszt\u00e9si ciklus \u00e9s t\u00f6bb el\u0151zetes (pre-release) ut\u00e1n \u00e9rkezett meg ez a verzi\u00f3, ami rengeteg moderniz\u00e1l\u00e1st hoz, \u00e9s mivel nagyverzi\u00f3r\u00f3l van sz\u00f3, n\u00e9h\u00e1ny t\u00f6r\u00e9ssel (breaking change) is sz\u00e1molni kell.<\/p>\n\n\n\n

A j\u00f3 h\u00edr: a bejelent\u00e9s alapj\u00e1n a legt\u00f6bb projekt v\u00e1rhat\u00f3an minim\u00e1lis k\u00f3dm\u00f3dos\u00edt\u00e1ssal \u00e1t tud \u00e1llni. A rossz h\u00edr: van p\u00e1r olyan \u201em\u00e1gikus\u201d viselked\u00e9s \u00e9s \u00f6r\u00f6k\u00f6lt kompatibilit\u00e1si r\u00e9teg, amit v\u00e9gre kivettek, mert patch\/minor kiad\u00e1sban ezt nem lehetett volna megtenni.<\/p>\n\n\n\n

\n\n

Friss\u00edt\u00e9s el\u0151tt<\/h4>\n\n\n

\u00c1t\u00e1ll\u00e1shoz a csapat k\u00fcl\u00f6n upgrade guide-ot \u00e9s friss\u00edtett jQuery Migrate b\u0151v\u00edtm\u00e9nyt is ad: https:\/\/jquery.com\/upgrade-guide\/4.0\/ \u00e9s https:\/\/github.com\/jquery\/jquery-migrate\/.<\/p>\n\n<\/div>\n\n\n\n

Mi\u00e9rt nagy dolog a 4.0.0?<\/h2>\n\n\n\n

Ez az els\u0151 nagyverzi\u00f3 a jQuery-n\u00e9l k\u00f6zel 10 \u00e9v ut\u00e1n, ez\u00e9rt t\u00f6bb olyan r\u00e9g\u00f3ta halogatott takar\u00edt\u00e1s is beker\u00fclt, amit eddig csak deprecated st\u00e1tuszban tudtak \u201eparkoltatni\u201d. R\u00f6viden: kiker\u00fcltek a r\u00e9gi b\u00f6ng\u00e9sz\u0151kre c\u00e9lzott workaroundok, leker\u00fcltek elavult API-k, elt\u0171ntek dokument\u00e1latlan bels\u0151 param\u00e9terek, \u00e9s n\u00e9h\u00e1ny t\u00falkomplik\u00e1lt, \u201evar\u00e1zslatos\u201d m\u0171k\u00f6d\u00e9s is egyszer\u0171s\u00f6d\u00f6tt.<\/p>\n\n\n\n

B\u00f6ng\u00e9sz\u0151t\u00e1mogat\u00e1s: IE<11 kivezetve, IE11 m\u00e9g marad (egyel\u0151re)<\/h2>\n\n\n\n

A jQuery 4.0 megsz\u00fcnteti az IE 10 \u00e9s r\u00e9gebbi verzi\u00f3k t\u00e1mogat\u00e1s\u00e1t. Sokan ilyenkor r\u00f6gt\u00f6n azt k\u00e9rdezik: mi\u00e9rt nem dobt\u00e1k ki az IE 11-et is? A bejelent\u00e9s szerint a t\u00e1mogat\u00e1st szakaszosan vezetik ki, \u00e9s a k\u00f6vetkez\u0151 l\u00e9pcs\u0151 a tervek szerint jQuery 5.0-ban j\u00f6n: https:\/\/github.com\/jquery\/jquery\/pull\/5077.<\/p>\n\n\n\n

Most teh\u00e1t az a c\u00e9l, hogy els\u0151sorban az IE 11-n\u00e9l r\u00e9gebbi verzi\u00f3kat kiszolg\u00e1l\u00f3 k\u00f3d t\u0171nj\u00f6n el.<\/p>\n\n\n\n

Emellett t\u00f6bb nagyon r\u00e9gi b\u00f6ng\u00e9sz\u0151 t\u00e1mogat\u00e1sa is kiker\u00fclt: Edge Legacy (a Chromium el\u0151tti Edge), iOS az utols\u00f3 3 verzi\u00f3n\u00e1l r\u00e9gebbiek, Firefox az utols\u00f3 2 verzi\u00f3n\u00e1l r\u00e9gebbiek (a Firefox ESR kiv\u00e9tel\u00e9vel), valamint az Android Browser. A csapat szerint ez jellemz\u0151en nem ig\u00e9nyel fejleszt\u0151i oldalon v\u00e1ltoztat\u00e1st, de ha ezekre a b\u00f6ng\u00e9sz\u0151kre m\u00e9g l\u0151n\u00f6d kell, akkor maradj jQuery 3.x-en.<\/p>\n\n\n\n

CSP \u00e9s Trusted Types: biztons\u00e1gosabb HTML-manipul\u00e1ci\u00f3<\/h2>\n\n\n\n

A jQuery 4.0 egyik fontos moderniz\u00e1l\u00e1sa a Trusted Types t\u00e1mogat\u00e1s. A Trusted Types egy b\u00f6ng\u00e9sz\u0151s biztons\u00e1gi mechanizmus (k\u00fcl\u00f6n\u00f6sen CSP-s k\u00f6rnyezetben), amivel cs\u00f6kkenthet\u0151 bizonyos XSS kock\u00e1zatok es\u00e9lye. A jQuery 4.0 \u00fagy b\u0151v\u00fclt, hogy a TrustedHTML-be csomagolt HTML-t a DOM-manipul\u00e1ci\u00f3s met\u00f3dusok be tudj\u00e1k fogadni an\u00e9lk\u00fcl, hogy s\u00e9rten\u00e9k a require-trusted-types-for<\/code> Content Security Policy direkt\u00edv\u00e1t.<\/p>\n\n\n\n

A bejelent\u00e9s itt m\u00e9g egy gyakorlati v\u00e1ltoztat\u00e1st is kiemel: kor\u00e1bban egyes AJAX script k\u00e9r\u00e9sekn\u00e9l m\u00e1r <script><\/code> tagekkel dolgoztak az\u00e9rt, hogy megmaradjanak attrib\u00fatumok (p\u00e9ld\u00e1ul crossdomain<\/code>), most pedig a legt\u00f6bb aszinkron script k\u00e9r\u00e9s \u00e1t\u00e1llt <script><\/code> tag alap\u00fa bet\u00f6lt\u00e9sre. A c\u00e9l, hogy elker\u00fclhet\u0151k legyenek a CSP hib\u00e1k, amiket inline script haszn\u00e1lat okozhat.<\/p>\n\n\n\n

\n\n

Script k\u00e9r\u00e9sek \u00e9s headers<\/h4>\n\n\n

Van p\u00e1r kiv\u00e9tel, amikor tov\u00e1bbra is XHR-t haszn\u00e1lnak aszinkron script k\u00e9r\u00e9sekhez \u2013 p\u00e9ld\u00e1ul ha a "headers"<\/code> opci\u00f3t \u00e1tadod. A csapat kifejezetten jelzi: ilyen esetben ink\u00e1bb scriptAttrs<\/code> haszn\u00e1lata javasolt.<\/p>\n\n<\/div>\n\n\n\n

A jQuery forr\u00e1sk\u00f3dja ES module-okba k\u00f6lt\u00f6z\u00f6tt (AMD helyett)<\/h2>\n\n\n\n

Nagy bels\u0151 v\u00e1lt\u00e1s, hogy a main<\/code> \u00e1gon a jQuery forr\u00e1sk\u00f3dja AMD-r\u0151l (RequireJS-es vil\u00e1g) ES module-okra \u00e1llt \u00e1t. A jQuery forr\u00e1s eddig is el\u00e9rhet\u0151 volt npm-en \u00e9s GitHub-on, de modul\u00e1risan import\u00e1lni k\u00f6zvetlen\u00fcl nem igaz\u00e1n tudtad RequireJS n\u00e9lk\u00fcl, mert ez volt a prefer\u00e1lt build eszk\u00f6z.<\/p>\n\n\n\n

A csapat az\u00f3ta Rollup-ra v\u00e1ltott a csomagol\u00e1shoz, \u00e9s k\u00fcl\u00f6n futtatj\u00e1k a teszteket az ES module-os v\u00e1ltozatra is. Ez a v\u00e1lt\u00e1s l\u00e9nyeg\u00e9ben kompatibilisebb\u00e9 teszi a jQuery-t a modern build toolinggal \u00e9s fejleszt\u00e9si workflowkkal, illetve a b\u00f6ng\u00e9sz\u0151ben is k\u00e9zenfekv\u0151bb a haszn\u00e1lat <script type=module> <\/code> mellett.<\/p>\n\n\n\n

Kiker\u00fcltek a r\u00e9g\u00f3ta deprecated API-k<\/h2>\n\n\n\n

A 4.0.0-ban v\u00e9gleg elt\u0171nt egy csom\u00f3 olyan f\u00fcggv\u00e9ny, ami t\u00f6bb verzi\u00f3 \u00f3ta deprecated volt. Ezek egy r\u00e9sze eredetileg is bels\u0151 haszn\u00e1latra k\u00e9sz\u00fclt, m\u00e1s r\u00e9sze pedig m\u00e1ra minden t\u00e1mogatott b\u00f6ng\u00e9sz\u0151ben rendelkezik nat\u00edv megfelel\u0151vel.<\/p>\n\n\n\n

A kiad\u00e1si jegyzet alapj\u00e1n a k\u00f6vetkez\u0151k ker\u00fcltek ki:<\/p>\n\n\n\n

    \n\n
  • jQuery.isArray<\/code><\/li>\n\n\n
  • jQuery.parseJSON<\/code><\/li>\n\n\n
  • jQuery.trim<\/code><\/li>\n\n\n
  • jQuery.type<\/code><\/li>\n\n\n
  • jQuery.now<\/code><\/li>\n\n\n
  • jQuery.isNumeric<\/code><\/li>\n\n\n
  • jQuery.isFunction<\/code><\/li>\n\n\n
  • jQuery.isWindow<\/code><\/li>\n\n\n
  • jQuery.camelCase<\/code><\/li>\n\n\n
  • jQuery.nodeName<\/code><\/li>\n\n\n
  • jQuery.cssNumber<\/code><\/li>\n\n\n
  • jQuery.cssProps<\/code><\/li>\n\n\n
  • jQuery.fx.interval<\/code><\/li>\n\n<\/ul>\n\n\n\n

    A javaslat egy\u00e9rtelm\u0171: ahol lehet, v\u00e1lts nat\u00edvra, p\u00e9ld\u00e1ul Array.isArray()<\/code>, JSON.parse()<\/code>, String.prototype.trim()<\/code>, Date.now()<\/code>.<\/p>\n\n\n\n

    \u00c9rdekess\u00e9g, hogy a deprecated API-k kiszed\u00e9se \u00e9s a r\u00e9gi IE-t t\u00e1mogat\u00f3 k\u00f3d kigyoml\u00e1l\u00e1sa egy\u00fctt t\u00f6bb mint 3 kB (gzip) m\u00e9retcs\u00f6kken\u00e9st hozott.<\/p>\n\n\n\n

    Bels\u0151 Array met\u00f3dusok t\u00f6rl\u00e9se a jQuery prototype-r\u00f3l: push\/sort\/splice<\/h2>\n\n\n\n

    A jQuery prototype eddig tartalmazott p\u00e1r Array met\u00f3dust (push<\/code>, sort<\/code>, splice<\/code>), amik nem viselkedtek \u00fagy, mint a jQuery-s l\u00e1ncolhat\u00f3 met\u00f3dusok, \u00e9s val\u00f3j\u00e1ban bels\u0151 haszn\u00e1latra sz\u00e1nt\u00e1k \u0151ket. Ezek most kiker\u00fcltek.<\/p>\n\n\n\n

    Ha valahol m\u00e9gis haszn\u00e1ltad \u0151ket, a bejelent\u00e9s konkr\u00e9t cser\u00e9t is ad: $elems.push( elem )<\/code> helyett [].push.call( $elems, elem )<\/code>.<\/p>\n\n\n\n

    <\/circle><\/circle><\/circle><\/g><\/svg><\/span>