手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜Qcloud , 注册 | 登陆

Editor.md 上传图片的注意事项

首页 > PHP >

 一般情况下,editor.md的上传图片功能已经够用了,提供了两种方式:本地上传和跨域上传,方式也很简单,跨域上传的话,则需要加callbackUrl的地址。参考:http://www.ipandao.com/editor.md/examples/image-upload.html 和 http://www.ipandao.com/editor.md/examples/image-cross-domain-upload.html。

不过我的问题和上面的不一样,因为我使用了PHP开发框架,那么在正常开发的过程中,表单提交都有csrf的验证。editor.md却没有这个功能,在官方的issue里有人提出了,可以通过设置uploadUrl来加入get参数。

嗯,理论上这样也OK。然而我使用的是YII2,在实际使用中,这个办法无效,原因是:

PHP代码
  1. public function validateCsrfToken($token = null)  
  2. {  
  3.     $method = $this->getMethod();  
  4.     // only validate CSRF token on non-"safe" methods http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.1.1  
  5.     if (!$this->enableCsrfValidation || in_array($method, ['GET''HEAD''OPTIONS'], true)) {  
  6.         return true;  
  7.     }  
  8.   
  9.     $trueToken = $this->loadCsrfToken();  
  10.   
  11.     if ($token !== null) {  
  12.         return $this->validateCsrfTokenInternal($token$trueToken);  
  13.     } else {  
  14.         return $this->validateCsrfTokenInternal($this->getBodyParam($this->csrfParam), $trueToken)  
  15.             || $this->validateCsrfTokenInternal($this->getCsrfTokenFromHeader(), $trueToken);  
  16.     }  
  17. }  

看最后两个判断,只判断了POST和HEADER中有Csrf的情况,没有判断GET参数里的情况,如果你的项目已经趋向于稳定,不再随便升级Yii的版本,你可以在$this->validateCsrfTokenInternal($this->getBodyParam($this->csrfParam), $trueToken)加一行:

PHP代码
  1. || $this->validateCsrfTokenInternal($this->get($this->csrfParam),$trueToken)  

即,允许从GET参数中获取 csrf的值。

然而,很多时间我们都会手贱去composer update,所以这个方法有点不太敢使用。最终,还是决定修改editor.md的插件,在image-dialog.js中加入几行:

JavaScript代码
  1. if (settings.crossDomainUpload)  
  2. {  
  3.     action += "&callback=" + settings.uploadCallbackURL + "&dialog_id=editormd-image-dialog-" + guid;  
  4. }  
  5. //在上面的if代码后先加入csrfToken的值的获取   
  6. var csrfToken = $('meta[name="csrf-token"]').attr('content');  
  7. var csrfField = "";  
  8. if (csrfToken) {  
  9.    var csrfParam = $('meta[name="csrf-param"]').attr('content');  
  10.    csrfField = "<input type='hidden' name='" + csrfParam + "' value='" + csrfToken + "' />";  
  11. }  

然后在下面的dialogContent里加入csrfField的内容,使之 变成:

JavaScript代码
  1. var dialogContent = ( (settings.imageUpload) ? "<form action=\"" + action +"\" target=\"" + iframeName + "\" method=\"post\" enctype=\"multipart/form-data\" class=\"" + classPrefix + "form\">" : "<div class=\"" + classPrefix + "form\">" ) +  
  2.                         ( (settings.imageUpload) ? "<iframe name=\"" + iframeName + "\" id=\"" + iframeName + "\" guid=\"" + guid + "\"></iframe>" : "" ) +  
  3.                         "<label>" + imageLang.url + "</label>" +  
  4.                         "<input type=\"text\" data-url />" + (function(){  
  5.                             return (settings.imageUpload) ? "<div class=\"" + classPrefix + "file-input\">" +  
  6.                                                                 "<input type=\"file\" name=\"" + classPrefix + "image-file\" accept=\"image/*\" />" +  
  7.                                                                 csrfField +  
  8.                                                                 "<input type=\"submit\" value=\"" + imageLang.uploadButton + "\" />" +  
  9.                                                             "</div>" : "";  
  10.                         })() +  
  11.                         "<br/>" +  
  12.                         "<label>" + imageLang.alt + "</label>" +  
  13.                         "<input type=\"text\" value=\"" + selection + "\" data-alt />" +  
  14.                         "<br/>" +  
  15.                         "<label>" + imageLang.link + "</label>" +  
  16.                         "<input type=\"text\" value=\"http://\" data-link />" +  
  17.                         "<br/>" + csrfField +  
  18.                     ( (settings.imageUpload) ? "</form>" : "</div>");  

注意红字所在地方,其实就加了这个字段而已。再次提交图片上传的时候,不会再报400错误了。

 

 




本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

« 上一篇 | 下一篇 »

发表评论

评论内容 (必填):