{"id":228733,"date":"2022-10-31T19:53:00","date_gmt":"2022-10-31T16:53:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228733"},"modified":"2022-11-09T04:04:19","modified_gmt":"2022-11-09T01:04:19","slug":"vad-innebaer-det-att-anvaenda-wordpress-som-proxy","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/vad-innebaer-det-att-anvaenda-wordpress-som-proxy\/","title":{"rendered":"Vad inneb\u00e4r det att anv\u00e4nda WordPress som proxy?"},"content":{"rendered":"\n<p>Om du har arbetat med WordPress hur l\u00e4nge som helst, s\u00e4rskilt n\u00e4r det g\u00e4ller att anv\u00e4nda n\u00e5gon typ av Ajax-funktionalitet, har du f\u00f6rmodligen h\u00f6rt frasen &quot;anv\u00e4nd WordPress som proxy&quot; n\u00e5gon g\u00e5ng.<\/p>\n<p>Och \u00e4ven om du inte har chansen att du faktiskt har gjort det \u00e4r det ganska h\u00f6ga.<\/p>\n<p>\u00c4ven om jag tror att n\u00e4r tiden g\u00e5r fram\u00e5t kommer vi s\u00e5 sm\u00e5ningom att se REST API ers\u00e4tta de traditionella s\u00e4tten som vi har anv\u00e4nt Ajax, men det \u00e4r f\u00f6rmodligen en annan historia f\u00f6r en annan g\u00e5ng.<\/p>\n<p>S\u00e5 vad betyder det att anv\u00e4nda WordPress som proxy n\u00e4r du arbetar med Ajax-f\u00f6rfr\u00e5gningar? Det kr\u00e4ver lite f\u00f6rst\u00e5else f\u00f6r f\u00f6rfr\u00e5gningar mellan webbplatser, hur dirigering av en f\u00f6rfr\u00e5gan via WordPress fungerar och sedan analysera svaret.<\/p>\n<h2>Anv\u00e4nd WordPress som proxy<\/h2>\n<p>Det \u00e4r ett lite l\u00e5ngt inl\u00e4gg, eller hur? Ist\u00e4llet ska jag f\u00f6rs\u00f6ka bryta ner det i kortare termer s\u00e5 att du kan l\u00e4sa det och sedan b\u00f6rja jobba igen.<\/p>\n<h3>Som ombud<\/h3>\n<p>Ta f\u00f6rst <a href=\"https:\/\/www.google.com\/search?q=define%3A+proxy&#038;oq=define%3A+proxy&#038;aqs=chrome..69i57j69i58.1706j0j7&#038;sourceid=chrome&#038;ie=UTF-8\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">definitionen av en proxy<\/a> :<\/p>\n<blockquote>\n<p>befogenhet att f\u00f6retr\u00e4da n\u00e5gon annan, s\u00e4rskilt vid r\u00f6stning<\/p>\n<\/blockquote>\n<p>Om du klickar p\u00e5 l\u00e4nken ovan kommer du att m\u00e4rka att det finns n\u00e5gra andra definitioner men ingen av dem r\u00e4cker egentligen. Ist\u00e4llet tycker jag om att t\u00e4nka p\u00e5 dem lite mer abstrakt, \u00e5tminstone n\u00e4r det g\u00e4ller mjukvara.<\/p>\n<p>F\u00f6r detta inl\u00e4ggs syften, l\u00e5t oss s\u00e4ga att WordPress \u00e4r en proxy f\u00f6r en f\u00f6rfr\u00e5gan, vilket betyder att den \u00e4r ansvarig f\u00f6r att fungera som en mellanhand mellan b\u00f6rjan av f\u00f6rfr\u00e5gan och svaret p\u00e5 den.<\/p>\n<p>Kortfattat,<\/p>\n<blockquote>\n<p>WordPress fungerar som en proxy genom att dirigera en f\u00f6rfr\u00e5gan till en annan tj\u00e4nst och f\u00e5nga dess svar.<\/p>\n<\/blockquote>\n<p>Kanske har du h\u00f6rt n\u00e5got liknande, kanske inte. Oavsett s\u00e5 kan det se ut s\u00e5 h\u00e4r p\u00e5 h\u00f6g niv\u00e5:<\/p>\n<p>Nu, n\u00e4r du beh\u00f6ver g\u00f6ra en asynkron f\u00f6rfr\u00e5gan (eller en Ajax-f\u00f6rfr\u00e5gan som jag kommer att anv\u00e4nda genom resten av det h\u00e4r inl\u00e4gget), s\u00e5 har du ett av tv\u00e5 alternativ:<\/p>\n<ol>\n<li>skicka beg\u00e4ran till en sida som finns i WordPress,<\/li>\n<li>skicka beg\u00e4ran till en sida som finns p\u00e5 den andra dom\u00e4nen.<\/li>\n<\/ol>\n<p>Om du g\u00f6r f\u00f6rfr\u00e5gningar till sidor som finns i din app (l\u00e4s: inom WordPress) har du inga problem.<\/p>\n<h3>Om s\u00e4kerheten f\u00f6r f\u00f6rfr\u00e5gningar<\/h3>\n<p>Men att g\u00f6ra Ajax-f\u00f6rfr\u00e5gningar utanf\u00f6r din egen dom\u00e4n \u00e4r en no-go. Detta beror p\u00e5 att det \u00e4r t\u00e4nkt att skydda <a href=\"https:\/\/www.owasp.org\/index.php\/Cross-site_Scripting_(XSS)\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">XSS<\/a> och <a href=\"https:\/\/www.owasp.org\/index.php\/Cross-Site_Request_Forgery_(CSRF)\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">CSRF<\/a>.<\/p>\n<p>I korthet h\u00e4nvisar var och en av dessa till f\u00f6ljande:<\/p>\n<blockquote>\n<p>XSS-attacker uppst\u00e5r n\u00e4r en angripare anv\u00e4nder en webbapplikation f\u00f6r att skicka skadlig kod, vanligtvis i form av ett webbl\u00e4sarskript, till en annan slutanv\u00e4ndare<\/p>\n<\/blockquote>\n<p>och:<\/p>\n<blockquote>\n<p>Cross-Site Request Forgery (CSRF) \u00e4r en attack som tvingar en slutanv\u00e4ndare att utf\u00f6ra o\u00f6nskade \u00e5tg\u00e4rder p\u00e5 en webbapplikation d\u00e4r de f\u00f6r n\u00e4rvarande \u00e4r autentiserade.<\/p>\n<\/blockquote>\n<p>Det \u00e4r kort sagt d\u00e4rf\u00f6r vi beh\u00f6ver anv\u00e4nda WordPress som proxy. Men naturligtvis v\u00e4cker detta fr\u00e5gan om hur?<\/p>\n<h3>Anv\u00e4nda WordPress som proxy<\/h3>\n<p>F\u00f6r att g\u00f6ra detta beh\u00f6ver du flera saker:<\/p>\n<ol>\n<li>\u00a0en sida som din Ajax-f\u00f6rfr\u00e5gan kan fr\u00e5ga,<\/li>\n<li>en funktion f\u00f6r att f\u00e5nga ajax-f\u00f6rfr\u00e5gan och skicka den till r\u00e4tt URL,<\/li>\n<li>ett s\u00e4tt f\u00f6r serversidan att analysera svaret,<\/li>\n<li>en funktion f\u00f6r att \u00e5terst\u00e4lla data till den ursprungliga Ajax-funktionen.<\/li>\n<\/ol>\n<p>\u00c5terigen, f\u00f6r utrymmets skull kommer jag inte att ge ett djupg\u00e5ende exempel p\u00e5 detta men det borde r\u00e4cka f\u00f6r att du ska komma ig\u00e5ng.<\/p>\n<p>F\u00f6rst m\u00e5ste du se till att du har en funktion inst\u00e4lld f\u00f6r att f\u00e5nga din Ajax-f\u00f6rfr\u00e5gan. Det finns redan massor av dokumentation kring detta i Codex. <a href=\"https:\/\/gist.github.com\/tommcfarlin\/833c1d1819b8863697aea00a716b2116#file-01_get_columns-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Ett enkelt exempel<\/a> p\u00e5 detta skulle se ut s\u00e5 h\u00e4r:<\/p>\n<pre><code>var _get_columns = function() {\n\n    \/\/ Don't forget to use a nonce or security value here.\n    var data = {\n        'action':   'get_all_columns'\n            'security': '&lt;?php echo wp_create_nonce( \"acme-security-ajax-nonce\" ); ?&gt;'\n    };\n\n    \/\/ TODO Check for error logging if the response value doesn't exist.\n    $.get( ajaxurl, data, function( response) {\n\n        response = $.parseJSON( response );\n        \/\/ Your custom functionality here\n    });\n};\n<\/code><\/pre>\n<p>D\u00e4refter beh\u00f6ver du en sida p\u00e5 servern f\u00f6r att g\u00f6ra en f\u00f6rfr\u00e5gan till URL:en som har dina data. Detta kan g\u00f6ras med <a href=\"https:\/\/curl.haxx.se\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">cURL<\/a>, detta kan g\u00f6ras med <a href=\"https:\/\/php.net\/manual\/en\/function.file-get-contents.php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">file_get_contents<\/a>, och detta kan g\u00f6ras p\u00e5 andra s\u00e4tt.<\/p>\n<p>Eftersom jag inte vet eller vill ge ett f\u00f6reskrivande exempel, kommer jag att dela en mycket enkel demonstration av hur detta kan fungera (<a href=\"https:\/\/gist.github.com\/tommcfarlin\/833c1d1819b8863697aea00a716b2116#file-02-wp_ajax_get_all_data-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u00e5tminstone i de tidiga stadierna<\/a> ):<\/p>\n<pre><code>&lt;?php\n\nadd_action( 'wp_ajax_get_all_data', 'get_all_data' );\n\/**\n * Retrieves the requested data from the specified URL \n * returns the values in JSON.\n *\/\nfunction get_all_data() {\n\n  \/\/ Note $url is up to you.\n  $curl = curl_init( $url );\n\n  curl_setopt( $curl, CURLOPT_RETURNTRANSFER, 1 );                         \n  curl_setopt( $curl, CURLOPT_HTTPAUTH, CURLAUTH_ANY );                    \n  curl_setopt( $curl, CURLOPT_SSL_VERIFYPEER, false );                          \n  curl_setopt( $curl, CURLOPT_FOLLOWLOCATION, true );                           \n\n  $response     = curl_exec( $curl );                                          \n  $resultStatus = curl_getinfo( $curl );                                   \n\n  if( 200 !== $resultStatus['http_code']) {\n    echo 'Call Failed '.print_r( $result_status );                         \n  }\n  curl_close( $curl );\n\n  echo json_encode( utf8_encode( $response) ); \n  wp_die();\n}\n<\/code><\/pre>\n<p>N\u00e4r du f\u00e5r ett svar kan du v\u00e4lja att analysera det p\u00e5 serversidan (vilket jag rekommenderar) och returnera det med ett l\u00e4tt format till den ursprungliga JavaScript-funktionen som ses ovan. L\u00e4gg m\u00e4rke till att jag anv\u00e4nder <a href=\"https:\/\/php.net\/manual\/en\/function.json-encode.php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">json_encode<\/a> i koden ovan.<\/p>\n<p>D\u00e4rifr\u00e5n kan du sedan g\u00f6ra vad du \u00e4n beh\u00f6ver g\u00f6ra med den aktuella sidan med den data du har. Observera att informationen finns i svarsobjektet och du kan beh\u00f6va inspektera vad den inneh\u00e5ller f\u00f6r att kunna hantera den korrekt. Detta uppn\u00e5s och visas i koden ovan.<\/p>\n<p>Men detaljerna i detta kommer att bero mycket p\u00e5 vad du vill uppn\u00e5.<\/p>\n<h2>WordPress som proxy<\/h2>\n<p>I slut\u00e4ndan ser kontrollfl\u00f6det ut ungef\u00e4r s\u00e5 h\u00e4r:<\/p>\n<p>Po\u00e4ngen med allt ovan \u00e4r att hj\u00e4lpa till att ge lite bakgrund till varf\u00f6r du kan se en del av koden du g\u00f6r samt varf\u00f6r du beh\u00f6ver strukturera din kod s\u00e5 h\u00e4r.<\/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>S\u00e5 vad betyder det att anv\u00e4nda WordPress som proxy n\u00e4r du arbetar med Ajax-f\u00f6rfr\u00e5gningar? Kolla in dessa exempel.<\/p>\n","protected":false},"author":1,"featured_media":223885,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[848,901,922,724,868],"tags":[1173],"class_list":["post-228733","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-handledningar","category-koda","category-oevrig","category-utvecklaren","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228733","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=228733"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228733\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/223885"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=228733"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=228733"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=228733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}