{"id":228878,"date":"2022-11-04T10:37:00","date_gmt":"2022-11-04T07:37:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228878"},"modified":"2022-11-09T04:38:07","modified_gmt":"2022-11-09T01:38:07","slug":"wysylanie-bezpiecznych-zadan-ajax-w-wordpress-z-nonces","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/wysylanie-bezpiecznych-zadan-ajax-w-wordpress-z-nonces\/","title":{"rendered":"Wysy\u0142anie bezpiecznych \u017c\u0105da\u0144 Ajax w WordPress (z Nonces)"},"content":{"rendered":"\n<p>Wiem, \u017ce <a href=\"https:\/\/developer.wordpress.org\/rest-api\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">REST API<\/a> jest obecnie ogromnym tematem rozm\u00f3w w WordPressie i s\u0142usznie, ale wci\u0105\u017c zdarzaj\u0105 si\u0119 sytuacje, w kt\u00f3rych musimy u\u017cywa\u0107 <a href=\"https:\/\/codex.wordpress.org\/AJAX_in_Plugins\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">admin-ajax<\/a> (jak to si\u0119 zaczyna nazywa\u0107) z r\u00f3\u017cnych powod\u00f3w.<\/p>\n<ul>\n<li>By\u0107 mo\u017ce jest to aplikacja,<\/li>\n<li>By\u0107 mo\u017ce czas nie pozwala na stworzenie niezb\u0119dnych punkt\u00f3w ko\u0144cowych,<\/li>\n<li>By\u0107 mo\u017ce czujesz si\u0119 bardziej komfortowo z admin-ajax,<\/li>\n<li>I tak dalej.<\/li>\n<\/ul>\n<p>Niezale\u017cnie od powod\u00f3w, dla kt\u00f3rych go u\u017cywasz (co nadal robi\u0119, bez wzgl\u0119du na to, co dzia\u0142a), uwa\u017cam, \u017ce wa\u017cne jest, aby upewni\u0107 si\u0119, \u017ce wysy\u0142amy bezpieczne \u017c\u0105dania Ajax w WordPress za pomoc\u0105 nonces, tak jak by\u015b przesy\u0142a\u0142 dane z tradycyjnego formularza .<\/p>\n<p>Prawid\u0142owe uj\u0119cie na \u017cywo przewod\u00f3w zawieraj\u0105cych Twoje \u017c\u0105danie Ajax.<\/p>\n<p>Je\u015bli poszukasz w sieci wynik\u00f3w, jak to zrobi\u0107, znajdziesz r\u00f3\u017cne odpowiedzi, a to b\u0119dzie tylko kolejna kropla w przys\u0142owiowym wiadrze.<\/p>\n<p>Ale je\u015bli jeste\u015b ciekaw przepisu na to, jak sobie z tym poradzi\u0107, za ka\u017cdym razem tak to robi\u0119.<\/p>\n<h2>Bezpieczne \u017c\u0105dania Ajax w WordPress<\/h2>\n<p>Proces wysy\u0142ania bezpiecznych \u017c\u0105da\u0144 Ajax dla WordPressa przebiega zgodnie z nast\u0119puj\u0105c\u0105 procedur\u0105:<\/p>\n<ol>\n<li>umie\u015b\u0107 plik JavaScript w kolejce i u\u017cyj <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/wp_localize_script\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wp_localize_script<\/a> ,<\/li>\n<li>upewnij si\u0119, \u017ce Tw\u00f3j JavaScript wysy\u0142a zabezpieczenie nonce,<\/li>\n<li>sprawd\u017a warto\u015b\u0107 bezpiecze\u0144stwa w swoim oddzwonieniu i odpowiednio j\u0105 obs\u0142uguj.<\/li>\n<\/ol>\n<p>Maj\u0105c to na uwadze, oto kilka element\u00f3w ka\u017cdego z powy\u017cszych, kt\u00f3re, miejmy nadziej\u0119, doprowadz\u0105 Ci\u0119 do napisania bezpieczniejszego kodu opartego na Ajax.<\/p>\n<h3>1 Umie\u015b\u0107 JavaScript w kolejce, zlokalizuj sw\u00f3j skrypt<\/h3>\n<p>Wiem, \u017ce wydaje si\u0119 to dziwnym pierwszym krokiem, bior\u0105c pod uwag\u0119, \u017ce powiniene\u015b to napisa\u0107 przed umieszczeniem go w kolejce. I oczywi\u015bcie powiniene\u015b. Ale w tym po\u015bcie chcia\u0142em pokaza\u0107 niezb\u0119dny kod przed przej\u015bciem do szczeg\u00f3\u0142\u00f3w.<\/p>\n<p>Istnieje kilka sposob\u00f3w, w jakie ludzie decyduj\u0105 si\u0119 na umieszczanie w kolejce admin-ajax.php, ale <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a53a5c982b9e6826369e2f37914ad77b#file-00-wp-localize-script-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">jest to proces<\/a>, kt\u00f3ry stosuj\u0119 zar\u00f3wno w przypadku umieszczania mojego pliku w kolejce, jak i dodawania admin-ajax.php:<\/p>\n<pre><code>&lt;?php\n\nwp_enqueue_script(\n  'acme-security',\n  $this-&gt;plugin_url. 'assets\/js\/plugin.js',\n  [ 'jquery' ],\n  false,\n  true\n);\n\nwp_localize_script(\n  'acme-security',\n  'acme_ajax_object',\n  [\n    'ajax_url'  =&gt; admin_url( 'admin-ajax.php' ),\n    'security'  =&gt; wp_create_nonce( 'acme-security-nonce' ),\n  ]\n);<\/code><\/pre>\n<p>Zauwa\u017c, \u017ce w powy\u017cszym kodzie wywo\u0142anie <a href=\"https:\/\/www.google.com\/url?sa=t&#038;rct=j&#038;q=&#038;esrc=s&#038;source=web&#038;cd=1&#038;ved=0ahUKEwjA9NijppDUAhVIWSYKHTzDAVYQFggnMAA&#038;url=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Ffunctions%2Fwp_enqueue_script%2F&#038;usg=AFQjCNEAqOC2ehwxSG7UntToWhDVHXLVUA&#038;sig2=7VfQ0cL4-Pt1e8oV0mDKRg&#038;cad=rjt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wp_enqueue_script<\/a> wygl\u0105da dok\u0142adnie tak, jak mo\u017cna by si\u0119 tego spodziewa\u0107.<\/p>\n<p>Ale <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/wp_localize_script\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wp_localize_script<\/a> jest troch\u0119 inny. Oto, co robi:<\/p>\n<ol>\n<li>Wynika z wezwania do umieszczenia skryptu w kolejce (a kolejno\u015b\u0107 ma znaczenie),<\/li>\n<li>u\u017cywa tego samego identyfikatora, czyli <strong>acme-security<\/strong> ,<\/li>\n<li>Definiuje obiekt, kt\u00f3rego mo\u017cemy u\u017cy\u0107 w naszym kodzie JavaScript o nazwie <strong>acme_ajax_object<\/strong> i definiuje dwie w\u0142a\u015bciwo\u015bci.<\/li>\n<li>W\u0142a\u015bciwo\u015b\u0107 <strong>ajax_url<\/strong> utrzymuje \u015bcie\u017ck\u0119 do admin-ajax.php.<\/li>\n<li>W\u0142a\u015bciwo\u015b\u0107 <strong>security<\/strong> utrzymuje warto\u015b\u0107 zwr\u00f3con\u0105 przez <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/wp_create_nonce\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wp_create_nonce<\/a>.<\/li>\n<\/ol>\n<p>Jak wi\u0119c wykorzysta\u0107 to wszystko w kontek\u015bcie naszego JavaScript?<\/p>\n<h3>2 U\u017cywanie tych informacji w JavaScript<\/h3>\n<p>Po pierwsze, wykonuj\u0105c wywo\u0142anie Ajax, musimy upewni\u0107 si\u0119, \u017ce u\u017cywamy\u00a0 w\u0142a\u015bciwo\u015bci <strong>ajax_url<\/strong> obiektu, kt\u00f3ry zdefiniowali\u015bmy w powy\u017cszym kodzie. Oznacza to, \u017ce adres URL \u017c\u0105dania powinien zosta\u0107 wys\u0142any do <strong>acme_ajax_object.ajax_url<\/strong>.<\/p>\n<p>Nast\u0119pnie definiujesz funkcj\u0119, kt\u00f3r\u0105 chcesz wywo\u0142a\u0107. W tym przypadku jest to <strong>get_custom_date<\/strong>, kt\u00f3rym zajmiemy si\u0119 za chwil\u0119.<\/p>\n<p>Ale najwa\u017cniejsza cz\u0119\u015b\u0107 jest nast\u0119pna: Nast\u0119pnie upewniamy si\u0119, \u017ce wysy\u0142amy warto\u015b\u0107 bezpiecze\u0144stwa, kt\u00f3ra jest utrzymywana przez w\u0142a\u015bciwo\u015b\u0107 <strong>bezpiecze\u0144stwa<\/strong> <strong>acme_ajax_object<\/strong>.<\/p>\n<pre><code>$.get( acme_ajax_object.ajax_url, {\n\n    action:   'get_custom_data',\n    security: acme_ajax_object.security\n\n}, function( response) {\n\n  if (undefined !== response.success &amp;&amp; false === response.success) {\n    return;\n  }\n\n  \/\/ Parse your response here.\n\n});<\/code><\/pre>\n<p>Zauwa\u017c, \u017ce w funkcji odpowiedzi sprawdzamy, czy odpowied\u017a zako\u0144czy\u0142a si\u0119 powodzeniem, odpowiednio j\u0105 obs\u0142ugujemy, a nast\u0119pnie idziemy dalej z naszym kodem.<\/p>\n<p>Jak wi\u0119c wygl\u0105da kod po stronie serwera?<\/p>\n<h3>3 Weryfikacja bezpiecze\u0144stwa<\/h3>\n<p>Nast\u0119pnie w funkcji zwrotnej (kt\u00f3r\u0105 odpowiednio nazwali\u015bmy <strong>get_custom_data<\/strong>, musimy najpierw sprawdzi\u0107 warto\u015b\u0107 bezpiecze\u0144stwa, zanim zrobimy cokolwiek innego.<\/p>\n<p>Je\u015bli warto\u015b\u0107 przejdzie, mo\u017cemy i\u015b\u0107; w przeciwnym razie musimy wys\u0142a\u0107 b\u0142\u0105d.<\/p>\n<pre><code>&lt;?php\n\npublic function get_custom_data() {\n\n  if (! check_ajax_referer( 'acme-security-nonce', 'security', false)) {\n\n    wp_send_json_error( 'Invalid security token sent.' );\n    wp_die();\n  }\n\n  \/\/ The rest of the function that does actual work.\n\n}<\/code><\/pre>\n<p>Zauwa\u017c, \u017ce kiedy wywo\u0142ujemy <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/check_ajax_referer\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">check_ajax_referer<\/a>, u\u017cywamy klucza warto\u015bci zdefiniowanej w wp_create_nonce i nazwy w\u0142a\u015bciwo\u015bci obiektu, kt\u00f3ry zdefiniowali\u015bmy w pierwszym kroku.<\/p>\n<p>Je\u015bli si\u0119 nie wymelduje, wysy\u0142amy b\u0142\u0105d JSON, kt\u00f3ry mo\u017cemy odczyta\u0107 w JavaScript, jak widzieli\u015bmy powy\u017cej. To zawsze powinien by\u0107 pierwszy krok przed wykonaniem w\u0142a\u015bciwej pracy.<\/p>\n<p>Je\u015bli wszystko si\u0119 sprawdzi, mo\u017cemy i\u015b\u0107.<\/p>\n<h2>Czy to naprawd\u0119 bezpieczne?<\/h2>\n<p>To jest nieuniknione pytanie, prawda? Szczerze m\u00f3wi\u0105c, nie chc\u0119 obieca\u0107, \u017ce jest to ca\u0142kowicie niezawodne, poniewa\u017c nie jestem ekspertem od bezpiecze\u0144stwa.<\/p>\n<p>Ale posiadanie warto\u015bci jednorazowej, kt\u00f3ra wykorzysta wbudowane funkcje bezpiecze\u0144stwa WordPressa, jest lepsze ni\u017c wysy\u0142anie danych na \u015blepo bez mo\u017cliwo\u015bci zweryfikowania \u017ar\u00f3d\u0142a tego, co jest wysy\u0142ane.<\/p>\n<p>Oczywi\u015bcie musisz r\u00f3wnie\u017c oczy\u015bci\u0107 dane przed ich przes\u0142uchaniem, u\u017cyciem ich, potencjalnie ich zapisaniem i tak dalej. Ale to jest tre\u015b\u0107 innego posta.<\/p>\n<p>To zamiast tego zapewnia przepis na upewnienie si\u0119, \u017ce wysy\u0142asz bezpieczne \u017c\u0105dania Ajax w WordPress.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Opisane tutaj trzy kroki stanowi\u0105 przepis na upewnienie si\u0119, \u017ce wysy\u0142asz bezpieczne \u017c\u0105dania Ajax w WordPress.<\/p>\n","protected":false},"author":1,"featured_media":166665,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[721,897,866],"tags":[1169,1169],"class_list":["post-228878","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-kod","category-wordpress-7","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228878","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=228878"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228878\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/166665"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=228878"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=228878"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=228878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}