{"id":228864,"date":"2022-11-04T11:06:00","date_gmt":"2022-11-04T08:06:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228864"},"modified":"2022-11-09T04:35:03","modified_gmt":"2022-11-09T01:35:03","slug":"skicka-saekra-ajax-foerfraagningar-i-wordpress-med-meddelanden","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/skicka-saekra-ajax-foerfraagningar-i-wordpress-med-meddelanden\/","title":{"rendered":"Skicka s\u00e4kra Ajax-f\u00f6rfr\u00e5gningar i WordPress (med meddelanden)"},"content":{"rendered":"\n<p>Jag vet att <a href=\"https:\/\/developer.wordpress.org\/rest-api\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">REST API<\/a> \u00e4r ett stort samtals\u00e4mne i WordPress just nu, och det med r\u00e4tta, men det finns fortfarande tillf\u00e4llen d\u00e5 vi m\u00e5ste anv\u00e4nda <a href=\"https:\/\/codex.wordpress.org\/AJAX_in_Plugins\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">admin-ajax<\/a> (som det kommer att bli k\u00e4nt) av en m\u00e4ngd olika anledningar.<\/p>\n<ul>\n<li>Kanske \u00e4r det en applikation,<\/li>\n<li>Kanske tiden inte till\u00e5ter att skapa de n\u00f6dv\u00e4ndiga slutpunkterna,<\/li>\n<li>Du kanske \u00e4r mer bekv\u00e4m med admin-ajax,<\/li>\n<li>Och s\u00e5 vidare.<\/li>\n<\/ul>\n<p>Oavsett dina sk\u00e4l till varf\u00f6r du anv\u00e4nder det (vilket jag fortfarande g\u00f6r, oavsett vad det \u00e4r f\u00f6r arbete), tror jag att det \u00e4r viktigt att se till att vi skickar s\u00e4kra Ajax-f\u00f6rfr\u00e5gningar i WordPress med hj\u00e4lp av nonces precis som du skulle g\u00f6ra om du skickade in traditionell formul\u00e4rdata .<\/p>\n<p>Legitima, live-shot av ledningar som b\u00e4r din Ajax-f\u00f6rfr\u00e5gan.<\/p>\n<p>Om du s\u00f6ker p\u00e5 webben efter resultat om hur du g\u00f6r det kommer du att hitta en m\u00e4ngd olika svar, och det h\u00e4r blir bara ytterligare en droppe i den \u00f6k\u00e4nda hinken.<\/p>\n<p>Men om du \u00e4r nyfiken p\u00e5 ett recept p\u00e5 hur jag ska hantera det s\u00e5 g\u00f6r jag s\u00e5 h\u00e4r varje g\u00e5ng.<\/p>\n<h2>S\u00e4kra Ajax-f\u00f6rfr\u00e5gningar i WordPress<\/h2>\n<p>Processen f\u00f6r att skicka s\u00e4kra Ajax-f\u00f6rfr\u00e5gningar f\u00f6r WordPress f\u00f6ljer denna upphandling:<\/p>\n<ol>\n<li>st\u00e4ll din JavaScript-fil i k\u00f6 och anv\u00e4nd <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>se till att ditt JavaScript skickar s\u00e4kerheten nonce,<\/li>\n<li>kontrollera s\u00e4kerhetsv\u00e4rdet i ditt \u00e5teruppringning och hantera det p\u00e5 r\u00e4tt s\u00e4tt.<\/li>\n<\/ol>\n<p>Med det sagt, h\u00e4r \u00e4r n\u00e5gra huvudpunkter f\u00f6r var och en av ovanst\u00e5ende som f\u00f6rhoppningsvis kommer att leda dig att skriva s\u00e4krare Ajax-baserad kod.<\/p>\n<h3>1 St\u00e4ll JavaScript i k\u00f6, lokalisera ditt skript<\/h3>\n<p>Jag vet att detta verkar vara ett konstigt f\u00f6rsta steg med tanke p\u00e5 att du borde skriva det innan du st\u00e4ller det i k\u00f6. Och det borde du f\u00f6rst\u00e5s. Men f\u00f6r det h\u00e4r inl\u00e4gget ville jag visa den n\u00f6dv\u00e4ndiga koden innan jag hoppade in i detaljerna.<\/p>\n<p>Det finns n\u00e5gra s\u00e4tt p\u00e5 vilka m\u00e4nniskor v\u00e4ljer att st\u00e4lla admin-ajax.php i k\u00f6, men <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a53a5c982b9e6826369e2f37914ad77b#file-00-wp-localize-script-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">det h\u00e4r \u00e4r den process<\/a> som jag f\u00f6ljer f\u00f6r b\u00e5de att k\u00f6a min fil och l\u00e4gga till 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>Observera i koden ovan att anropet till <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> ser ut precis som du f\u00f6rv\u00e4ntar dig.<\/p>\n<p>Men <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/wp_localize_script\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wp_localize_script<\/a> \u00e4r lite annorlunda. S\u00e5 h\u00e4r g\u00f6r den:<\/p>\n<ol>\n<li>Det f\u00f6ljer uppmaningen till enqueue script (och ordningen spelar roll),<\/li>\n<li>den anv\u00e4nder samma identifierare, n\u00e4mligen <strong>acme-security<\/strong> ,<\/li>\n<li>Den definierar ett objekt som vi kan anv\u00e4nda i v\u00e5r JavaScript-kod som heter <strong>acme_ajax_object<\/strong> och definierar tv\u00e5 egenskaper.<\/li>\n<li>Egenskapen <strong>ajax_url<\/strong> uppr\u00e4tth\u00e5ller s\u00f6kv\u00e4gen till admin-ajax.php.<\/li>\n<li>Security\u00a0 &#8211; egenskapen bibeh\u00e5ller ett v\u00e4rde som returneras <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/wp_create_nonce\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">av<\/a> <strong>wp_create_nonce<\/strong>.<a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/wp_create_nonce\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/li>\n<\/ol>\n<p>S\u00e5 hur utnyttjar vi allt detta inom ramen f\u00f6r v\u00e5rt JavaScript?<\/p>\n<h3>2 Anv\u00e4nda denna information i JavaScript<\/h3>\n<p>F\u00f6rst, n\u00e4r vi g\u00f6r ett Ajax-anrop m\u00e5ste vi se till att vi anv\u00e4nder\u00a0 egenskapen <strong>ajax_url<\/strong> f\u00f6r objektet vi definierade i koden ovan. Det vill s\u00e4ga att beg\u00e4rans URL ska skickas till <strong>acme_ajax_object.ajax_url<\/strong>.<\/p>\n<p>Du definierar sedan funktionen som du vill anropa. I det h\u00e4r fallet \u00e4r det <strong>get_custom_date<\/strong> som vi kommer att unders\u00f6ka om ett \u00f6gonblick.<\/p>\n<p>Men den viktigaste delen kommer sedan: Vi ser sedan till att skicka ett s\u00e4kerhetsv\u00e4rde som uppr\u00e4tth\u00e5lls av <strong>s\u00e4kerhetsegenskapen<\/strong> acme_ajax_object<strong>.<\/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>Observera att i svarsfunktionen kontrollerar vi att svaret har lyckats korrekt, hanterar det p\u00e5 r\u00e4tt s\u00e4tt och g\u00e5r sedan vidare med v\u00e5r kod.<\/p>\n<p>S\u00e5 hur ser serversidans kod ut f\u00f6r detta?<\/p>\n<h3>3 Verifiera s\u00e4kerheten<\/h3>\n<p>D\u00e4refter, i din \u00e5teruppringningsfunktion (som vi p\u00e5 r\u00e4tt s\u00e4tt har <strong>kallat get_custom_data<\/strong>, m\u00e5ste vi f\u00f6rst kontrollera s\u00e4kerhetsv\u00e4rdet innan vi g\u00f6r n\u00e5got annat.<\/p>\n<p>Om v\u00e4rdet g\u00e5r \u00f6ver \u00e4r vi bra att g\u00e5; annars m\u00e5ste vi skicka ett felmeddelande.<\/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>L\u00e4gg m\u00e4rke till att n\u00e4r vi anropar <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/check_ajax_referer\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">check_ajax_referer<\/a> anv\u00e4nder vi nyckeln till v\u00e4rdet definierat i wp_create_nonce och namnet p\u00e5 egenskapen f\u00f6r objektet vi definierade i det f\u00f6rsta steget.<\/p>\n<p>Om det inte checkar ut skickar vi ett JSON-fel som vi kan l\u00e4sa i JavaScript som vi s\u00e5g ovan. Detta b\u00f6r alltid vara det f\u00f6rsta steget innan du utf\u00f6r verkligt arbete.<\/p>\n<p>Om allt st\u00e4mmer \u00e4r vi redo.<\/p>\n<h2>\u00c4r detta verkligen s\u00e4kert?<\/h2>\n<p>Detta \u00e4r den oundvikliga fr\u00e5gan, eller hur? F\u00f6r att vara r\u00e4ttvis vill jag inte lova att detta \u00e4r helt idiots\u00e4kert eftersom jag inte \u00e4r en s\u00e4kerhetsexpert.<\/p>\n<p>Men att ha ett nonce-v\u00e4rde som kommer att utnyttja WordPresss inbyggda s\u00e4kerhetsfunktioner \u00e4r b\u00e4ttre \u00e4n att blint skicka data utan att kunna verifiera k\u00e4llan till det som skickas.<\/p>\n<p>Naturligtvis m\u00e5ste du ocks\u00e5 sanera informationen innan du f\u00f6rh\u00f6r den, anv\u00e4nder den, eventuellt sparar den och s\u00e5 vidare. Men det \u00e4r inneh\u00e5llet i ett annat inl\u00e4gg.<\/p>\n<p>Detta ger ist\u00e4llet ett recept f\u00f6r att se till att du skickar s\u00e4kra Ajax-f\u00f6rfr\u00e5gningar i WordPress.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>De tre stegen som beskrivs h\u00e4r ger ett recept f\u00f6r att se till att du skickar s\u00e4kra Ajax-f\u00f6rfr\u00e5gningar i 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":[901,724,868],"tags":[1173],"class_list":["post-228864","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-koda","category-utvecklaren","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=228864"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228864\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/166665"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=228864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=228864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=228864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}